Bitmap2LCD : Vector Design Module ( Info + Tutorial )

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

Bitmap2LCD : Vector Design Module ( General Information )

Programming example below

Update V3.9 upwards

From Version V3.1  Bitmap2LCD is capable to run / generate code which is compatible with external vector Libraries such as GLCD.C , for example one of the many GLCD library you can download for free or buy on the Internet.

Drawing for example a Line , a circle, an ellipse or a Rectangle on your Graphic LCD becomes very easy : You just have to draw these vectors inside the Work Canvas of Bitmap2LCD (red arrow), and the tool generates the code with its coordinates. Another option is to program vectors inside the script editor and run the script in the same way as with a Graphic LCD Simulator.

This code can be exported to the Text Editor for an external use or can be moved to the Vector Script (blue arrow).

Draw Elements in the Work Canvas  < —->  Programm Vector Elements in the script

  • Draw Vectors Elements inside the Work canvas     >>  Export Code inside Text editor
  • Draw Vector Elements inside the Work canvas      >>  Export Code to the Current Vectors Script

Program Vector Elements inside the Script editor >> Run Script which is Drawing Vector elements inside the Work Canvas

There’s is a list of Vector design Elements (green arrow) you can select and then edit each of its parameters.

The vectors Elements are functions to draw a bitmap, to move the cursor, to write a number, a char or a text, to select a font with its size and style, to draw a dot , a line a rectangle or a circle etc…

The syntax of these Vector Elements can be changed in the Settings Panel to match your particular GLCD library. It’s easy then to copy the script as it is already and paste it inside your embedded app source editor.

Buttons :

Context Menu :

The Vector Programming Settings Panel :

In the Vector Data Settings Panel, you can set the following parameters : The Syntax of the Vector Element function, define if enabled or disabled, define if X and Y coordinates only or with length and width, where applicable, with or without fill (color) parameter. The defined syntax will also appear as defined here in the list of Vector Elements above the Script (green arrow above fig.)

Programming Example

With  vecto2  in the main menu, you can enter the Vector Design Mode.

In the Vector Design mode, the frame around the Work Canvas becomes purple.

  1. Draw a rectangle and a circle vector in the Work Canvas2
  2. Export Work Canvas to Vectors (red arrow)
  3. Vector Script has been generated
  4. Clear the Work Canvas with the delete cross or using the context menu item
  5. Export Vectors To Work Canvas
  6. Work Canvas has been updated from Script

Vector Elements are selectable to be edited/moved, selectable in the Work Canvas or in the Script tables (see below)

Loading / Saving Vector Files

Saving and loading Bitmap2LCD Vector Design files (Files with .B2L extension)

The Vector Elements inside the Work Canvas are saved to a .B2L file. These Vector Elements can be reloaded and edited later, if needed.

B2L Vector Files are saved inside the user defined Graphics Library Folder

See below how to activate the filter to view only the Vector Files inside the File Explorer.

bitmap2lcd B2L filter

In the Vector Design Mode , you can see the parameters of every vector Element inside the ‘Script + Objects‘ tab located in the Text Editor Main Tab (blue arrow).

Select a Vector Element in the Vector script

You can select them (red arrow) and the selected vector becomes orange inside the Work Canvas.

Select a Vector Element in the Work Canvas

Orange arrow points the Select Vector Element button, the yellow arrow points to the two last lines of the script. These are the rectangle and the circle drawn in the Work Canvas and exported to the script.

Bitmap2lcd_vector_design_3

Formats of the Vector Elements  ( syntaxes are user definable )

GLCD.Dot or GLCD.SetPixel (X,Y,Color)

GLCD.Rect (X1,Y1,X2,Y2,Color)

GLCD.FillRect (X1,Y1,X2,Y2,Color)

GLCD.RoundRect (X1,Y1,X2,Y2,R,Color)

GLCD.FillRoundRect (X1,Y1,X2,Y2,R,Color)

GLCD.CIrcle (X1,Y1,X2,Y2,Color)

GLCD.FillCircle (X1,Y1,X2,Y2,Color)

GLCD.Line (X1,Y1,X2,Y2,Color)

GLCD.VLine (X,Y,Height,Color)

GLCD.HLine (X,Y,Length,Color)

GLCD.DrawBitmap (Filename.bmp,X,Y)

Filename of bmp file located in the Graphics files folder. > no folder name allowed here !

GLCD.DrawBitmap (Filename*,X,Y,Width,Height)

* filename of converted *.h file located in the output files folder but without extension,

No folder allowed here, data direction and endianness must be set correctly  : this operation uses the data to graphic conversion ! Currently only monochrome data files supported !

GLCD.GotoXY or GLCD.CursorTo (X,Y)

GLCD.Puts (“text”)

” are optional and definable

GLCD.PrintNumber (numeric value)

GLCD.InvertRect (X1,Y1,X2,Y2)

GLCD.Putchar (character)

GLCD.ClearScr ()

Delay (mS)   >> max 5000 mS

GLCD.SelectFont (System Font Name, Font Size, Font Styles (max 4x)*)

*Font styles are : Bold, Italic, StrikedOut, Underlined

Currently only System Fonts supported

Monochrome :

Color = 1 is white

Color= 0  is black

 

Select and modify Vectors

At the right side of the Script and Objects panel, there’s a vector tree where you can find the list of the vectors having been drawn inside the Work Canvas. By clicking on a vector (blue arrow), the list of its Properties appears in the Properties view. (red arrow).

In the Properties View, you can edit the X and Y coordinates and if available, the corner radius of the selected vector.

The vectors programmed inside the script, do not appear in the vector tree and Properties list.

bitmap2lcd Vector Paramaters

Bitmap2LCD Software Update

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

From Version V3.0c  Standard Edition and V4.0a Extended Edition, the software can be automatically updated by the user.

From version V3.9H

Access the About Panel by clicking the [ ? ] button. It’s at the left of the main menu.

The Currently running and then curretly available Software versions are displayed in the Update Tab of the About Window .

The currently running version installs the update. The current version will not be uninstalled. You’ll find current and new version as icons on your destop. As the configuration settings and the projects of the various versions are located in separate folders in the my Documents folder, you can run the different versions installed, one session at the time.

Bitmap2LCD update on previous versions

From V3.8 the SW-update system has been changed and does’nt work anymore on older versions. Standard Edition licensed users, please ask for an update with you Paypal transaction number by email.

From version V3.9H, the automatic update sytem is based on the new SW update system. The update request button has been moved from the main menu to the About window now  accessible with the First button at the top left [?]

Note : Sometimes corporate firewalls are blocking the update process. In such cases, contact us by email for an update with paypal transaction number.

At the right side In the update main menu or later in the About (?) update tab, you can check the latest available Version, and opt to download and install the update. The currently running version installs the update. The current version will not be uninstalled. You’ll find current and new version as icons on your destop. As the configuration settings and the projects of the various versions are located in separate folders in the my Documents folder, you can run the different versions installed, one session at the time.

From Version V3.1 the configuration settings and the projects of the current version are copied into the settings folder of the updated version during the SW update process.

bitmap2lcd-software-update

Bitmap2LCD How To Use ? ( 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)

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)

and you can browse the listed topics

Bitmap2lcd Blog Search

 

Translation of these Tutorials 

Translations  Traductions  Übersetzungen  Traducciones_ Traduzione 

Find Help and Tutorial using the Internal Web Browser

 

Presentation slide show on the website

Link to the Slideshow

The Windows

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

fig 2 )

Bitmap2LCD is a floating 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, and choose between Normal or StayOnTop Window

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.

Fig 3 )

The Color Depth of the Work Canvas

Monochrome , Grayscale or Colors

Fig 4a+b )

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 )

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)

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..)

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

Fig 8 )

Converting a bitmap to GLCD data.

Fig 9 )

Your hexadecimal file is in the Text editor in the format defined in the configuration settings. (fig 10)

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

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 Picker

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

Write 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 and Extended 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 !

Generate a One Line Array per Char Font

 

Generate a One Line Array per Char Font (with bitmap2LCD)

( from Version 3.8G build 8 )

1. Enter Font Script Mode

2. Select the chars, here from 0 to 9 ( green arrow )

3. Shift the whole Font up to eliminate white pixel lines ( blue arrow )

4. Specify Max Height in the Parameters ( red arrow )

-> This example is for horizontal data direction, see the bar with buttons with arrows on screenshot below !

5. Set One Line Array Parameter to True ( purple arrow )

6. Click Export Font To data button

 

In the output file, data array for each char takes one single line ( orange arrow )

( in this example, it is a 16 bit data array format )

Bitmap2LCD How To Use ? (Versions anterior to V3.9)

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)

Obsolete article !

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 !

 

 

 

 

 

Bitmap2LCD : Reference Graphics for Color Palettes

Bitmap2LCD : Reference Graphics for Color Palettes

 

256 colors ( 8bpp )

4096 colors ( 12bpp )

(262k) 262144 colors ( 18 bpp )

(16 Million) 16777216 Colors ( 24 bpp )

 

Bitmap2LCD : Working with Custom Color Palettes

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

Working with Custom Color Palettes

From V3.8e , the above functions have been moved to the COLOR PALETTE tab , Main Menu

In the Output + Settings / Main menu, for the color mode range going from 256 to 262k Colors you can load a Custom Color Palette by loading a graphic file (BMP/JPG/PNG) that contains the exact number of reference colors, for example 256 Colors for the Custom 256 colors Palette.

The “Custom Color Palette” will override the “Default Color Palette” in a particular project other than Default.LCD (see below about projects)

To load a custom color palette, just create/switch to a project different than Default.LCD and switch to the correct color mode (for example 256 colors), then click on the “Load a custom Color Palette” item in the Output + Settings main menu (blue arrow). The Color Palette of the Reference Graphic will then be loaded.

Bitmap2LCD custom color palette

The next line in the main menu, below the blue arrow will show you if the Default or the Custom Color Palette has been loaded.

To delete a Custom Color Palette, delete the project name, for example, MyProject.LCD

About Projects in Bitmap2LCD

In the File Explorer  >>

List the projects (red arrow)

Name of the current active project (blue arrow) >> NewProject.LCD

Below the List of Projects ( each project is a set of many possible settings )

A Red Star indicates the active project name

Use Right Mouse Click or local menu to act on projects.