Getting Started > Basic Settings

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

update V3.7f

 

Presentation of Bitmap2LCD (Youtube)

Getting Started > Basic Settings

  •  In the Output+Settings Main menu, choose one of the the monochrome, grayscale or color depth formats (green frame and arrow)
  • Choose one of the the byte / word output widths : 8, 16 or 32 bit or Intel Hex file output in case of data generated inside the text editor (and text file) or the Binary File Output (output generated in the Hex editor)  (blue arrow)
  • Also Select the endianness, if the most significant bit is left or right in the data output. (red arrow)

bitmap2lcd-basic-settings_1

  • Define the Work Canvas  Size corresponding to the Dot Matrix Size of your Graphic LCD  work-canvas2
  • If the required size is not listed in the Menu ( Width x Height ) use the Define Custom Size item. (purple arrow)

Note : In case of a monochrome GLCD for example, the height or the width might be a multiple of 8 ! It depends of the GLCD : Read the Data Sheet of  the GLCD controller and check the structure and data direction of the pixels in the DDRAM

bitmap2lcd-basic-settings_2

  • Open the Configuration Settings Panel (orange arrow)
  • Define the Data Syntax Parameters and Data output File Extension (red arrow)
  • Define the data direction of the pixels in the Ram of your LCD controller  (blue arrow)

bitmap2lcd-basic-settings_3

  • Change the Output File Header syntax  (green arrow)

bitmap2lcd-basic-settings_4

  • The Output File Header (Blue arrow) is a text file that is optionally copied to the top of the Text Editor when a data array is generated.
  • Edit the Header, then save and Quit the Header Editor (purple arrow)

Note : the words with the [&xxxxx]  syntax are optional script components that are replaced by values by the software. See details at the end of this article

bitmap2lcd-basic-settings_5

  • Export to Data Array to check your settings Start

bitmap2lcd-basic-settings_6

  • Check Data Array Syntax and Format in the Text Editor

bitmap2lcd-basic-settings_7

  • Set a few pixels (orange) with drawing tool (blue) inside the Work Canvas to check the pixels in the Data output

bitmap2lcd-basic-settings_8

  • Data of the 8 black pixels (orange) generated according to the selected data direction (red) This example is in monochrome mode (8 pixels per byte)

bitmap2lcd-basic-settings_9

Script Components

The script components [&***] can be included only once and will be replaced by the data or value when the data array is generated. Not needed script components can be deleted.

[&NAME]

The [$NAME] and the image size and position are optional and can be placed optionally anywhere in the header.

[&SIZE]

Same for Size of Data

[&TRUEORG]

This is the script component if present in the file, to indicate that you want to have the XPOS and YPOS origins of a reduced dynamic table of constants ( a part of the display you want to change ) given from the X0,Y0 corner you selected in the table translation manager window.

[&XPOS]

[&YPOS]

[&WIDTH]

[&HEIGHT]

The corner position on the Work Canvas and the size of the converted graphic area can be exported into the file.

There are more script components, for the font generation and the data compression. See the above default header script.

 

//** Please edit this header to fit
//** with your compiler
//** use above buttons and then close/save
//** this code (auto-saved)
//** with the above save header editor button !

//** Edit the blue code and use variable where needed !
//** [&??] are the variables, they are case sensitive !

//** Settings for Images and Fonts Data !

#include <avr/pgmspace.h>

const uint8_t [&NAME][] PROGMEM = {
[&TRUEORG]

[&XPOS],
[&YPOS],
[&WIDTH],
[&HEIGHT],
//** These are the X and Y position
//** and the Width and Height of an
//** exported graphic

//** for image conversion with data compression
[&COMPRESSION]
const uint8_t [&CNAME][&CSIZE] PROGMEM = {

[&FONT INCLUDE]
/* // Structured Font Output Include
typedef struct {
long int code;
const tImage *image;
} tChar;
typedef struct {
int length;
const tChar *chars;
} tFont;
*/
[&/FONT INCLUDE]

[&FONT BITMAPS]
const uint8_t [&FNAME][&FNUMBEROFCHARS][&FBYTESPERCHAR] PROGMEM = {

[&FONT DESCRIPTORS]
const uint8_t [&DNAME][][2] PROGMEM = {

[&FONT END]

 

Bitmap2LCD : Touch Panel / Touch Screen Features Update

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

update V3.7f

Bitmap2LCD : Touch Panel / Touch Screen Features Update

bitmap2lcd-touch-menu

Touch panel settings  settings_touch

bitmap2lcd Touch Panel Settings

  • The current Work Canvas image can be defined as Background  (Green Arrow)

bitmap2lcd-touch-menu_3

bitmap2lcd-touch-background-image

  • Enter Touch Panel / Touch panel Screen Mode

bitmap2lcd-touch-menu_2

bitmap2lcd-touch-make-region

To trace Touch panel regions inside the work canvas, after entering in the touch panel script or by opening the TSC file  ( Work canvas outline becomes light blue ) use the mouse inside the work canvas in a similar way to the area selection tool.

Trace the region and when ok, click on the convert to region button (green Arrow)

Theses regions can be moved or resized afterwards.

bitmap2lcd-touch-menu_4

  • Export the GLCD Touch Regions according to the defined settings

bitmap2lcd-touch-regions-data

  • Quit Touch Panel Mode  exiz

Bitmap2LCD … why not LCD2Bitmap ?

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

Bitmap2LCD … why not LCD2Bitmap ?

Reverse engineering : Convert an existing Data Array (or Hex File) to a Bitmap

Update V3.7e , monochrome only

Want to convert 8 bit GLCD data array from an old project to a 16 bit GLCD data array in a new project ?

Want to recover the image from of an old GLCD data array source ?

 

bitmap2lcd-glcd-array-to-bitmap

  • Load a source into Text editor ( Red arrow )  or click on source file inside Text editor
  • Data array inside Text Editor ( Green arrow )
  • Import Data to Graphic  ( Blue Arrow )

For monochrome GLCD data arrays of 8, 16 and 32 bit – bytes/words – , it is possible with bitmap2LCD !

Set your work Canvas Height and Width to a compatible size with the number of data in the array loaded in the text editor, set the byte word  Width to 8 16 or 32bits (in the output main menu) , select the data direction (horizontal or vertical) and click one of the import Data Array buttons. If it matches with the data count, the Work Canvas will show the graphic.

For example in a file an array of 2560 bytes ( 0x00 – 0xFF )

( Width * Height ) Pixels per byte =  (160 * 128) / 8 = 2560 bytes

Import the array into the work canvas and save the work canvas as bitmap.

bitmap2lcd-import-data-to-graphic

Settings :

Define the Hex byte prefix to be found inside the source file

bitmap2lcd-glcd-array-to-bitmap-settings

Editable Font From Scratch

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

Editable Font From Scratch scratchxxx

Standard Edition

bitmap2lcd-glcd-editable-font-menu

  • In the GLCD Font Menu, click Editable from Scratch scratchxxx (red arrow)

bitmap2lcd-editable-font_7

  • Define the size of the font (orange arrow)
  • Draw pixels on the Char view (green arrow)

bitmap2lcd-editable-font_8

Then use the drop down menu at the left or the buttons (purple arrow) to manage the editable font creation.

You can export and import the selected char to/from the Work Canvas.

bitmap2lcd-glcd-editable-font_10

Import System Chars into the Font Editor

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

Import System Chars into the Font Editor

Update V3.7e , Standard Edition

bitmap2lcd-glcd-font-menu

Let’s see how we can export selected characters out of a Windows System font into the Font Editor of Bitmap2LCD :

  • Create a GLCD Font Script by clicking the Main menu item or the Font Panel Button (blue arrow)
  • Choose a Font Name and define its size

bitmap2lcd-editable-font_1

  • In the “Ascii Grid“, select the chars you want to export, here for example A, B and C  (red arrow)
  • In the menu, click on item ” Start editable font Export > Editable (Translate LCD Font Script to an Editable Font (green arrow)

bitmap2lcd-editable-font_2

The “editable font” has been created. It is an Editable Font File (EFF) and an associated GIF file, which is the catalogue of char bitmaps. Both files are located in the Fonts folder.

  • Quit Font Script Creator mode and Open editable (orange Arrow)

bitmap2lcd-editable-font_3

In this example, the selected font name and font size were Aria Unicode MS and 20, in this case the filename of the file will be Arial Unicode MS_20Editable_Font.EFF

bitmap2lcd-editable-font_4

The patterns of theses 3 chars (green Arrow) can now be freely edited.

Example 2

In the first example above, the height of the chars is 25 pixels.

This time, we want to limit the Size of chars in Height and in Width and export a Fixed Size Font.

  • Change the first 3 Parameters (purple arrow) and you will see a red frame in the char View (green arrow)
  • Export To editable (blue arrow)

bitmap2lcd-editable-font_5

  • You get these editable chars

bitmap2lcd-editable-font_6

 

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 V3.7c

Bitmap2LCD can generate data array for Graphic LCD of  4 , 16, 32 and 256 shades of gray

There are several setting options in the Output + Settings Main menu to do this, as shown below :

bitmap2lcd-gray-shades

 

Here are the color pickers in the 32, 4 and 16 shades of gray modes :

Bitmap2LCD Grayscale Color Pickers

For 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, see the above blue arrow if you invert the Gray Shades Palette of the Color Picker and Data Palette of the tool.

 

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