Category Archives: Help topics about Bitmap2LCD

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

 

 

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

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.

Output + Settings Main Menu :

bitmap2lcd-generate-binary-files

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

 

Example of how to convert a Graphic to a Data Array

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

Example of how to convert a Graphic to a Data Array

Update V3.7c

Note : If you prefer the standard windows dialog method of loading of files, you can find it in the FILE main Menu. Here, it’s the GRAPHIC PREVIEW loading method that is shown !

1. In the File Explorer, Click on the Filename of the Graphic you want to load

bitmap2lcd-load-graphic_1

In the GRAPHIC PREVIEW , first to load graphic element into the WORK CANVAS. you can choose different options as for example changing it’s size, it’s color reduction, it’s orientation.

2. The graphic appears in the preview > Click on Import ( purple arrow )

bitmap2lcd-graphic-preview

3. The graphic is imported in the FLOATING SELECTION LAYER above the Work Canvas ( red frame )

bitmap2lcd-load-graphic_2

3. In this example, the graphic must be converted to monochrome, so you can either choose to define the Black and White THRESHOLD LEVEL with Adjustment Slider or a DITHERING ALGORITHM like for example Floyd Steinberg

4. Then move the FLOATING SELECTION LAYER if needed and then PASTE the selection layer to WORK CANVAS ( blue arrow )

bitmap2lcd-dithering-conversion

4. No more red frame means no more visible floating selection layer above the work Canvas,

Convert the graphic to a array of data (orange arrow)

bitmap2lcd-load-graphic_3

5. Job done !

bitmap2lcd-data-array

 

Export Graphic Picture to Data array – Split Data in two parts in height

Export Graphic to Data array – Split Data in two parts in height

The export of the graphic inside the Work Canvas can be exported in two data arrays. The Height is split into two parts.

This only works in one of the horizontal data direction schemes, see red arrows below.

Bitmap2lcd Splitted GLCD Data Direction

In the export Dialog below, there are two options (blue arrow) to export only the Upper or only the Lower half of the work canvas to a data array. In the example below, Upper half are all white pixels and Lower half are all black pixels.

Bitmap2lcd Splitted GLCD

Once one of the upper half or the lower half data array has been exported, the filename must be manually modified in the dialog for example to Newbitmap_Upper or to Newbitmap_Lower to have two separate files inside the folder for the two GLCD halves.(orange arrow)

The variables names in the files are already different, if it’s an upper or a lower part data array (green arrow)

Bitmap2lcd Splitted GLCD Filename

Work Canvas Subdivisions

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

Work Canvas Subdivisions

Update V3.7c

There’s a feature to split the Work Canvas in fixed parts ( subdivisions ) located in the Work Canvas main menu ( green arrow )

How to Define a Subdivision :

  1. Subdivision Menu item : Open / Create Work Canvas Subdivisions ( green arrow )
  2. Draw an area in the work Canvas with the mouse
  3. Make a Subdivision with the area ( blue arrow )

bitmap2lcd-work-canvas-subdivisions

Note: The subdivisions must fit inside the paging scheme lines , the horizontal or vertical red lines.

bitmap2lcd-work-canvas-subdivisions_2

When all needed subdivisions were defined, quit the subdivision creating mode ( red arrow )

A set of subdivisions is attached to the current project name. They are saved and reloaded automatically.

To delete a Subdivision, select the area in the Work Canvas and press delete.

These Work Canvas Subdivisions can separately be exported to data arrays (see example below)

bitmap2lcd-work-canvas-subdivisions_3

 

Bitmap2lcd : Dithering and Color Reduction

Dithering and Color Reduction

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

List of Dithering Algorithms in Bitmap2LCD

When you convert a color image to monochrome or grayscale, you can use one of these algorithms :

Floyd Steinberg, Nearest Color, Stucki, JaNuNi, Steve Arche, Sierra, Burkes.

About Dithering Algorithms

Inside the WORK CANVAS, a graphic on the FLOATING SELECTED LAYER can be dithered (blue arrow) according to the defined parameters above the arrow.

Bitmap2lcd Dithering Algorithms

When a color graphic is imported and should be converted to black and white,  the DITHERING button ( green arrow ) appears at the top of the WORK CANVAS

bitmap2lcd-dithering-conversion

 

Bitmap2LCD Appearance, Windows and Styles

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

Bitmap2LCD Appearance, Windows and Styles

Update V3.7c

The program is a “floating windows application” and supports dual screen

bitmap2lcd-windows-managment

Then you can also choose between the skins called “Original Windows Style” or “Modern Style

You can choose your favorite Windows skin at the top of the Windows Main Menu (blue arrow) which will only be effective at the next application launch.

bitmap2lcd-skin-and-styles

Bitmap2LCD supports dual monitors, and sometimes a window can be entirely hidden or located somewhere on the secundary window or even outside the monitor surfaces. You can bring back “home” (on the main screen) a window by clicking the dedicated menu items.

 

 

Full Size or Partial Conversion of the Graphic in Work Canvas

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

Full Size or Partial Conversion of the Graphic in Work Canvas

Update V3.7c

Auto-framing (effective bitmap size) : The tool automatically builds a frame around the bitmap located inside the work canvas and converts only the pixels inside it to data.

This frame is built around the effective bitmap by ignoring all the pixels around that are  considered as being in “background” color pixel. The background color is defined by the pixel color at X0 and Y 0 , at the top left corner.

The frame takes into account the number of pixels per byte ( In monochrome mode for example a multiple of 8 in height or in Width, this depends of the data direction )

Bitmap Size Descriptors : If checked, at the end of the data array in the Text Editor , you will find descriptors with height and Width of the converted bitmap.

Bitmap Coordinates Descriptors : If checked, at the end of the data array in the Text Editor , you will find descriptors with X coordinate and Y coordinate of the converted bitmap, the coordinates of the top left corner. If checked, the Auto Framing processing is bidirectional. If unchecked, the Auto Framing processing will only be made in one direction.

Find these options in the configuration panel (blue arrow) Data syntax Tab (green arrow) in the Bitmap Conversion Options Group (red arrow)

bitmap2lcd-framing-settings

Options when running a conversion of the graphic in the Work Canvas :

You can opt for an effective Bitmap Size (auto-framing) ( green arrow ) or for a conversion of the full size canvas or of a manually selected area of the Work Canvas ( red arrow )

In the case of a manually selected area, you have then to select the area with the mouse along the paging scheme guide lines.

bitmap2lcd-framing-settings_2

 

More about partial conversion here

 

Bitmap2lcd : About the Work Canvas

About the Work Canvas

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

The WORK CANVAS (blue arrow) is a monochrome only , grayscale only  or color graphic editor

The allowed type and number of “colors” in the WORK CANVAS are defined in the OUTPUT AND SETTINGS main menu at the left side in the screen shot below.

The COLOR PICKER at the right, is changing according to the above mentioned “color depth” setting, and if it is a color WORK CANVAS like for example 4096 colors that is currently selected, the picked color in the color picker, will be the nearest color found in the internal default or custom 4096 colors palette. There are color palettes for 8, 16, 256, 4096 65535, 262k Colors.

When you import a color graphic into the WORK CANVAS, it will be converted to “color depth” defined in the OUTPUT AND SETTINGS main menu.

Bitmap2lcd Work Canvas

 

Convert a List of Unicode Char Addresses to Data

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

Convert a List of Unicode Char Addresses to Data

Standard Edition

( V3,2g build 1 > )

Loading a list of International Characters in form of a List of Hex Unicode Addresses for example, copied out of a Web Page, copied out of a document, or out of a Excel CSV file, and convert these Chars to Data in one single run is possible from version 3.2g.

Input Format : One single Unicode Hexadecimal Char Address per line in the text file, Hex prefix can be “0x” or “$” or none. Only the first 4 chars of the Address are taken into account.

 

This feature is accessible from the Font Panel (blue arrows)

bitmap2lcd load list of unicode chars

Select the Text/CSV file to load

bitmap2lcd load list of unicode chars 2

Convert the List to Data

Option : As there can be gaps between the Char Addresses in the List, in the Font Settings you can check the Char Address in Descriptor option and define the Address Format

bitmap2lcd load list of unicode chars 3