Tag Archives: GLCD tool

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.

 

 

Re-installing or uninstalling Bitmap2LCD

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

Re-installing or uninstalling Bitmap2LCD

Up to Version V2.8a (b8) , the folder where your personal tool configuration and all your projects were saved, was’nt automatically deleted when running the uninstall task. This has changed since.

in the Documents folder : see folder Bitmap2LCD inits

If you have an anterior version and want for any reason to uninstall the software, or reinstall it completely, you can just delete this Bitmap2LCD inits folder and all its content.

At next application launch, a new default folder will be created.

You may also find older Bitmap2LCD inits XX-XX-XX folders, if you clicked on “quit and restore factory settings” in the file main menu at some time in the past. ( These folders are just config backups in case you need a configuration recovery )

The Bitmap2LCD Project default project folder in the Documents folder will not be automatically deleted by uninstalling the software.

 

 

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 !

 

 

 

 

 

Switching OFF the Internal Web Browser

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

Switching OFF the Internal Web Browser

From Version V2.8H (B2) the internal Help Web Browser (blue arrow) , to access to the online tutorials can be enabled or disabled (red Arrow) in the configuration panel (green arrows)

Of course, you can use your own favorite web browser to access the help topics and tutorials !

Please note that this feature needs to have the Microsoft Internet Explorer installed on the computer. It’s for Bitmap2LCD’s internal use. In case IE can’t be found, the internal Help Web browser will permanently be switched OFF.

bitmap2lcd Internal Web Browser Disable

Resize and then Import a graphic into the Work Canvas

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

Resize and then Import a graphic into the Work Canvas

Bitmap2LCD Resize Preview

Outdated information :

Since v2.6B, there’s a new toolbar at the top of the graphic (blue arrow)

When importing a graphic file, you can choose to resize the graphic size in the graphic preview (yellow arrow) or turn the graphic or reload the original graphic.

If the graphic is much larger in size than the work canvas, you will see a “blue frame” in the preview, frame which shows the size of the Work Canvas. You can move this area to the graphic detail you wish to import. In this case, the later message box resize to fit should be answered with NO.

When you want to resize the graphic, click on the selection button (yellow button) and then define the size on the image with mouse. The preview will be resized.

When ready import the graphic (red arrow) to the floating selection layer above the work canvas. When ready paste the floating selection layer.

Bitmap2LCD : The Configuration Settings Window

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

OBSOLETE Article : For older versions

All the configuration settings of the Bitmap2LCD tool have been reorganized and grouped in one single window :

The main settings, the output file header syntax settings, the pixel to data array orientation setting , the optional postprocessing and a new user friendly pixel to data array organisation display.

 

Bitmap2LCD Configuration Settings

 

Let’s see how to configure the GLCD data output settings :

The generated data array file can be configured to meet the syntax requests of your compiler or assembler. There are many possible settings, to make it possible to match the tool with most of the compilers of the market.

At first, you define the table data settings

  • Data Width format. ( 8,16 or 32 bits data)
  • Binary, Hex or decimal format.
  • Syntax of Data Byte/Word (make it compatible with your favorite compiler, assembler)
  • Type of file (extension)

 

 

bitmap2lcd output settings

 

As next, you define the header syntax ( output file header tab)

>>  To edit file header blue arrow )

  • Click on the edit button and the header script is loaded into the editor. Modify it to meet your requirements.
  • When ready, quit the header editor by clicking the same button.
  • Find more about the header syntax at the end of this article.

As next, you define the way the data arrays are arranged to correctly fit in the DDRAM of your LCD controller. ( Data orientation ) These settings must be compatible with the LCD display functions in the GLCD Library you use in your project.

  • The origin corner X0,Y0
  • Data direction (The direction in which the pixels slices are taken from the work canvas and converted to GLCD data, for example in slices or in full canvas height or full canvas width. A slice is 8 pixels in monochrome mode and 2 pixels in 4bpp grayscale mode)
  • The Endianness (Most Significant Bit is first or last)
  • Special settings

More about File Header syntax ( output file header tab )

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

[&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 additional script components for font generation and data compression.

About the File Explorer in Bitmap2LCD

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

File explorer files view settings

  • include / exclude the folders in/from the list of files ( yellow arrow )
  • include / exclude older than today’s files in/from  the list of files ( blue arrow )
  • Refreshing the list of files, for example after insertion of a USB Stick
  • Filtering the list to only show a family of files. ( fig1. the file filter list is popped up )

If any file list filter is set, in the status bar at the top right side of the file explorer, the count of elements is displayed as NOT FILTERED OUT.