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.

Export RGB Color Palettes to Text File or to a Look up Table [LUT]

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

Export RGB Color Palettes to Text File or to a Look up Table [LUT]

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

 

( From V3.2e Build 4 to V3.8d )

In the Output + Settings main menu, in the 256, 4096, 65536 and 262k Colors mode you can export the default or custom Color Palette to a text file. ( RGB 24bit Color Hex codes )

The exported file will be saved in the project output files folder

bitmap2lcd-export-rgb-palette

The prefix of the RGB 24bit Color Hex codes can be defined in the settings ( data Syntax Tab )

Bitmap2LCD Export Color Palette 2

About the Sitronix ST7528 grayscale GLCD

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

Bitmap2LCD V2.1b and upwards supports the Sitronix ST7528 grayscale GLCD

The Sitronix ST7528 is a 16-Grey Scale Dot Matrix LCD Controller/Driver

< Quote >

The ST7528 LCD controller does not address rows directly, but rather groups of 8 rows in pages. The LCD memory on the controller is organized into 13 8-bit pages and 160 four-bit column addresses.

There are commands to set the starting page address and column address for a write operation, but no commands to select a row address – you must determine what page the row you want to write is in and set the page address that includes that row. This also implies that if you want to write pixels on adjacent pages, you must address the first page and column(s), write the data, then increment the page address to write the pixels in the adjacent page.

The controller also happens to use what seems like a very bizarre way to load pixel data. Logically, once the address is set, you would write the 4-bit pixel data (or maybe write 2 pixels at a time with a single byte). However, since the addressing scheme addresses pages and not rows, this approach is not used.

Instead, one bit of data for the entire addressed column of pixels (8 vertical pixels) in the current page is written with each byte sent to the LCD. Since each pixel requires 4 bits of data to define the grayscale level, 4 bytes of data must be sent per column to fully define the bits. While this data is being clocked in, the “main” column address does not change. Only after the fourth bit is written to a column is the main column address pointer automatically incremented inside the LCD controller so the next 4 bytes of data sent to the LCD will write the bit data for the next column.

To be complete, we must comment that the “column address” that you send to the LCD controller is actually bits 9:2 of a larger column address inside the controller. The bottom two bits 1:0 are “internal column” address bits. When the 4 bytes of data are written to the LCD controller by the MCU, the internal column address bits increment after each byte write. After the fourth byte is sent, the internal bits will roll from b’11’ to b’00’ and subsequently increase bit 2 of the column address. As you can probably guess, if you do not write LCD data to the controller in groups of 4 bytes, than you will not have complete data for the pixels and the internal LCD addressing will be corrupt.

The implication of all this is that you cannot ever write a single pixel on this LCD. The smallest number of pixels that can be refreshed is a 1 column x 8 row line and it will always take a minimum of four bytes sent to the LCD controller from the MCU to properly set those pixels. If you really do only want to update one pixel in the 1×8 column, you must be sure to write the same data that is already present for the other 7 pixels so their information does not change. This is where keeping a local copy of all pixel data in the LCD RAM becomes essential as individual pixels can be changed in the local RAM as the application requires it, and pixel data for unchanged pixels will still be present for the LCD refresh…

< End of Quote >

Quote from this well written Application Note :  ST7528 Appnote

From Bitmap2LCD Version 3.0H

  • Enable the Special Mode (blue arrow) for ST7528 in the Output+Settings main menu
  • To check it out, just draw 8 pixels in height in the work canvas, in one of the gray colors to be found inside the color picker ( in this example the chosen color is 7 )  ( red arrow )
  • Export Work Canvas to data array 
  • Find your 8 pixels inside the data array, 4 x 0x77 , corresponding to the these 8 gray pixels ( green arrow )

When converting a picture into hex data for a graphic LCD of 160 x 100 pixels , you will get 8320 Bytes, in vertical slices of 8 pixels in height.  ( Normal Gray 4bpp Mode outputs slices of 2 pixels in height = 8000 bytes of data )

——-

Before Bitmap2LCD Version 3.0H

Here’s the needed configuration of Bitmap2LCD for a data output for the ST7528 :

  • Enable the Special Mode (red Arrow) for ST7528 in the Output main menu
  • Select the correct data direction (blue arrow)
  • Enable the Special Mode ON/OFF Switch (green arrow)
  • Select 4bpp Grayscale Mode in the Mode main menu

When converting a picture into hex data for a graphic LCD of 160 x 100 pixels , you will get 8320 Bytes, in vertical slices of 8 pixels in height.  ( Normal 4bpp Mode outputs slices of 2 pixels in height = 8000 bytes of data )

Other special Modes for the following Sitronix LCD controllers are planed in future upgrades :

4-Gray Graphic : ST7541 , St7571

32-gray Graphic : ST7529 , ST7586

Work Canvas Export to Data Settings

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

Work Canvas Export to Data Settings

Update >V3.9a

From Version V3.9a the Configuration Settings have been moved to a single panel accessible from the main menu. (red Arrow)

The Monochrome / Grayscale / Color Setting can be found in the same Window

 

Versions V3.8a – V3.8z

From V3.8a, the parameters (blue arrow) located inside the right panel of the Work Canvas ( hide/ show > red arrow ) are editable.

The Export To Data Settings are the same as those located on the Configuration Settings Windows. (purple arrow)

Note : Some of these settings are also valid for the Fonts Generator !

You can change the export settings from there (blue) . Their value will be copied to the Configuration Settings Windows (purple)

If changes are made in the Configuration Settings Windows, the values might be refreshed (Refresh Values from Settings > green) on the Work Canvas Panel

bitmap2lcd-wk-settings

Data Export Settings Examples

  • Hex Data Bytes without Prefix (a) nor Suffix, (b)  Without spaces nor separator between them

bitmap2lcd-wk-settings_2

  • Intel Hex Data Output Format (File.hex)

bitmap2lcd-wk-settings_3

  • Binary File Format (File.bin)

bitmap2lcd-wk-settings_4

  • Format  = 0X Hex data / separator = , / End of Line = ;  / 4 bytes per line

bitmap2lcd-wk-settings_5

  • Format  = Prefix (a) + Hex data + Suffix (b) / separator = , / End of Line = ;  / 6 bytes per line / Data lines Prefix = DATA

bitmap2lcd-wk-settings_6

 

Search And Replace

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

Search And Replace Text searchandrepl

Bitmap2lcd includes a Search and Replace functionality.

In the Graphic Preview and Editors Window , click on S+R (orange arrow) and a programming grid appears next to the Auxiliary Editor.

  • In the S+R grid, you can define the character string to search (blue) inside the text editor, and define the character string that will replace it (red)
  • The columns Function and Condition2 are not yet implemented (V3.7f)

bitmap2lcd-search-and-replace_1

  • You can immediately apply the search and replace scan to the content of the Main Editor (purple arrow) or to the content of the Aux Editor

bitmap2lcd-search-and-replace_2

  • The Search And Replace Program can automatically be run after all exports by checking the Run Search And Replace Grid checkbox of the data export dialog (green).

bitmap2lcd-search-and-replace_3

Getting Started > Basic Settings

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

update V3.7f

 

Presentation of Bitmap2LCD (Youtube)

Getting Started > Basic Settings

  •  In the Output+Settings Main menu, choose one of the the monochrome, grayscale or color depth formats (green frame and arrow)
  • Choose one of the the byte / word output widths : 8, 16 or 32 bit or Intel Hex file output in case of data generated inside the text editor (and text file) or the Binary File Output (output generated in the Hex editor)  (blue arrow)
  • Also Select the endianness, if the most significant bit is left or right in the data output. (red arrow)

bitmap2lcd-basic-settings_1

  • Define the Work Canvas  Size corresponding to the Dot Matrix Size of your Graphic LCD  work-canvas2
  • If the required size is not listed in the Menu ( Width x Height ) use the Define Custom Size item. (purple arrow)

Note : In case of a monochrome GLCD for example, the height or the width might be a multiple of 8 ! It depends of the GLCD : Read the Data Sheet of  the GLCD controller and check the structure and data direction of the pixels in the DDRAM

bitmap2lcd-basic-settings_2

  • Open the Configuration Settings Panel (orange arrow)
  • Define the Data Syntax Parameters and Data output File Extension (red arrow)
  • Define the data direction of the pixels in the Ram of your LCD controller  (blue arrow)

bitmap2lcd-basic-settings_3

  • Change the Output File Header syntax  (green arrow)

bitmap2lcd-basic-settings_4

  • The Output File Header (Blue arrow) is a text file that is optionally copied to the top of the Text Editor when a data array is generated.
  • Edit the Header, then save and Quit the Header Editor (purple arrow)

Note : the words with the [&xxxxx]  syntax are optional script components that are replaced by values by the software. See details at the end of this article

bitmap2lcd-basic-settings_5

  • Export to Data Array to check your settings Start

bitmap2lcd-basic-settings_6

  • Check Data Array Syntax and Format in the Text Editor

bitmap2lcd-basic-settings_7

  • Set a few pixels (orange) with drawing tool (blue) inside the Work Canvas to check the pixels in the Data output

bitmap2lcd-basic-settings_8

  • Data of the 8 black pixels (orange) generated according to the selected data direction (red) This example is in monochrome mode (8 pixels per byte)

bitmap2lcd-basic-settings_9

Script Components

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

[&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 more script components, for the font generation and the data compression. See the above default header script.

 

//** Please edit this header to fit
//** with your compiler
//** use above buttons and then close/save
//** this code (auto-saved)
//** with the above save header editor button !

//** Edit the blue code and use variable where needed !
//** [&??] are the variables, they are case sensitive !

//** Settings for Images and Fonts Data !

#include <avr/pgmspace.h>

const uint8_t [&NAME][] PROGMEM = {
[&TRUEORG]

[&XPOS],
[&YPOS],
[&WIDTH],
[&HEIGHT],
//** These are the X and Y position
//** and the Width and Height of an
//** exported graphic

//** for image conversion with data compression
[&COMPRESSION]
const uint8_t [&CNAME][&CSIZE] PROGMEM = {

[&FONT INCLUDE]
/* // Structured Font Output Include
typedef struct {
long int code;
const tImage *image;
} tChar;
typedef struct {
int length;
const tChar *chars;
} tFont;
*/
[&/FONT INCLUDE]

[&FONT BITMAPS]
const uint8_t [&FNAME][&FNUMBEROFCHARS][&FBYTESPERCHAR] PROGMEM = {

[&FONT DESCRIPTORS]
const uint8_t [&DNAME][][2] PROGMEM = {

[&FONT END]

 

Bitmap2LCD : Touch Panel / Touch Screen Features Update

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

update V3.7f

Bitmap2LCD : Touch Panel / Touch Screen Features Update

bitmap2lcd-touch-menu

Touch panel settings  settings_touch

bitmap2lcd Touch Panel Settings

  • The current Work Canvas image can be defined as Background  (Green Arrow)

bitmap2lcd-touch-menu_3

bitmap2lcd-touch-background-image

  • Enter Touch Panel / Touch panel Screen Mode

bitmap2lcd-touch-menu_2

bitmap2lcd-touch-make-region

To trace Touch panel regions inside the work canvas, after entering in the touch panel script or by opening the TSC file  ( Work canvas outline becomes light blue ) use the mouse inside the work canvas in a similar way to the area selection tool.

Trace the region and when ok, click on the convert to region button (green Arrow)

Theses regions can be moved or resized afterwards.

bitmap2lcd-touch-menu_4

  • Export the GLCD Touch Regions according to the defined settings

bitmap2lcd-touch-regions-data

  • Quit Touch Panel Mode  exiz

Bitmap2LCD … why not LCD2Bitmap ?

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

Bitmap2LCD … why not LCD2Bitmap ?

Reverse engineering : Convert an existing Data Array (or Hex File) to a Bitmap

Update V3.7e , monochrome only

Want to convert 8 bit GLCD data array from an old project to a 16 bit GLCD data array in a new project ?

Want to recover the image from of an old GLCD data array source ?

 

bitmap2lcd-glcd-array-to-bitmap

  • Load a source into Text editor ( Red arrow )  or click on source file inside Text editor
  • Data array inside Text Editor ( Green arrow )
  • Import Data to Graphic  ( Blue Arrow )

For monochrome GLCD data arrays of 8, 16 and 32 bit – bytes/words – , it is possible with bitmap2LCD !

Set your work Canvas Height and Width to a compatible size with the number of data in the array loaded in the text editor, set the byte word  Width to 8 16 or 32bits (in the output main menu) , select the data direction (horizontal or vertical) and click one of the import Data Array buttons. If it matches with the data count, the Work Canvas will show the graphic.

For example in a file an array of 2560 bytes ( 0x00 – 0xFF )

( Width * Height ) Pixels per byte =  (160 * 128) / 8 = 2560 bytes

Import the array into the work canvas and save the work canvas as bitmap.

bitmap2lcd-import-data-to-graphic

Settings :

Define the Hex byte prefix to be found inside the source file

bitmap2lcd-glcd-array-to-bitmap-settings