Category Archives: Quick tutorial for Bitmap2LCD

Bitmap2LCD – Getting started ( Short Tutorial )

Welcome to Bitmap2LCD  !

Topics accessible from the internal Web Browser

Presentation of Bitmap2LCD (Youtube)

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

How to search for information ?

At the TOP RIGHT HAND SIDE of this BLOG you’ll find

1. For example the link (green arrow) of this Quick Tutorial
2. Search this website using keywords (orange arrow)

Filter with the list of topics / categories

Bitmap2lcd Blog Search

 

Translation of these Tutorials 

Translations  Traductions  Übersetzungen  Traducciones_ Traduzione 

 

Presentation slide show on the website

Link to the Slideshow

The Windows

In the red frame below (Windows tab – Main Menu ) the windows of the Program

Bitmap2LCD is a floating multi-window application for dual screen computers.

Getting Started  > Basic Settings

Work Canvas

It’s the GRAPHIC EDITOR, the Paintbox : Import graphics into it, draw pixels and shapes, add text…

It has a user defined size and color depth matching with the target Graphic LCD device of the project.

Color Depth

Monochrome , Grayscale or Colors

Fig 4a+b )

Details about the Work Canvas

Details about Grayscale

Load a graphic

Variant 1 : Dialog (red frame)

Variant 2: File explorer

  • Open/Show the FILE EXPLORER window
  • In the list, click to select the graphic file to load (blue arrow). It shows in the GRAPHICS PREVIEW window.
  • Resize, turn or tilt the preview image with the buttons located at the top of the preview.
  • Click the Export Preview to Work Canvas button (green arrow)

If graphic is larger than WORK CANVAS, a dialog shows to resize to fit the Work Canvas or not.

Floating Selection Layer

MOVING THE IMPORTED GRAPHIC INSIDE THE FLOATING SELECTION LAYER

An import of a graphic takes place on the FLOATING SELECTION LAYERA red frame (red arrow) around the canvas shows an active selection layer.

After MOVING the selection layer (blue arrows), PASTE paste the graphic (green arrows) to the Work Canvas.

.

Convert a color bitmap to black and white pixels

2 variants color to monochrome conversion : THRESHOLD LEVEL and DITHERING

Variant 1.THRESHOLD level (red arrow) : move the cursor .

Variant 2. DITHERING (green arrow) with monochrome color reduction. (Dithering Parameters are located in the main menu convert to.. )

After conversion, PASTE the floating SELECTION LAYER (Blue Arrow) to CANVAS

Details about dithering

Fig 8 )

Export a work canvas graphic to GLCD data.

There are several options to choose from :

Your hexadecimal file is in the Text editor in the format defined in the configuration settings.

 

Example Of How to Convert A graphic To a Data Array

Example of how to convert a Graphic to a Array of Data

.

System font, Editable Font, Anti-aliased Font, GLCD Font  with Bitmap2LCD

Info about Fonts in Bitmap2LCD

.

Projects, Artworks, Filenames

A PROJECT is a set of configuration settings

For different GLCD projects, the specific set of settings can be saved as a Project. It allows to switch from one to another.

A so called “Artwork” is a set of files related to the graphic source filename : In the below example a graphic saved for example as NewBitmap.BMP , will be converted to an output file called NewBitmap.h , and the associated touch panel file will then be named NewBitmap.TSC (red arrow)  

When you save your Artwork with”Define Artwork Name”  in the GLCD Graphic Tab (red frames), as a bitmap, you will change the basic filenames.

Color picker

The Color Picker depends of the selected Color Depth of the Work Canvas

The picker is located in the right panel of the Work Canvas window (purple arrows).

Define foreground Color (PEN COLOR) and background color (BRUSH COLOR) for painting and Writing text in the Work Canvas

Copy foreground color to background color, swap the colors etc…

bitmap2lcd Color Picker

Example of color pickers, (Color mode and 16 gray shades)

Write text

Write Text Button located at the top of the Work Canvas (blue arrow)

2 variants available for writing text :

  • The Text Field Editor
  • The Single Line Text editor

The single Line Text Editor, text can be moved and then pasted to canvas paste

Using Vector Mode (GLCD Library)

For GLCD library functions like GLCD.rect(x,y,h,w) or GLCD.GotoXY(x,y) or similar…

Vector Mode

Target Code Example : Displaying a bitmap

Code example

.

Software Updates

Lifelong software Updates for Standard and Extended Edition :

Details About Software Updates

Development and Support

A feature not implemented or not yet available ?

submit us your Idea !  Need support  ? Contact us !

Getting Started > Basic Settings

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

Update V4.7b >

Presentation of Bitmap2LCD (Youtube)

 Getting Started > Basic Settings

  • Define the project name and the filenames for Graphic, data output and touch panel data output
  • Configuration Settings window (red frame)
  • Current basic Settings (red frame)
  • Work Canvas size (green arrow)

Configuration Settings : Monochrome, Color and Grayscale, Data formats etc…

The Data Format Settings are also located in the right panel of the Work Canvas. (blue arrow and frames)

  • Edit the Output File Header syntax  (green arrow)

Output File Header

  • The Output File Header is optionally copied to the top of the Text Editor when an export to data as text is performed .

Note : the variables with the [&xxxxx]  syntax are optional script components, replaced by their value on export. (details at the end of this article)

How to use bitmap2LCD ? A Short Tutorial

Welcome to Bitmap2LCD  !

You can find various TUTORIALS on-line on the Bitmap2LCD BLOG.

https://bitmap2lcd.com/blog

The HELP topics are also easily accessible from inside the

 tool, using the internal Web Browser.

 

Presentation of Bitmap2LCD (Youtube)

 

Link for versions anterior to V3.7

 

Getting Started : A short tutorial

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

 

How to find information here ?

At the TOP RIGHT HAND SIDE of this BLOG you will find

For example the link (green arrow) of this Quick Tutorial
You also can search this website using keywords (orange arrow)

Bitmap2lcd Blog Search

and you can browse the listed topics

Translation of these Tutorials 

Translations  Traductions  Übersetzungen  Traducciones_ Traduzione 

 

Find Help and Tutorial using the Internal Web Browser

Use the Topic Menu Item as shown below

 

bitmap2lcd Web Browser

Fig 1 ) 

Already have discovered the presentation slide show on the website  ?

It’s the same sideshow as the one included in the demo/trial version of the software tool. A general info about what this is it all about.

Link to the Slideshow

 

The Windows

The red frame  below shows where, in the Main+Windows tab of the Main Menu, to open and show the different Windows of the Program

bitmap2lcd-windows

fig 2 )

Bitmap2LCD is a multi-window application and supports dual screen.

List of the windows : Main window, LCD Viewer, Configuration Settings, File explorer, Graphic and Editors Window, Tool menu, Work Canvas, Adjustments, Font Panel and internal Web Browser.

You can show or hide (minimize) the windows, move them to the secondary monitor.

 

.

.

Getting Started  > Basic Settings

GETTING STARTED > BASIC SETTINGS

.

.

The Work Canvas

It’s the GRAPHIC EDITOR, the paintbox , You can draw pixels and shapes, import graphics into it. It has a user defined “color depth” which is the same as the target GLCD of the project.

bitmap2lcd-work-canvas

Fig 3 )

The Color Depth of the Work Canvas

Monochrome , Grayscale or Colors

Bitmap2lcd Color depth

Fig 4 )

Details about the Work Canvas

Details about Grayscale

 

Load a graphic

LOADING A GRAPHIC USING A STANDARD WINDOWS DIALOG OR LOADING IT FIRST INTO PREVIEW ? 

  • You can either use the Load Graphic Dialog ( red frame )

bitmap2lcd-load-graphic

Fig 5 )

OR

  • open / switch to the FILE EXPLORER
  • In the list of files, click to select your particular graphic file you want to load (fig6 blue arrow) , it appears in the GRAPHICS PREVIEW window at the right side.
  • Resize or turn/tilt the preview image using the buttons located at the top of the GRAPHIC PREVIEW.
  • Double click in the graphics viewer (yellow arrow) or the click the import button located at the top or bottom of the preview (fig6. Green arrow)

bitmap2lcd-load-graphic-preview

fig 6). File explorer view

If the graphic is larger than the WORK CANVAS a message box will ask you if you want resize the image to fit the canvas or not.

The Floating Selection Layer

MOVING THE GRAPHIC IMPORTED INSIDE THE FLOATING SELECTION LAYER ? 

The graphic will be imported in the FLOATING SELECTION LAYER not directly into the WORK CANVAS (fig7. imagine your own graphic inside the canvas)

The red frame (fig7. red arrow) around the canvas means that you will have to PASTE paste the graphic into the canvas after MOVING it, convert it. When outline frame is red, it means that a “floating ” SELECTION LAYER above the canvas is displayed…

The imported graphic can be moved around above the Work canvas : Move/drag the red frame to the desired canvas location with the left mouse button pressed. (fig7. blue arrows)

Then PASTE paste the FLOATING SELECTION LAYER (fig7. green arrow) The red frame in the frame and around the work canvas disappears. (There are also other ways to Paste, in menus, using the return key etc..)

bitmap2lcd selection layer

fig 7 ) Import a graphic file

.

Converting a bitmap to Monochrome

THRESHOLD LEVEL OR DITHERING ?

If you’re loading a COLOR graphic file to convert to black and white for MONOCHROME GLCDs you have the choice of applying a Black and White THRESHOLD level (red arrow), or applying a DITHERING (green arrow) with monochrome color reduction.

Dithering Parameters are located in the main menu of this Window

When the conversion to Black and white is finished, PASTE the floating SELECTION LAYER (Blue Arrow) to the WORK CANVAS

Details about dithering

bitmap2lcd-convert-to-black-and-white-dithering

Fig 8 )

Converting a bitmap to GLCD data.

Start   Export WORK CANVAS Graphic To a DATA ARRAY inside the Text Editor

Start HEX   Export WORK CANVAS graphic to Data inside the HEX Editor / BINARY file

Start Selected Export a selected area of the WORK CANVAS To a Data Array inside the TEXT EDITOR

Bitmap2lcd export graphic

Fig 9 )

Start a Graphic To Data conversion (fig 9. red arrow)

Your hexadecimal file appears in the Text editor, formatted according to the defined configuration settings. (fig 10)

bitmap2lcd output file

Fig 10) Bitmap has been converted to the Hexadecimal, decimal or binary  file in the text editor.

 

Basic Configuration

Where to find and change the SETTINGS

Link to Basic Configuration

Example Of How to Convert A graphic To a Data Array

Example of how to convert a Graphic to a Array of Data

.

System font, Editable Font, Anti-aliased Font, GLCD Font  with Bitmap2LCD

Info about Fonts in Bitmap2LCD

.

Projects, Artworks and Filenames

A PROJECT is a set of configuration settings ( There are many possible settings ! )

If you work on different GLCD projects, you can save the “current” settings inside a Project name. It’s the easiest and fastest way to switch from one to another.

A so called “Artwork” is a set of files related to the graphic source filename : In the below example a graphic saved for example as NewBitmap.BMP , will be converted to an output file called NewBitmap.h , and the associated touch panel file will then be named NewBitmap.TSC (Red Arrow)  

When you save your Artwork with”Define Artwork Name”  in the GLCD Graphic Tab (Red Frames), as a bitmap,  you will change the basic filenames

bitmap2lcd-artwork-name

Fig 11 )

Color picker

Bitmap2LCD has built in functions which are very similar to the popular MS Paint program

You can select the foreground (PEN COLOR) and background colors (BRUSH COLOR) for painting and WRITING text by clicking in the color boxes of the menu window.

You can copy foreground color to background colors or swap them when clicking in the small boxes around the colors boxes.

bitmap2lcd Color PickerFig 12 ) The Color Picker ( Here the Color mode Picker and the 16 gray shades mode picker )

 

Drawing tools

Buttons are located At the top of the Work Canvas

bitmap2lcd-drwaing-toolsFig 13) drawing tools

 

Write a text

Button is located at the top of the Work Canvas (blue arrow)

bitmap2lcd-write-text

Fig 14 )

There are 2 different ways to write text inside the work canvas :

  • The Text Field Editor
  • The single Line Text editor

bitmap2lcd-write-text_2

Fig 15 )

Example of using the single Line Text Editor, text can be moved and pasted with paste

 

bitmap2lcd-field-text-editor

Fig 16 )

Example of using the Text Field Editor, text can be moved and pasted with paste

 

 

Working in Vector Mode (GLCD Library)

Using GLCD library functions like GLCD.rect(x,y,h,w) or GLCD.GotoXY(x,y) and similar :

Please follow this link :

Vector Mode

Target Code Example : Displaying a bitmap on an

Atmel AVR MCU

Code example

.

Software Updates

With Standard Edition of Bitmap2LCD, you get unlimited Software Updates

Details About Software Updates

Bitmap2LCD development and Support

A feature you would like to see implemented not yet available ?

submit us your Idea !  Need support  ? Contact us !

 

 

 

 

 

How to Use Bitmap2CLD ? (before Version 3.0)

Obsolete article !

 

Link for Versions V3.0+

For a quick access to the help and tutorials, click the following button in the main menu

bitmap2lcd_tuto_0

 A short tutorial

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

The Windows

bitmap2lcd_tuto_2

Bitmap2LCD is a multi-window application and supports dual screen.

List of the windows : Main window, LCD Viewer, Configuration Settings, File explorer, Graphic and Editors Window, Tool menu, Work Canvas, Adjustments, Font Panel and internal Web browser.

You can show or hide (minimize) the windows and move them to the secundary monitor.

The above arrow  shows where to open and show these windows

 

Projects, Artworks and Filenames

A project is a set of configuration settings ( There are many possible settings ! )

If you work on different GLCD projects, you can save the “current” settings inside a Project name. It’s the easiest and fastest way to switch from one to another.

A so called “artwork” is a set of files related to the graphic filename : In the below example a graphic saved for example as NewBitmap.BMP , will be converted to an output file called NewBitmap.h , and the associated touch panel file will then be named NewBitmap.TSC (Red Arrow)  

When you save your “artworkAS (yellow arrow), as a bitmap,  you will change the basic filenames

bitmap2lcd_tuto_1

 

Load a graphic

 

  • You can either use the direct graphic load by dialog located at the top of main menu File

or

  • switch to the file explorer / or click Load graphic File in main menu File (fig1. red arrow)
  • In the list of files, click to select your particular graphic file you want to load (fig1 blue arrow) , it appears in the graphics viewer window at the right side.
  • Resize or turn/tilt the preview image using the buttons located at the top of the graphic preview.
  • Double click in the graphics viewer (yellow arrow) or the click the import button located at the top or bottom of the preview (fig1. Green arrow)

bitmap2lcd_tuto_3

fig1. File explorer view

If the graphic is larger than the Work Canvas a message box will ask you if you want resize the image to fit the canvas or not.

The graphic will be imported in the selection layer not directly into the Work Canvas (fig2. imagine your own graphic inside the canvas)

The red frame (fig2. red arrow) around the canvas means that you will have to paste the graphic into the canvas after moving it, convert it. When outline frame is red, it means that a “floating ” selection layer above the canvas is displayed…

The imported graphic can be moved around above the Work canvas : Move/drag the red frame to the desired canvas location with the left mouse button pressed. (fig2. blue arrows)

Then Paste the selection layer (fig2. green arrow) The red frame in the frame and around the work canvas dissapears. (There are also other ways to Paste, in menus, using the return key etc..)

bitmap2lcd_tuto_5

 

fig2. Import a graphic file

 

Converting a bitmap to GLCD data.

bitmap2lcd_tuto_4

Start a conversion (fig3. red arrow)

Your hexadecimal file appears in the outputs editor, formatted according to the defined configuration settings. (fig4)

bitmap2lcd_tuto_6

 

Fig 4 Bitmap has been converted to the Hexadecimal, decimal or binary  file in the text editor.

 

Color picker

Bitmap2LCD has built in functions wich are very similar to the popular MS Paint program

You can select the foreground (pen color) and background colors (brush color) for painting and writing text by clicking in the color boxes of the menu window.

You can copy foreground color to background colors or swap them when clicking in the small boxes around the colors boxes.

bitmap2lcd colorpickers

 

Fig 5 The Colorpicker ( Here the 16 gray levels mode and the Color mode pickers)

 

Drawing tools

In the main menu window or at the top of the work canvas , you can access the various drawing tools (also accessible from the main menu)

The main menu is located at the right side (arrow) and the sub-menu at the right side.

drawing tools

Fig 6 drawing tools

Write a text

There are 2 different ways to write text inside the work canvas :

  • The Text Field Editor located in the Visual Components Main menu
  • The single line editor described below

In the “write text” submenu, you can open the font window (green arrow) and write text in the work canvas : first click the button (orange arrow) and click inside the work canvas where to open a new text area.

Bitmap2LCD write text

Fig 7  Fonts and draw a text

 

Find the Configuration Settings

bitmap2lcd_tuto_7

The configuration settings for the conversion are accessible from the main toolbar : Visit then main the menu items , Mode , LCD matrix , Output and the configuration settings window (arrow)