Tag Archive | "bitmap"

Tutorial – Arduino and ILI9325 colour TFT LCD modules

Learn how to use inexpensive ILI9325 colour TFT LCD modules in chapter fifty of a series originally titled “Getting Started/Moving Forward with Arduino!” by John Boxall – A tutorial on the Arduino universe. The first chapter is here, the complete series is detailed here.

Introduction

Colour TFT LCD modules just keep getting cheaper, so in this tutorial we’ll show you how to get going with some of the most inexpensive modules we could find. The subject of our tutorial is a 2.8″ 240 x 320 TFT module with the ILI9325 LCD controller chip. If you look in ebay this example should appear pretty easily, here’s a photo of the front and back to help identify it:

There is also the line “HY-TFT240_262k HEYAODZ110510” printed on the back of the module. They should cost less than US$10 plus shipping. Build quality may not be job number one at the factory so order a few, however considering the cost of something similar from other retailers it’s cheap insurance. You’ll also want sixteen male to female jumper wires to connect the module to your Arduino.

Getting started

To make life easier we’ll use an Arduino library “UTFT” written for this and other LCD modules. It has been created by Henning Karlsen and can be downloaded from his website. If you can, send him a donation – this library is well worth it. Once you’ve downloaded and installed the UTFT library, the next step is to wire up the LCD for a test.

Run a jumper from the following LCD module pins to your Arduino Uno (or compatible):

  • DB0 to DB7 > Arduino D0 to D7 respectively
  • RD > 3.3 V
  • RSET > A2
  • CS > A3
  • RW > A4
  • RS > A5
  • backlight 5V > 5V
  • backlight GND > GND

Then upload the following sketch – Example 50.1. You should be presented with the following on your display:

If you’re curious, the LCD module and my Eleven board draws 225 mA of current. If that didn’t work for you, double-check the wiring against the list provided earlier. Now we’ll move forward and learn how to display text and graphics.

Sketch preparation

You will always need the following before void setup():

and in void setup():

with the former command, change orientation to either LANDSCAPE to PORTRAIT depending on how you’ll view the screen. You may need further commands however these are specific to features that will be described below. The function .clrScr() will clear the screen.

Displaying Text

There are three different fonts available with the library. To use them add the following three lines before void setup():

When displaying text you’ll need to define the foreground and background colours with the following:

Where red, green and blue are values between zero and 255. So if you want white use 255,255,255 etc. For some named colours and their RGB values, click here. To select the required font, use one of the following:

Now to display the text use the function:

where text is what you’d like to display, x is the horizontal alignment (LEFT, CENTER, RIGHT) or position in pixels from the left-hand side of the screen and y is the starting point of the top-left of the text. For example, to start at the top-left of the display y would be zero. You can also display a string variable instead of text in inverted commas.

You can see all this in action with the following sketch – Example 50.2, which is demonstrated in the following video:

Furthremore, you can also specify the angle of display, which gives a simple way of displaying text on different slopes. Simply add the angle as an extra parameter at the end:

Again, see the following sketch – Example 50.2a, and the results below:

Displaying Numbers

Although you can display numbers with the text functions explained previously, there are two functions specifically for displaying integers and floats.

You can see these functions in action with the following sketch – Example 50.3, with an example of the results below:

example50p3

Displaying Graphics

There’s a few graphic functions that can be used to create required images. The first is:.

which is used the fill the screen with a certain colour. The next simply draws a pixel at a specified x,y location:

Remember that the top-left of the screen is 0,0. Moving on, to draw a single line, use:

where the line starts at x1,y1 and finishes at x2,y2. Need a rectangle? Use:

where the top-left of the rectangle is x1,y1 and the bottom-right is x2, y2. You can also have rectangles with rounded corners, just use:

instead. And finally, circles – which are quite easy. Just use:

where x,y are the coordinates for the centre of the circle, and r is the radius. For a quick demonstration of all the graphic functions mentioned so far, see Example 50.4 – and the following video:

Displaying bitmap images

If you already have an image in .gif, .jpg or .png format that’s less than 300 KB in size, this can be displayed on the LCD. To do so, the file needs to be converted to an array which is inserted into your sketch. Let’s work with a simple example to explain the process. Below is our example image:

jrt3030

Save the image of the puppy somewhere convenient, then visit this page. Select the downloaded file, and select the .c and Arduino radio buttons, then click “make file”. After a moment or two a new file will start downloading. When it arrives, open it with a text editor – you’ll see it contains a huge array and another #include statement – for example:

cfile

Past the #include statement and the array into your sketch above void setup(). After doing that, don’t be tempted to “autoformat” the sketch in the Arduino IDE. Now you can use the following function to display the bitmap on the LCD:

Where x and y are the top-left coordinates of the image, width and height are the … width and height of the image, and name is the name of the array. Scale is optional – you can double the size of the image with this parameter. For example a value of two will double the size, three triples it – etc. The function uses simple interpolation to enlarge the image, and can be a clever way of displaying larger images without using extra memory. Finally, you can also display the bitmap on an angle – using:

where angle is the angle of rotation and cx/cy are the coordinates for the rotational centre of the image.

The bitmap functions using the example image have been used in the following sketch – Example 50.5, with the results in the following video:

Unfortunately the camera doesn’t really do the screen justice, it looks much better with the naked eye.

What about the SD card socket and touch screen?

The SD socket didn’t work, and I won’t be working with the touch screen at this time.

Conclusion

So there you have it – an incredibly inexpensive and possibly useful LCD module. Thank you to Henning Karlsen for his useful library, and if you found it useful – send him a donation via his page.

LEDborder

In the meanwhile have fun and keep checking into tronixstuff.com. Why not follow things on twitterGoogle+, subscribe  for email updates or RSS using the links on the right-hand column? And join our friendly Google Group – dedicated to the projects and related items on this website. Sign up – it’s free, helpful to each other –  and we can all learn something.

Posted in arduino, bitmap, display, ILI9325, LCD, lesson, mega, TFT, tronixstuff, tutorialComments (45)

Tutorial: Arduino and a Thermal Printer

Use inexpensive thermal printers with Arduino in chapter thirty-eight of a series originally titled “Getting Started/Moving Forward with Arduino!” by John Boxall – a series of articles on the Arduino universe. The first chapter is here, the complete series is detailed here.

Updated 05/02/2013

In this article we introduce the inexpensive thermal printer that has recently become widely available from Sparkfun and their resellers. The goal of the article is to be as simple as possible so you can get started without any problems or confusion. In the past getting data from our Arduino to a paper form would either have meant logging it to an SD card then using a PC to finish the job, or perhaps viewing said data on an LCD then writing it down. Not any more – with the use of this cheap and simple serial printer. Before we get started, here is a short demonstration video of it in action:


Not bad at all considering the price. Let’s have a look in more detail. Here is the printer and two matching rolls of thermal paper:

… and the inside of the unit:

Loading paper is quite simple, just drop the roll in with the end of the paper facing away from you, pull it out further than the top of the front lip, then close the lid. The paper rolls required need to be 57mm wide and have a diameter of no more than 39mm. For example. There is a piece of white cardboard stuck to the front – this is an economical cover that hides some of the internals. Nothing of interest for us in there. The button next to the LED on the left is for paper advance, and the LED can blink out the printer status.

From a hardware perspective wiring is also very simple. Looking at the base of the printer:

… there are two connections. On the left is DC power, and data on the right. Thankfully the leads are included with the printer and have the plugs already fitted – a great time saver. You may also want to fit your own rubber feet to stop the printer rocking about.

Please note – you need an external power supply with a voltage of between 5 and 9 volts DC that can deliver up to 1.5 amps of current. When idling the printer draws less than 10 milliamps, but when printing it peaks at around 1.47 A. So don’t try and run it from your Arduino board. However the data lines are easy, as the printer has a serial interface we only need to connect printer RX to Arduino digital 3, and printer TX to Arduino digital 2, and GND to … GND! We will use a virtual serial port on pins 2 and 3 as 0 and 1 will be taken for use with the serial monitor window for debugging and possible control purposes.

If you want to quickly test your printer – connect it to the power, drop in some paper, hold down the feed button and turn on the power. It will quickly produce a test print.

Next we need to understand how to control the printer in our sketches. Consider this very simple sketch:

After ensuring your printer is connected as described earlier, and has the appropriate power supply and paper – uploading the sketch will result in the following:

Now that the initial burst of printing excitement has passed, let’s look at the sketch and see how it all works. The first part:

configures the virtual serial port and creates an instance for us to refer to when writing to the printer. Next, four variables are defined. These hold parameters used for configuring the printer. As the printer works with these settings there is no need to alter them, however if you are feeling experimental nothing is stopping you. Next we have the function initPrinter(). This sets a lot of parameters for the printer to ready itself for work. We call initPrinter() only once – in void setup(); For now we can be satisfied that it ‘just works’.

Now time for action – void loop(). Writing text to the printer is as simple as:

You can also use .println to advance along to the next line. Generally this is the same as writing to the serial monitor with Serial.println() etc. So nothing new there. Each line of text can be up to thirty-two characters in length.

The next thing to concern ourselves with is sending commands to the printer. You may have noticed the line

This sends the command to advance to the next line (in the old days we would say ‘carriage return and line feed’). There are many commands available to do various things.  At this point you will need to refer to the somewhat amusing user manual.pdf. Open it up and have a look at section 5.2.1 on page ten. Notice how each command has an ASCII, decimal and hexadecimal equivalent? We will use the decimal command values. So to send them, just use:

Easy. If the command has two or more values (for example, to turn the printer offline [page 11] ) – just send each value in a separate statement. For example:

… will put the printer into offline mode. Notice how we used the variable “zero” for 0 – you can’t send a zero by itself. So we assign it to the variable and send that instead. Odd.

For out next example, let’s try out a few more commands:

  • Underlined text (the printer seemed to have issues with thick underlining, however your experience may vary)
  • Bold text
  • Double height and width
Here is the sketch:

And the results:

Frankly bold doesn’t look that bold, so I wouldn’t worry about it too much. However the oversized characters could be very useful, and still print relatively quickly.

Next on our list are barcodes. A normal UPC barcode has 12 digits, and our little printer can generate a variety of barcode types – see page twenty-two of the user manual. For our example we will generate UPC-A type codes and an alphanumeric version. Alphanumeric barcodes need capital letters, the dollar sign, percent sign, or full stop. The data is kept in an array of characters named … barCode[]  and barCode[]2. Consider the functions printBarcode(), printBarcodeThick()  and printBarcodeAlpha() in the following example sketch:

Notice in printBarcodeThick() we make use of the ability to change the vertical size of the barcode – the height in pixels is the third parameter in the group. And here is the result:

So there you have it – another practical piece of hardware previously considered to be out of our reach – is now under our control. Now you should have an understanding of the basics and can approach the other functions in the user guide with confidence. Please keep in mind that the price of this printer really should play a large part in determining suitability for a particular task. It does have issues printing large blocks of pixels, such as the double-width underlining and inverse text. This printer is great but certainly not for commercial nor high-volume use. That is what professional POS printers from Brother, Star, Epson, etc., are for. However for low-volume, personal or hobby use this printer is certainly a deal. As always, now it is up to you and your imagination to put this to use or get up to other shenanigans.

This article would not have been possible without the example sketches provided by Nathan Seidle, the founder and CEO of Sparkfun. If you meet him, shout him a beer.  Please don’t knock off bus tickets or so on. I’m sure there are heavy penalties for doing so if caught.

LEDborder

Have fun and keep checking into tronixstuff.com. Why not follow things on twitterGoogle+, subscribe  for email updates or RSS using the links on the right-hand column, or join our Google Group – dedicated to the projects and related items on this website. Sign up – it’s free, helpful to each other –  and we can all learn something.

Posted in arduino, COM-10438, COM-10560, education, lesson, microcontrollers, printer, sparkfun, thermal, tutorialComments (11)

The DFRobot LCD4884 LCD Shield

Learn how to use the DFRobot LCD4884 Arduino LCD shield.

Updated 19/03/2013

This needs to be updated for use with Arduino IDE v1.0.1 and greater… however we no longer have a shield to test it. Stay tuned via twitter to find out when this is updated.

This article is my response to a request on how to use the LCD4884 LCD shield from DFRobot in China. It is a simple way of displaying text and the odd graphic, as well as another way to accept user input. Here is the shield in question:

image

From a hardware perspective the LCD has a resolution of 84 by 48 pixels, with a blue back light. It can easily display six rows of fourteen alphanumeric characters, or two rows of six very large characters. Furthermore, it can display bitmap images that are appropriately sized. At the top-left of the shield digital pins eight to thirteen have been expanded with matching Vcc and GND pins, and at the bottom right the same has been done with analogue pins one through to five. Therefore if using this shield, you will lose digital pins two through to seven and analogue zero.

Along the bottom-left of the shield are solder pads for some other I/O options, however I couldn’t find any documentation on how these are used. Below the LCD is a small four-way joystick that also has an integral button. This is connected to analog pin zero via a resistor network. This joystick can be used for user input and also to create some nifty menu systems. To the right is a power-on LED which is really too bright, I would recommend sanding it a little to reduce the intensity, or just melting it off with a soldering iron.

The shield requires an Arduino library which can be downloaded from the shield’s wiki page. There is also a good demonstration sketch on the wiki, however some of our readers may find this to be somewhat complex. Therefore where possible I will break down and explain the functions in order to simplify use of the shield, then use them in a demonstration sketch.

Controlling the backlight is very easy, just use:

digitalWrite(7, HIGH/LOW)

to turn it on and off. Don’t forget to put

pinMode(7, OUTPUT) in void setup();.

Reading the joystick position is accomplished via analogRead(0);. It returns the following values as such:

  • Up – 505
  • Down – 0
  • Left – 740
  • Right – 330
  • pressed in – 144
  • Idle (no action) – 1023

By using analogRead(0) and if… statements you can read the joystick in a simple way. Don’t forget to allow for some tolerance in the readings. Attempts to press the button while forcing a direction did not return any different values. In the example sketch later on, you can see how this is implemented. Always remember to insert:

in void setup() to create an instance of the LCD, and

at the start of your sketch to enable the library.

Now to display text on the LCD. Here is an example of the standard font text:

charactersss

Using the standard font, we can position text using the following function:

The parameter x is for the x-coordinate of the first character – measured in pixels, not characters. However y is the coordinate in character lines (!). The screen can display six lines of fourteen characters. To display the larger font, for example:

largechar

use the following:

Unfortunately the library only supports the digits 0~9, +, – and decimal point. You can modify the file font_big.h in the library folder and create your own characters. Once again the x parameter is the number of pixels across to place the first character, and y is 0 for the top line and 3 for the bottom line. Notice that the characters in this font are proportional, however the maximum number of digits to plan for in one line would be six.

To clear the display, use:

By now you will be able to display text, control the backlight and read the joystick. The following demonstration sketch puts it all together so far:

Next is to create and display bitmap images. Images can be up to 84 x 48 pixels in size. There are no shades of grey in the images, just pixels on or off. To display a bitmap is a convoluted process but can be mastered. We need to convert a bitmap image into hexadecimal numbers which are then stored in a text file for inclusion into the sketch. To do so, follow these steps:

Create your monochrome image using an editor such as Gimp. Make sure your file name ends with .bmp. Such as:

gimpexample

Next, download the BMP2ASM program from this website. [Sorry, could only find a Windows version]. Open your .bmp file as created above, and you will see a whole bunch of hexadecimal numbers at the bottom of the window:

convexam

Turn on the check boxes labelled “Stretch”, “Use Prefix” and “Use suffix”. Then click “Convert”. Have a look in your folder and you will find a text file with an extension .asm. Open this file in a text editor such as Notepad. Remove all the instances of “dt”, as well as the top line with the file path and name. Finally, put commas at the end of each line.

You should now be left with a file of hexadecimal numbers. Encase these numbers in the form of an array as such:

encase

What we have done is places the hexadecimal numbers inside the

declaration. To make life simpler, ensure the filename (ending with .h) is the same as the variable name, as in this example it is called hellobmp(.h). And make sure you have saved this file in the same folder as the sketch that will use it. Finally, we include the hellobmp.h file in our example sketch to display the image:

Notice in the function lcd.LCD_draw_bmp_pixel the filename hellobmp is the same as in the #include declaration is the same as the hellobmp.h file we created. They all need to match. Furthermore, the four numerical parameters are the bitmap’s top-left x-y and bottom-right x-y coordinates on the LCD. So after all that, here is the result:

hellodone

So there you have it. If you have any questions about this LCD shield contact DF Studio, or ask a question in our Google Group.

In the meanwhile have fun and keep checking into tronixstuff.com. Why not follow things on twitterGoogle+, subscribe  for email updates or RSS using the links on the right-hand column? And join our friendly Google Group – dedicated to the projects and related items on this website. Sign up – it’s free, helpful to each other –  and we can all learn something.

Posted in arduino, DFR0092, dfrobot, education, LCD, LCD4884, lesson, review, tutorialComments (19)


Subscribe via email

Receive notifications of new posts by email.

The Arduino Book

Arduino Workshop

Für unsere deutschen Freunde

Dla naszych polskich przyjaciół ...

Australian Electronics!

Buy and support Silicon Chip - Australia's only Electronics Magazine.

Use of our content…

%d bloggers like this: