Category Archives: Help topics about Bitmap2LCD

Export a Graphic to a GLCD Data Array

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

Export a Graphic to a GLCD Data Array

Update V4.6c

1. Open the File Explorer Window

2. If needed, select the Graphics Project Folder

3. Select the Graphic Filename

4. Graphic is opened in the Graphics Preview Window

5. If needed, adjust options like size, color reduction and orientation.

6. Export Preview to the Work Canvas( purple arrow )

7. Graphic is inside the FLOATING SELECTION LAYER, above the Work Canvas surrounded by a red frame

8. In this example, a conversion to monochrome is required. (monochrome GLCD)

9. Either choose Black and White THRESHOLD LEVEL with Adjustment Slider conversion or one of the DITHERING ALGORITHMS, like for example Floyd Steinberg.

10. If needed, drag the FLOATING SELECTION LAYER to its destination position on the canvas.

11. PASTE the selection layer to the WORK CANVAS ( blue arrow )

12. If needed, adjust the export parameters in the green column, Data Tab

12. Export the Work Canvas to data array (Choose one of the Export Options : orange arrow)

13. Job done !

Note : With the 8 buttons with arrows at the top of the source code editor, adjust the data direction to match the display memory of the GLCD controller.

Bitmap2LCD : Project Folders and Project Management

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

Project Folders and Project Management

The current active project is displayed in the Windows Tab of the Main Menu (red frame) By clicking in this area, you have direct access to the Project Manager. There’s originally only 1 project called default.LCD

You can add other projects to the system. Every project is a separate set of settings, project folders, work canvas sizes etc.. To access the Project Manager, click on the Files/Projects Button (green frame) then Show Projects Explorer on the File explorer Window (blue frame)

The File explorer Window

The field at the top left side of the file explorer is the “Project Folders Management” and “the Project Management”.

With the buttons showing colored folder icons at the right side of the below blue arrow, you can define the folders where you want to convert, find and save the files of the current project.

By clicking on one of these colored folder icons, you define the currently active folder in the tree as the project folder for Graphics, Output files, Project Documents, Fonts or Touch Screen  files.

When clicking on the links inside the field, you have a quick access to the different project folders.

When for example clicking on “Graphics Library“, you switch the File List Filter to “all graphic files” excluding the other files type from the list. (This behavior can be enabled or disabled in the Filter pop-up menu)

These project folders and all the configuration settings (GLCD size, Data Direction, File Header etc..)  are saved to the disk as a set of project settings.

By clicking on the Show Projects Explorer button (orange star icon) in the menu bar (blue arrow) you can switch the view to the project management.

The Project Manager

The Project list shows the list of available projects. The list can be void in the case only the default project exists. Otherwise, like in this example, the list shows and the active project is marked with a red arrow. The other projects are marked with blue arrows.

The files attached to a project are are located in the documents/bitmap2LCD inits (version) folder.

With the Buttons in the Menu Bar at the top of the project list, you can Create, Activate, Rename and delete Projects.

>.<

Import Projects from previous versions

Copy the project files attached to a previous Project from the documents/bitmap2LCD inits (previous version) folder to the documents/bitmap2LCD inits (current version) folder.

>.<

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

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

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.

Update 4.7b

List of Dithering Algorithms in Bitmap2LCD

Conversion of a color image to monochrome with Dithering Algorithms :

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

About Dithering Algorithms

A graphic placed on the FLOATING SELECTION LAYER can be dithered form the main menu item Convert To

The conversion of an imported color graphic to black and white can be started by the DITHERING button (green arrow) :

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 Work Canvas and Color Depth

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

About Work Canvas and Color Depth

Update V4.7b

The WORK CANVAS is a monochrome, grayscale or color graphic editor.

Color Depth of the canvas (number of colors) is selected in the Configuration Settings.

The COLOR PICKER adapts to the color depth setting (blue arrow).

Example : in 4096 colors mode, the picked color 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 (green arrow).

At import of a color graphic into the WORK CANVAS, a conversion to the defined color depth palette of 8, 16, 256, 4096, 65535 or 262k Colors is performed.

Color Palettes

Default and Custom Color Palettes can be managed in the main menu Color Palette .

>.<