Book – “Arduino Workshop – A Hands-On Introduction with 65 Projects”

Over the last few years I’ve been writing a few Arduino tutorials, and during this time many people have mentioned that I should write a book. And now thanks to the team from No Starch Press this recommendation has morphed into my new book – “Arduino Workshop“:

Although there are seemingly endless Arduino tutorials and articles on the Internet, Arduino Workshop offers a nicely edited and curated path for the beginner to learn from and have fun. It’s a hands-on introduction to Arduino with 65 projects – from simple LED use right through to RFID, Internet connection, working with cellular communications, and much more.

Each project is explained in detail, explaining how the hardware an Arduino code works together. The reader doesn’t need any expensive tools or workspaces, and all the parts used are available from almost any electronics retailer. Furthermore all of the projects can be finished without soldering, so it’s safe for readers of all ages.

The editing team and myself have worked hard to make the book perfect for those without any electronics or Arduino experience at all, and it makes a great gift for someone to get them started. After working through the 65 projects the reader will have gained enough knowledge and confidence to create many things – and to continue researching on their own. Or if you’ve been enjoying the results of my thousands of hours of work here at tronixstuff, you can show your appreciation by ordering a copy for yourself or as a gift

You can review the table of contents, index and download a sample chapter from the Arduino Workshop website.

Arduino Workshop is available from No Starch Press in printed or ebook (PDF, Mobi, and ePub) formats. Ebooks are also included with the printed orders so you can get started immediately.

In the meanwhile have fun and keep checking into tronixstuff.com. Why not follow things on twitter, Google+, 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.

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():

#include "UTFT.h"

UTFT myGLCD(ILI9325C,19,18,17,16); // for Arduino Uno

and in void setup():

myGLCD.InitLCD(orientation); 
myGLCD.clrScr();

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():

extern uint8_t SmallFont[];
extern uint8_t BigFont[];
extern uint8_t SevenSegNumFont[];

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

myGLCD.setColor(red, green, blue); 
myGLCD.setBackColor(red, green, blue);

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:

  myGLCD.setFont(SmallFont); // Allows 20 rows of 40 characters

  myGLCD.setFont(BigFont); // Allows 15 rows of 20 characters

  myGLCD.setFont(SevenSegNumFont); // allows display of 0 to 9 over four rows

Now to display the text use the function:

 myGLCD.print("text to display",x, y);

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:

  myGLCD.print(“Hello, world”, 20, 20, angle);

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:

Displaying Graphics

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

myGLCD.fillScr(red, green, blue);

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

myGLCD.drawPixel(x,y);

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

myGLCD.drawLine(x1,0,x2,239);

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

myGLCD.drawRect(x1,y2,x2,y2); // for open rectangles

myGLCD.fillRect(x1,y2,x2,y2); // for filled rectangles

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:

myGLCD.drawRoundRect(x1,y2,x2,y2); // for open rectangles

myGLCD.fillRoundRect(x1,y2,x2,y2); // for filled rectangles

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

myGLCD.drawCircle(x,y,r); // draws open circle
myGLCD.fillCircle(x,y,r); // draws a filled circle

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:

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:

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:

myGLCD.drawBitmap(x,y,width,height, name, scale);

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:

myGLCD.drawBitmap(x,y,width,height, name, angle, cx, cy);

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.

Running out of space or I/O? Use an Arduino Mega

By now you may have noticed that the library for the LCDs uses up a fair amount of memory, which could be a problem. And using bitmaps eats up memory as well.  And the I/O requirements are quite heavy. The solution is to use an Arduino Mega or compatible board – as they have up to eight times the sketch memory available. However the wiring is a little different – so when using a Mega, run a jumper from the following LCD module pins to your Mega (or compatible):

• DB0 to DB7 > Mega D22 to D29 respectively
• RD > 3.3 V
• RSET > D41
• CS > D40
• RW > D39
• RS > D38
• backlight 5V > 5V
• backlight GND > GND

You will also need to change the line

UTFT myGLCD(ILI9325C,19,18,17,16);  // for Uno

to

UTFT myGLCD(ILI9325C,38,39,40,41);  // for Mega

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.

In the meanwhile have fun and keep checking into tronixstuff.com. Why not follow things on twitter, Google+, 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.

Arduino and KTM-S1201 LCD modules

Learn how to use very inexpensive KTM-S1201 LCD modules in this edition of our Arduino tutorials. This is chapter forty-nine 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

After looking for some displays to use with another (!) clock, I came across some 12-digit numeric LCD displays. They aren’t anything flash, and don’t have a back light –  however they were one dollar each. How could you say no to that? So I ordered a dozen to try out. The purpose of this tutorial is to show you how they are used with an Arduino in the simplest manner possible.

Moving forward – the modules look like OEM modules for desktop office phones from the 1990s:

With a quick search on the Internet you will find a few sellers offering them for a dollar each. The modules (data sheet) use the NEC PD7225 controller IC (data sheet):

They aren’t difficult to use, so I’ll run through set up and operation with a few examples.

Hardware setup

First you’ll need to solder some sort of connection to the module – such as 2×5 header pins. This makes it easy to wire it up to a breadboard or a ribbon cable:

The rest of the circuitry is straight-forward. There are ten pins in two rows of five, and with the display horizontal and the pins on the right, they are numbered as such:

Now make the following connections:

• LCD pin 1 to 5V
• LCD pin 2 to GND
• LCD pin 3 to Arduino D4
• LCD pin 4 to Arduino D5
• LCD pin 5 to Arduino D6
• LCD pin 6 to Arduino D7
• LCD pin 7 – not connected
• LCD pin 8 – Arduino D8
• LCD pin 9 to the centre pin of a 10k trimpot – whose other legs connect to 5V and GND. This is used to adjust the contrast of the LCD.

The Arduino digital pins that are used can be changed – they are defined in the header file (see further on). If you were curious as to how low-current these modules are:

That’s 0.689 mA- not bad at all. Great for battery-powered operations. Now that you’ve got the module wired up, let’s get going with some demonstration sketches.

Software setup

The sketches used in this tutorial are based on work by Jeff Albertson and Robert Mech, so kudos to them – however we’ve simplified them a little to make use easier. We’ll just cover the functions required to display data on the LCD. However feel free to review the sketches and files along with the controller chip datasheet as you’ll get an idea of how the controller is driven by the Arduino.

When using the LCD module you’ll need a header file in the same folder as your sketch. You can download the header file from here. Then every time you open a sketch that uses the header file, it should appear in a tab next to the main sketch, for example (click to enlarge):

There’s also a group of functions and lines required in your sketch. We’ll run through those now – so download the first example sketch, add the header file and upload it. Your results should be the same as the video below:

So how did that work? Take a look at the sketch you uploaded.  You need all the functions between the two lines of “////////////////////////” and also the five lines in void setup(). Then you can display a string of text or numbers using

ktmWriteString();

which was used in void loop(). You can use the digits 0~9, the alphabet (well, what you can do with 7-segments), the degrees symbol (use an asterix – “*”) and a dash (use  - “-”). So if your sketch can put together the data to display in a string, then that’s taken care of.

If you want to clear the screen, use:

 ktmCommand(_ClearDsp);

Next – to individually place digits on the screen, use the function:

 ktmPrnNumb(n,p,d,l);

Where n is the number to be displayed (zero or a positive integer), p is the position on the LCD for the number’s  (the positions from left to right are 11 to 0…), d is the number of digits to the right of the decimal point (leave as zero if you don’t want a decimal point), and l is the number of digits being displayed for n. When you display digits using this function you can use more than one function to compose the number to be displayed – as this function doesn’t clear the screen.

To help get your head around it, the following example sketch (download) has a variety of examples in void loop(). You can watch this example in the following video:

Conclusion

So there you have it – an incredibly inexpensive and possibly useful LCD module. Thank you to Jeff Albertson and Robert Mech for their help and original code.

In the meanwhile have fun and keep checking into tronixstuff.com. Why not follow things on twitter, Google+, 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.

Exploring the TI MSP430 platform with Energia Arduino-compatible IDE

Introduction

Over the last year or so Texas Instruments have been literally pushing their MSP430 development platform hard by offering an inexpensive development kit – their LaunchPad. For around ten dollars (not everyone could get it for $4.30) it includes a development board with flash emulation tool and USB interface, two of their microcontrollers, crystal, USB cable and some headers. It was (is?) a bargain and tens of thousands of LaunchPads were sold. Happy days.

However after the courier arrived and the parcel was opened, getting started with the LaunchPad was an issue for some people. Not everyone has been exposed to complex IDEs or university-level subjects on this topic. And to get started you needed to use a version of Code Composer Studio or IAR Embedded Workbench IDEs, which scared a few people off. So those LaunchPads went in the cupboard and gathered dust.

Well now it’s time to pull them out, as there’s a new way to program the MSP430 using a fork of the Arduino IDE – Energia. Put simply, it’s the Arduino IDE modified to compile and upload code to the LaunchPad, which makes this platform suddenly much more approachable.

Getting Started

You’ll need to download and install the appropriate USB drivers, then the IDE itself from here. To install the IDE you just download and extract it to your preferred location, in the same manner as the Arduino IDE. Then plug your LaunchPad into the USB. Finally,  load the IDE. Everything is familiar to the Arduino user, except the only surprise is the colour (red as a nod to TI perhaps…):

Looking good so far. All the menu options are familiar, the files have the .ino extension, and the preferences dialogue box is how we expect it. Don’t forget to select the correct port using the Tools > Serial port… menu. You will also need to select the type of MSP430 in your LaunchPad. At the time of writing there is support for three types listed below (and the first two are included with the LaunchPad v1.5):

• MSP430G2553 - <=16 MHz, 16KB flash, 512b SRAM, 24 GPIO, two 16-bit timers, UART, SPI, I2C, 8 ADC channels at 10-bit, etc. Cost around Au$3.80 each**
• MSP430G2452 - <=16 MHz, 8KB flash, 256b SRAM, 16 GPIO, one 16-bit timer, UART, I2C, 8 ADC channels, etc. Cost around Au$2.48 each**
• MSP430G2231 - <=16 MHz, 2KB flash, 128b SRAM, 10 GPIO, one 16-bit timer, SPI, I2C, 8 ADC channels, etc. Cost around Au$3.36 each**

** One-off ex-GST pricing from element14 Australia. In some markets it would be cheaper to buy another LaunchPad. TI must really be keen to get these in use.

There are some hardware<>sketch differences you need to be aware of. For example, how to refer to the I/O pins in Energia? A map has been provided for each MSP430 at the Energia wiki, for example the G2553:

As you can imagine, MSP430s are different to an AVR, so a lot of hardware-specific code doesn’t port over from the world of Arduino. One of the first things to remember is that MSP430s are 3.3V devices. Code may or may not be interchangeable, so a little research will be needed to match up the I/O pins and rewrite the sketch accordingly. You can refer to pins using the hardware designator on the LaunchPad (e.g. P1_6) or the physical pin number. For example – consider the following sketch:

void setup() { 
 // initialize the digital pins as an output.
 pinMode(P1_0, OUTPUT); // LED 1
 pinMode(P1_6, OUTPUT); // LED 2
}

void loop() {
 digitalWrite(P1_6, HIGH); 
 digitalWrite(P1_0, HIGH); 
 delay(100); 
 digitalWrite(P1_6, LOW); 
 digitalWrite(P1_0, LOW); 
 delay(100); 
}

You could have used 2 (for physical pin 2) instead of P1_0 and 14 (physical pin … 14!) instead of P1_6. It’s up to you. Another quick example is this one – when the button is pressed, the LEDs blink a few times:

const int redLED = P1_0;
const int greenLED = P1_6;
const int button = P1_3; // button S2 (on the left)

int a = 0;
void setup()
{
 pinMode(redLED, OUTPUT);
 pinMode(greenLED, OUTPUT); 
 pinMode(button, INPUT_PULLUP); // note _PULLUP
 digitalWrite(redLED, LOW);
 digitalWrite(greenLED, LOW); 
}

void loop()
{
 if (digitalRead(button)==LOW)
 {
 for (a=0; a<10; a++)
 {
 digitalWrite(redLED, HIGH);
 digitalWrite(greenLED, LOW); 
 delay(200);
 digitalWrite(redLED, LOW);
 digitalWrite(greenLED, HIGH); 
 delay(200);
 }
 digitalWrite(redLED, LOW);
 digitalWrite(greenLED, LOW); 
 }
}

Due to the wiring of the LaunchPad, when you press the button, P1_3 is pulled LOW. For the non-believers, here it is in action:

So where to from here? There are many examples in the Energia IDE example menu, including some examples for the Energia libraries. At the time of writing there is: Servo, LiquidCrystal, IRremote, SPI, wire, MSPflash and Stepper. And as the Energia project moves forward more may become available. For help and discussion, head over to the 4-3-Oh forum and of course the Energia website. And of course there’s the TI MSP430 website.

Conclusion

Well that was interesting to say the least. If you have a project which needs to be low-cost, fits within the specifications of the MSP430, has a library, you’re not hung up on brand preference, and you just want to get it done – this is a viable option. Hopefully after time some of you will want to work at a deeper level, and explore the full IDEs and MSP430 hardware available from TI. But for the price, don’t take my word for it – try it yourself. 

In the meanwhile have fun and keep checking into tronixstuff.com. Why not follow things on twitter, Google+, 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.

Kit Review – akafugu TWILCD Display Controller Backpacks

Introduction

Working with LCD displays is always useful, for debugging hardware by showing various data or part of a final design. Furthermore, using them can be rather wasteful of I/O pins, especially when trying to squeeze in other functionality. Plus there’s the external contrast adjustment, general wiring and the time taken to get it working. (Don’t believe me? See here).

However, using the subjects of this kit review – you can convert standard HD44780 LCD modules to use the I2C bus using a small backpack-style board – bringing total I/O down to four wires – 5V/3.3V, GND, SDA and SCL. If you’re using an Arduino – don’t panic if you’re not up on I2C – a software library takes care of the translation leaving you to use the LiquidCrystal functions as normal. Furthermore you can control the brightness and contrast (and colour for RGB modules) – this feature alone is just magic and will make building these features into projects much, much easier.

In this review we examine both of the backpacks available from akafugu. There are two available:

• the TWILCD: Supports 1×16 and 2×7 connectors. It covers 16×1, 20×1, 16×2, 20×2 and 20×4 displays with and without backlight, and the
• TWILCD 40×2/40×4/RGB: Supports 1×18 connector (for Newhaven RGB backlit displays), 2×8 connector (used for some 20×4 displays) and 2×9 connector (used for 40×4 displays)

If unsure about your LCD, see the list and explanation here. The LCDs used in this article were supplied with the mono and colour LCD bundles available from akafugu. So let’s see how easy they really are, and put them through their paces.

Assembly

The backpacks arrive in the usual anti-static bags:

First we’ll examine the TWILCD board:

Very small indeed. There are three distinct areas of interface – including the single horizontal or dual vertical connectors for various LCDs, and I2C bus lines as well as ICSP connectors for the onboard ATTINY4313 microcontroller. The firmware can be updated and is available on the akafugu github repository. If you look at the horizontal row along the top – there are eighteen holes. This allows for displays that have pins ordered 1~16 and also those with 15,16,1~16 order (15 and 16 are for the LCD backlight).

The next step is to solder in the connectors for power and I2C if so desired, and then the LCD to the backpack. Double-check that you have the pin numbering and alignment correct before soldering, for example:

and then you’re finished:

Simple. Now apply power and after a moment the the backpack firmware will display the I2C bus address:

Success! Now let’s repeat this with the TWILCD 40×2/40×4/RGB version. The backpack itself is still quite small:

… and has various pin alignments for different types of LCD module. Note the extra pins allowing use of RGB-backlit modules and 40×4 character modules. Again,  make sure you have the pins lined up against your LCD module before soldering the backpack in:

 Notice how the I2C connector is between the LCD and the backpack – there is enough space for it to sit in there, and also acts as a perfect spacer when soldering the backpack to the display module.  Once finished soldering, apply 5/3.3V and GND to check your display:

Using the TWILCDs

Using the backpacks is very easy. If you aren’t using an Arduino, libraries for AVR-GCC are available. If you are using the Arduino system, it is very simple. Just download and install the library from here. Don’t forget to connect the SDA and SCL connectors to your Arduino. If you’re unsure about LCD and Arduino – see here.

Programming for the TWILCD is dead simple – just use your existing Arduino sketch, but replace

#include <LiquidCrystal.h>

with

#include <Wire.h>
#include <TWILiquidCrystal.h>

and that’s it. Even creating custom characters. No new functions to learn or tricks to take note of – they just work. Total win. The only new functions you will need are to control the brightness and contrast… to set the brightness, use:

lcd.setBrightness(brightness);

You can also set the brightness level to EEPROM as a default using:

lcd.saveBrightness([YOUR_VALUE])

Contrast is equally simple, using:

lcd.setContrast(contrast);

and

lcd.saveContrast([YOUR_VALUE])

You can see these in action using the example sketches with the Arduino library, and in the following video:

Now for the TWILCD 40×2/40×4/RGB version. You have one more function to set the colour of the text:

lcd.setColor(red, green, blue);

where red, green and blue are values between 0 and 254. Easily done. You can see this in action using the test_RGB example sketch included with the library, and shown in the following video:

Conclusion

The TWILCD backpacks are simple, easy to setup and easy to use. They make using LCD displays a lot easier and faster for rapid prototyping, experimenting or making final products easier to use and program. A well-deserved addition to every experimenter’s toolkit. For more information, visit the akafugu product website. Full-size images available on flickr.

Note – the products used in this article were a promotional consideration from akafugu.jp, however the opinions stated are purely my own.

In the meanwhile have fun and keep checking into tronixstuff.com. Why not follow things on twitter, Google+, 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.

Translated version in Serbo-Croatian language.

Kit Review – Snootlab DeuLigne LCD Arduino Shield

Hello everyone

Another month and time for another kit review Once again we have another kit from the team at Snootlab in France – their DeuLigne LCD Arduino shield. Apart from having a two row, sixteen character backlit LCD there is also a five-way joystick (up, down, left, right and enter) which is useful for data entry and so on.

This LCD shield is different to any others I have seen on the market as it uses the I2C bus for interface with the LCD screen – thereby not using any digital pins at all. The interfacing is taken care of by a Microchip MCP23008 8-bit port expander IC, and Snootlab have written a custom LCD library which makes using the LCD very simple. Furthermore the joystick uses the analog input method, using analogue pin zero. But for now, let’s examine construction.

Please note that the kit assembled in this article is a version 1.0, however the shield is now at version 1.1. Construction is very easy, starting with the visual and easy to follow instructions (download). The authors really have made an effort to write simple, easy to follow instructions. The kit arrives as expected, in a reusable anti-static pouch:

As always everything was included, including stacking headers for Arduino. It’s great to see them included, as some other companies that should know better sometimes don’t. (Do you hear me Sparkfun?)

The PCB is solid and fabricated very nicely – the silk screen is very descriptive, and the PCB is 1.7mm thick. The joystick is surface-mounted and already fitted. Here’s the top:

… and the bottom:

Using a Freetronics EtherTen as a reference,  you can see that the DeuLigne PCB is somewhat larger than the standard Arduino shield:

The first components to solder in are the resistors:

… followed by the transistor and MCP23008. Do not use an IC socket, as this will block the LCD from seating properly…

After fitting the capacitor, contrast trimpot, LCD header pins and stacking sockets the next step is to bolt in the LCD with the standoffs:

The plastic bolts can be trimmed easily, and then glued to the nuts to stay tight. Or you can just melt them together with the barrel of your soldering iron Finally you can solder in the LCD data pins and the shield is finished:

The only thing that concerned me was the limited space between LCD pins twelve~sixteen and the stacking header sockets. It may be preferable to solder the stacking sockets last to avoid possibly melting them when soldering the LCD. Otherwise everything was simple and construction took just under twenty minutes.

Now to get the shield working. Download and install the DeuLigne Arduino library, and then you can test your shield with the included examples. The LCD contrast can be adjusted with the trimpot between the joystick and the reset button. Note that this shield is fully Open Hardware compliant, and all the design files and so on are available from the ‘download’ tab of the shield product page.

Initialising the LCD requires the following code before void Setup():

#include "Wire.h"; // include I2C library for MCP23008
#include "Deuligne.h"; // include shield library
Deuligne lcd; // create instance of LCD "lcd"

Then in void Setup():

  Wire.begin(); // initialise I2C
  lcd.init(); // initialise LCD

Now you can make use of the various LCD functions, including:

lcd.backLight(true); // turns backlight on (or false for off)

lcd.print(); // displays text (using "") or data on the LCD

lcd.setCursor(column, row); // positions cursor on column 0~15, row 0~1

lcd.clear(); // clears display

Reading the joystick position is easy, the function

int pos=lcd.get_key();

returns an integer to pos representing the position. Right = 0, left = 3, up = 1, down = 2, enter = 4.

Automatic text scrolling can be turned on and off with:

lcd.Autoscroll();

lcd.noAutoscroll();

Creating custom characters isn’t that difficult. Each character consists of eight rows of five pixels. Create your character inside a byte array, such as:

byte box  [8]={
  B11111,
  B10001,
  B10001,
  B10001,
  B10001,
  B10001,
  B10001,
  B11111
};

There is an excellent tool to create these bytes here. Then allocate the custom character to a position number (0~7) using:

lcd.createChar(0,box);

Then to display the custom character, just use:

lcd.write(0); // for character in position 0

And the resulting character filling the display:

Now for an example sketch to put it all together. Using my modified Freetronics board with a DS1307 real-time clock IC, we have a simple clock that can be set by using the shield’s joystick. For a refresher on the clock please read this tutorial. And for the sketch (download):

/*
  Clock with menu demonstration
  for Snootlab DeuLigne LCD shield
  John Boxall - http://tronixstuff.wordpress.com/kitreviews > Snootlab LCD shield
*/

#include "Wire.h"
#include "Deuligne.h"
#define DS1307_I2C_ADDRESS 0x68
Deuligne lcd;

int a=0;
byte second, minute, hour, dayOfWeek, dayOfMonth, month, year;

// define custom characters for up/down/left/right arrow
byte ua[8] = {  B00100, B01110, B11111, B10101,  B00100, B00100,B00100,B00100};
byte da[8] = {B00100, B00100, B00100, B00100, B10101,B11111,B01110,B00100};
byte la[8] = {B00011, B00110, B01100, B11111, B11111, B01100, B00110, B00011};
byte ra[8] = {B11000, B01100, B00110, B11111, B11111, B00110, B01100, B11000 };  

void setup()
{
  Wire.begin();
  lcd.init();
  lcd.createChar(0,ua);
  lcd.createChar(1,da);
  lcd.createChar(2,la);
  lcd.createChar(3,ra);
}

// Convert normal decimal numbers to binary coded decimal
byte decToBcd(byte val)
{
  return ( (val/10*16) + (val%10) );
}

// Convert binary coded decimal to normal decimal numbers
byte bcdToDec(byte val)
{
  return ( (val/16*10) + (val%16) );
}

// Gets the date and time from the ds1307
void getDateDs1307(byte *second,
byte *minute,
byte *hour,
byte *dayOfWeek,
byte *dayOfMonth,
byte *month,
byte *year)
{
  // Reset the register pointer
  Wire.beginTransmission(DS1307_I2C_ADDRESS);
  Wire.send(0);
  Wire.endTransmission();
  Wire.requestFrom(DS1307_I2C_ADDRESS, 7);

  // A few of these need masks because certain bits are control bits
  *second     = bcdToDec(Wire.receive() & 0x7f);
  *minute     = bcdToDec(Wire.receive());
  *hour       = bcdToDec(Wire.receive() & 0x3f);  // Need to change this if 12 hour am/pm
  *dayOfWeek  = bcdToDec(Wire.receive());
  *dayOfMonth = bcdToDec(Wire.receive());
  *month      = bcdToDec(Wire.receive());
  *year       = bcdToDec(Wire.receive());
}

void setDateDs1307(byte second,        // 0-59
byte minute,        // 0-59
byte hour,          // 1-23
byte dayOfWeek,     // 1-7
byte dayOfMonth,    // 1-28/29/30/31
byte month,         // 1-12
byte year)          // 0-99
{
  Wire.beginTransmission(DS1307_I2C_ADDRESS);
  Wire.send(0);
  Wire.send(decToBcd(second));    // 0 to bit 7 starts the clock
  Wire.send(decToBcd(minute));
  Wire.send(decToBcd(hour));
  Wire.send(decToBcd(dayOfWeek));
  Wire.send(decToBcd(dayOfMonth));
  Wire.send(decToBcd(month));
  Wire.send(decToBcd(year));
  Wire.send(00010000); // sends 0x10 (hex) 00010000 (binary) to control register - turns on square wave
  Wire.endTransmission();
}

void showTime()
{
  getDateDs1307(&second, &minute, &hour, &dayOfWeek, &dayOfMonth, &month, &year);
  lcd.clear(); // clear LCD screen
  lcd.setCursor(0,0);
  lcd.print("    ");
  lcd.print(hour, DEC);
  lcd.print(":");
  if (minute<10)
  {
    lcd.print("0");
  }
  lcd.print(minute, DEC);
  lcd.print(":");
  if (second<10)
  {
    lcd.print("0");
  }
  lcd.print(second, DEC);
}

void setTime()
{
  int escape=0;
  int h=0;
  int m=0;
  do
  {
    escape=lcd.get_key();
    delay(100); // for debounce
    if (escape==0)
    {
      --m;
      if (m<0)
      {
        m=59;
      }
    } else
    if (escape==1)
    {
      h++;
      if (h>23)
      {
        h=0;
      }
    } else
    if (escape==2)
    {
      --h;
      if (h<0)
      {
        h=23;
      }
    } else
    if (escape==3)
    {
      m++;
      if (m>59)
      {
        m=0;
      }
    }
    lcd.clear();
    lcd.setCursor(0,0);
    lcd.write(0);
    lcd.write(1);
    lcd.print(":h ");
    lcd.write(2);
    lcd.write(3);
    lcd.print(":m Ent=OK");
    lcd.setCursor(5,1);
    if (h<10)
    {
      lcd.print("0");
    }
    lcd.print(h);
    lcd.print(":");
    if (m<10)
    {
      lcd.print("0");
    }
    lcd.print(m);
  } while (escape<4);
  setDateDs1307(0, m, h, dayOfWeek, dayOfMonth, month, year);
}

void loop()
{
  lcd.clear();
  showTime();
  a=lcd.get_key();
  if (a==4) // someone pressed 'enter'
  {
    delay(200); // for debounce
    setTime();
  }
  delay(400); // delay to stop LCD flicker
}

As you can see, the last delay statement is for 400 milliseconds. Due to the extra overhead required by using I2C on top of the LCD library, it slows down the refresh rate a little. Moving forward, a demonstration video:

So there you have it. Another useful, fun and interesting Arduino shield kit to build and enjoy. Although it is no secret I like Snootlab products, it is a just sentiment. The quality of the kit is first rate, and the instructions and support exists from the designers. So if you need an LCD shield, consider this one.

For support, visit the Snootlab website and customer forum in French (use Google Translate). However as noted previously the team at Snootlab converse in excellent English and have been easy to contact via email if you have any questions. Snootlab products including the Snootlab DeuLigne are available directly from their website. High-resolution images available on flickr.

So have fun and keep checking into tronixstuff.com. Why not follow things on twitter, Google+, 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.

[Disclaimer - the products reviewed in this article are promotional considerations made available by Snootlab]

Otherwise, have fun, be good to each other – and make something! 

Kit review – nootropic design Hackvision

Hello readers

Time for another kit review – the nootropics design Hackvision,  a nice change from test equipment. The purpose of the Hackvision is to allow the user to create retro-style arcade games and so on that can be played on a monitor or television set with analogue video input. Although the display resolution is only 128 by 96 pixels, this is enough to get some interesting action happening. Frankly I didn’t think the Arduino hardware environment alone was capable of this, so the Hackvision was a pleasant surprise.

Assembly is quick and relatively simple, the instructions are online and easy to follow. All the parts required are included:

The microcontroller is pre-loaded with two games so you can start playing once construction has finished. However you will need a 5V FTDI cable if you wish to upload new games as the board does not have a USB interface. The board is laid out very clearly, and with the excellent silk-screen and your eyes open construction will be painless. Note that you don’t need to install R4 unless necessary, and if your TV system is PAL add the link which is between the RCA sockets. Speaking of which, when soldering them in, bend down the legs to lock them in before soldering, as such:

Doing so will keep them nicely flush with the PCB whilst soldering. Once finished you should have something like this:

All there is to do now is click the button covers into place, plug in your video and audio RCA leads to a monitor, insert nine volts of DC power, and go:

Nice one. For the minimalist users out there, be careful if playing games as the solder on the rear of the PCB can be quite sharp. Included with the kit is some adhesive rubber matting to attach to the underside to smooth everything off nicely. However only fit this once you have totally finished with soldering and modifying the board, otherwise it could prove difficult to remove neatly later on. Time to play some games… in the following video you can see how poor my reflexes are when playing Pong and Space Invaders:

[ ... the Hackvision also generates sounds, however my cheap $10 video capture dongle from eBay didn't come through with the audio ... ]

Well that takes me back. There are some more contemporary games and demonstration code available on the Hackvision games web page. For the more involved Hackvision gamer, there are points on the PCB to attach your own hand-held controls such as paddles, nunchuks and so on. There is a simple tutorial on how to make your own paddles here.

Those who have been paying attention will have noticed that although the Hackvision PCB is not the standard Arduino Duemilanove-compatible layout, all the electronics are there. Apart from I/O pins used by the game buttons, you have a normal Arduino-style board with video and audio out. This opens up a whole world of possibilities with regards to the display of data in your own Arduino sketches (software). From a power supply perspective, note that the regulator is a 78L05 which is only good for 100mA of current, and the board itself uses around 25mA.

To control the video output, you will need to download and install the hackvision-version arduino-tvout library. Note that this library is slightly different to the generic arduino-tvout library with regards to function definitions and parameters. To make use of the included buttons easier, there is also the controllers library. Here is a simple, relatively self-explanatory sketch that demonstrates some uses of the tvout functions (download):

/*
 nootropics Hackvision display demo two
 http://tronixstuff.wordpress.com > kit reviews
 John Boxall 13 May 2011 | CC by-sa
 */

#include "avr/pgmspace.h"
#include "TVout.h"
#include "video_gen.h"
#include "EEPROM.h"
#include "Controllers.h"

int x,y=0;
int d=500; // used for various delays
// declare screen resolution
#define W 136
#define H 98

// create instance of TV
TVout tv;

void setup()  {

  // If pin 12 is pulled LOW, then the PAL jumper is shorted.
  pinMode(12, INPUT);
  digitalWrite(12, HIGH);

  if (digitalRead(12) == LOW) {
    tv.begin(_PAL, W, H);
    // Since PAL processing is faster, we need to slow the game play down.
  }
  else {
    tv.begin(_NTSC, W, H);
  }
  randomSeed(analogRead(0));
}

void randomPixels()
{
  tv.clear_screen(); // clears the screen
  for (int a=0; a<500; a++)
  {
    x=random(128);
    y=random(96);
    tv.set_pixel(x,y,1); // 1 for white, 0 for black, 2 for inverse of current colour at that location
    delay(10);
  }
}

void randomLines()
{
  tv.clear_screen(); // clears the screen
  for (int a=0; a<128; a++)
  {
    tv.draw_line(a,1,a,96,1); // x,y to x,y, colour 1 = white
    delay(50);
  }
}

void rectangles()
{
  tv.clear_screen(); // clears the screen
  for (int a=0; a<30; a++)
  {
    x=random(128);
    y=random(96);
    tv.draw_box(x,y,x+10,y+10,1,0,0,1); // top-left x,y, length, width, colour, fill (0 = no, 1 = yes)
    delay(50);
    tv.draw_box(x,y,x+10,y+10,1,1,0,1); // top-left x,y, length, width, colour, fill (0 = no, 1 = yes)
    delay(50);
  }
}

void circles()
{
  tv.clear_screen(); // clears the screen
  for (int a=0; a<30; a++)
  {
    x=random(128);
    y=random(96);
    tv.draw_circle(x,y,a,1,0,1); // x,y coordinates, radius, line colour, fill
    delay(50);
    tv.draw_circle(y,x,a,1,1,1);
    delay(50);
  }
}

void loop()
{
  randomPixels();
  delay(d);
  randomLines();
  delay(d);
  rectangles();
  delay(d);
  circles();
  delay(d);
}

And the resulting video demonstration:

I will be the first to admit that my imagination is lacking some days. However with the sketch above hopefully you can get a grip on how the functions work. But there are some very good game implementations out there, as listed on the Hackvision games page. After spending some time with this kit, I feel that there is a lack of documentation that is easy to get into. Sure, having some great games published is good but some beginners’ tutorials would be nice as well. However if you have the time and the inclination, there is much that could be done. In the meanwhile you can do your own sleuthing with regards to the functions by examining the TVout.cpp file in the Hackvision tvout library folder.

For further questions about the Hackvision contact nootropic design or perhaps post on their forum. However the Hackvision has a lot of potential and is an interesting extension of the Arduino-based hardware universe – another way to send data to video monitors and televisions, and play some fun games. The Hackvision is available from Little Bird Electronics. If you are looking for a shield-based video output device, perhaps consider the Batsocks Tellymate.

As always, thank you for reading and I look forward to your comments and so on. Furthermore, don’t be shy in pointing out errors or places that could use improvement. Please subscribe using one of the methods at the top-right of this web page to receive updates on new posts, follow me on twitter or facebook, or join our Google Group for further discussion.

High resolution images are available on flickr.

[Note - The kit was purchased by myself personally and reviewed without notifying the manufacturer or retailer]

Otherwise, have fun, be good to each other – and make something! 

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 I can’t locate my 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:

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:

lcd.LCD_init();

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

#include <LCD4884.h>

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:

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

lcd.LCD_write_string(x,y,"insert text here", MENU_NORMAL); // ignore MENU_NORMAL for now

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:

use the following:

lcd.LCD_write_string_big(x,y, "012345", MENU_NORMAL);

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:

lcd.LCD_clear();

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

#include <LCD4884.h>

int z=0;

int dd=200;

void setup()

{

lcd.LCD_init(); // creates instance of LCD

lcd.LCD_clear(); // blanks the display

pinMode(7, OUTPUT);

}

void loop()

{  // first some text display

for (int a=0; a<5; a++)

{

digitalWrite(7, LOW);

delay(300);

digitalWrite(7, HIGH);

delay(300);

}

for (int a=0; a<6; a++)

{

lcd.LCD_write_string(0,a,"01234567980123", MENU_NORMAL); // ignore MENU_NORMAL for now

delay(dd);

}

delay(dd);

lcd.LCD_clear();   // blanks the display

delay(500);

lcd.LCD_write_string_big(0, 0, "012345", MENU_NORMAL);

lcd.LCD_write_string_big(0, 3, "-+-+-+", MENU_NORMAL);

delay(1000);

lcd.LCD_clear();  // now to read the joystick using analogRead(0). Press RESET whien finished

do

{

z=analogRead(0);

if (z==0)

{

lcd.LCD_write_string(2,2,"Down", MENU_NORMAL);

}     else

if (z>0 && z<150)

{

lcd.LCD_write_string(2,2,"OK   ", MENU_NORMAL);

delay(dd);

}       else

if (z>150 && z<350)

{

lcd.LCD_write_string(2,2,"Right", MENU_NORMAL);

delay(dd);

}         else

if (z>350 && z<510)

{

lcd.LCD_write_string(2,2,"Up   ", MENU_NORMAL);

delay(dd);

}         else

if (z>510 && z<750)

{

lcd.LCD_write_string(2,2,"Left ", MENU_NORMAL);

delay(dd);

}           else

if (z>750)

{

lcd.LCD_write_string(2,2,"nil  ", MENU_NORMAL);

delay(dd);

}

}  while (1>0);

}

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:

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:

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:

What we have done is places the hexadecimal numbers inside the

unsigned char hellobmp[]= {}

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:

#include "LCD4884.h"

#include "hellobmp.h" // this file needs to be in the same folder as your sketch

void setup()

{

  lcd.LCD_init(); // creates instance of LCD

  lcd.LCD_clear(); // blanks the display

}

void loop()

{

   lcd.LCD_draw_bmp_pixel(0,0, hellobmp, 84,48);

   do { } while (1>0); // do nothing

}

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:

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 twitter, Google+, 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.

Tutorial: Arduino and TFT LCD

Learn how to use the 4D Systems 1.44″ TFT serial interface LCD with Arduino in chapter twenty-nine 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.

If you’re looking for an inexpensive and simple TFT LCD to use with Arduino, visit the new tutorial.

Update 20/04/2013 

The Arduino library for this module hasn’t been updated to work with Arduino v1.0.1+ – so you need to use Arduino IDE v22 or v23. And the module itself has been discontinued. For the time being I’m leaving the tutorial here until a more suitable item can be used. We can’t help you with the 4D module. 

Nevertheless – if you have one – here’s the subject of the tutorial- the 4D Systems 1.44″ TFT serial interface LCD:

The LCD is an LED-backlit thin-film transistor type, resolution is 128 x 128 pixels, with an RGB colour range of 65536.

As an aside, this is a very powerful piece of hardware. The module not only contains a 1.44″ square TFT LCD, there is also a dedicated graphics processor and a microSD card interface. One can program the display processor in the same manner as another microcontroller platform for incredibly interesting results. For more information, please visit here.

However in the spirit of keeping things simple, this article will focus on driving the LCD directly using our Arduino or compatible boards. There are two firmware versions of this module – the GFX and the SGC. We need to have the SGC firmware, as this allows control via the serial TX/RX pins from our Arduno board. If you have purchased the SGC module, you’re ready to go. Scroll down until you see “And we’re back…”. However if you have the GFX version, please read the following instructions on how to change your LCD’s firmware from GFX to SGC…

Changing the firmware from GFX to SGC

• At the moment this process only seems available to users of Microsoft Windows. All complaints to 4D Systems.
• Unfortunately this process may not work with an Arduino Mega board.
• First of all, remove the ATmega328 from your Arduino board. Please be careful, use a chip puller if possible. We are going to use the board as a simple serial-USB converter;
• Insert your LCD module into a solderless breadboard;
• Connect Arduino pin 0 (RX) to display pin 7 (RX); connect Arduino pin 1 (TX) to display pin 8 (TX). [Yes - TX>TX, RX>RX];
• Connect Arduino 5V to display pin 9; connect Arduino GND to display pin 6; your LCD should display the following:

• Visit here, download and open the PmmC Loader application; visit here and download the .pmmc file to your local drive;
• Connect your Arduino board via USB to the computer; then run the PmmC loader application;
• Select the appropriate COM: port, load in the .pmmc file, then click Load. The firmware update should take less than sixty seconds;
• When finished, you will be presented with the following on the computer:

… and the following on your LCD:

• At this point unplug the USB lead from your Arduino board and all leads into the Arduino board;
• Re-insert the ATmega328 back into your Arduino board;
• Reconnect the wires from the LCD module to the Arduino, but this time connect Arduino TX to LCD RX; and LCD TX to Arduino RX.
• Now you have  the serial-interface SGC firmware model LCD.

And we’re back…

To control this LCD, it requires commands to be sent via Serial.write(), and such commands are in the form of hexadecimal numbers. (You see something new every day). You can download the reference book with all the commands: SGC Commands.pdf and bypass the library by directly writing the hexadecimal numbers directly to the module.

However, to get up to speed as fast as possible we can use a library with more of the popular functions included. Kudos and thanks to Oscar Gonzalez for writing a very useful library. Download the library from here and install into your ../Arduino-002x/libraries folder, then re-start the Arduino IDE if you had it running. You may be wondering why the library is named displayshield4d - the LCD manufacturer sells this LCD on an Arduino shield. Although that would be great for experimenting, one would need to purchase another standalone LCD if their project moved forward – myself included. So that’s why we’re using the bare LCD board.

To connect the LCD to our Arduino is very simple:

• LCD pin 5 to Arduino RST;
• LCD pin 6 to Arduino GND;
• LCD pin 7 to Arduino D1;
• LCD pin 8 to Arduino D0;
• LCD pin 9 to Arduino 5V.

In the following examples we will demonstrate the various functions available in the library. As this is chapter 29, I will no longer explain the more basic functions or ideas that you should know by now, instead relying on comments within the sketch if it feels necessary. It can take a short moment for the LCD controller to process, so always put a short delay between functions.

When uploading a sketch to your Arduino you may need to disconnect the LCD from Arduino D0/D1 as it can interfere with the serial process.

Firstly we will demonstrate text display. Initialising the display requires a few functions:

#include <displayshield4d.h> // include the LCD library

DisplayShield4d  lcd;

The second line creates an instance of lcd to be used with the relevant functions. Next, within void setup():

Serial.begin(115200);  // LCD speed is very high

lcd.Init(); // wake up LCD

lcd.Clear(); // clear the LCD, set background to black

To write text to the LCD, the following function is required:

lcd.setfontmode(OLED_FONT_TRANSPARENT);  // set font background type

This line sets the font transparency. If we use the parameter OLED_FONT_TRANSPARENT the unused pixels in the character area will be transparent and continue to show what they were set to before the text was over-written with. You can also use OLED_FONT_OPAQUE, which blocks the item displayed “behind” the text.

Whenever a function requires a colour parameter, we use:

lcd.RGB(x,y,z);

where x, y and z are numerical values (between 0 and 255) for the red, green and blue components of the required colour. If you need an RGB numerical reference, download this handy chart. Finally, to display some text we use the following:

lcd.drawstringblock(a, b, c, lcd.RGB(255, 255, 255), d, e, "Hello, world");

The parameters required are:

• a – the x-position of the first character. E.g. if this was a zero, the top-left pixel of the first character would be on the left-most pixel column of the LCD;
• b – the y-position of the first character. e.g. if both a and b were zero, the text would start from the top-left of the LCD;
• c – numerical code for the font to use: 1 is for 5×7 pixel characters, 2 for 8×8 and 3 for 8×12;
• the three values within the lcd.RGB() function determine the colour of the text;
• d – x-axis resolution multiplier. E.g. if you double this and use the 5×7 font, the characters will be double-width;
• e – y-axis resolution multiplier.

Now let’s see this in action with the following sketch:

Example 29.1

/*  Example 29.1 - uLCD-144 text demonstration

http://tronixstuff.com/tutorials > chapter 29  CC by-sa-nc  */

#include <displayshield4d.h> // necessary library

DisplayShield4d  lcd; // create an instance of the LCD

void setup()

{

Serial.begin(115200);  // LCD speed is very high

lcd.Init(); // wake up LCD

delay(20);

}

void loop()

{

lcd.Clear(); // clear LCD

delay(20);

lcd.setfontmode(OLED_FONT_TRANSPARENT);  // set font background type

delay(20);

for (int a=0; a<128; a+=8)

{

lcd.drawstringblock(0, a, 2 , lcd.RGB(255, 0, 0), 1, 1, "visit me");

delay(20);

}

delay(2000);

lcd.Clear();

for (int a=0; a<128; a+=16)

{

lcd.drawstringblock(0, a, 0, lcd.RGB(0, 255, 0), 2, 2, "0123456789");

delay(20);

}

delay(2000);

lcd.Clear();

delay(20);

for (int a=0; a<128; a+=32)

{

lcd.drawstringblock(0, a, 0, lcd.RGB(0, 0, 255), 4, 4, "Great");

delay(20);

}

delay(2000);

}

And a short video clip of the example in action:

As you can see the display update speed is much better than the LCD from the previous chapter. Although this example was short, don’t be afraid to try out your own parameters in the example sketch.

Next we will demonstrate the various graphics functions in the library. Creating graphics isn’t rocket science, it just takes some imagination (something I admit to lacking) and following the parameters for each function. Our first is

lcd.putpixel(x,y,lcd.RGB(r,g,b));

which places a pixel on the screen at location x,y of colour described using lcd.RGB(). Next we have

lcd.line(x1,y1,x2,y2,lcd.RGB(r,g,b));

which draws a line from x1, y1 to x2, y2 of colour rgb. One can also create rectangles and so on using

lcd.rectangle(x,y,l,h,z,lcd.RGB(r,g,b));

This will create a rectangle with the top-left point at x,y; width is l pixels, height is h pixels, and a new parameter z. If z is 0, the function will draw a solid shape, if z is 1, it will display only a wire-frame rectangle with a pixel width of one. Circles are created using

lcd.circle(x,y,r,z,lcd.RGB(r,g,b);

where x and y are the coordinates for the centre of the circle, r is the radius, and z is the solid/wireframe parameter. And finally – triangles:

lcd.triangle(x1,y1,x2,y2,x3,y3,z,lcd.RGB(r,g,b));

This will draw a triangle with the corners at the coordinate parameters; z again is the solid/wireframe parameter. However you need to order the corners in an anti-clockwise order. This will become evident in the example sketch below.

Example 29.2

In this example we run through the graphical functions described above. By following through the sketch you should gain an idea of how the graphical functions are used, in order to create your own displays.

/*  Example 29.2 - uLCD-144 graphic library demonstration

http://tronixstuff.com/tutorials > chapter 29  CC by-sa-nc  */

int a,b,c,d,e=0;

#include <displayshield4d.h> // necessary library

DisplayShield4d  lcd; // create an instance of the LCDvoid

setup()

{

randomSeed(analogRead(0));

Serial.begin(115200);  // LCD speed is very high

lcd.Init(); // wake up LCD

delay(50);

}

void loop()

{

lcd.Clear();

delay(50);

for (int z=0; z<2500; z++)

{

a=random(127);

b=random(127);

c=random(255);

d=random(255);

e=random(255);

lcd.putpixel(a,b,lcd.RGB(c,d,e));

delay(50);

}

delay(1000);

lcd.Clear();

delay(50);

for (int z=0; z<64; z++)

{

lcd.line(0,0,127,z*2,lcd.RGB(0,255,0));

delay(50);

}

for (int z=0; z<64; z++)

{

lcd.line(0,0,z*2,127,lcd.RGB(0,0,255));

delay(50);

}

delay(1000);

lcd.Clear();

delay(50);

for (int z=0; z<15; z++)

{

lcd.rectangle(z*10, z*10, 20, 20, 1, lcd.RGB(255,0,0));

delay(250);

lcd.rectangle(z*10, z*10, 20, 20, 0, lcd.RGB(0,0,255));

delay(250);

lcd.rectangle(z*10, z*10, 20, 20, 0, lcd.RGB(0,0,0));

delay(250);

}

delay(1000);

lcd.Clear();

delay(50);

for (int z=0; z<14; z++)

{

lcd.circle(63,63,z*3, 1, lcd.RGB(0,0,255));

delay(250);

lcd.circle(63,63,z*3, 0, lcd.RGB(0,255,0));

delay(250);

lcd.circle(63,63,z*3, 0, lcd.RGB(0,0,0));

delay(250);

}

delay(1000);

lcd.Clear();

delay(50);

for (int z=10; z>-0; --z)

{

lcd.triangle(127,127,64,z*10,0,127,1,lcd.RGB(0,255,0));

delay(250);

lcd.triangle(127,127,64,z*10,0,127,0,lcd.RGB(0,0,255));

delay(250);

lcd.triangle(127,127,64,z*10,0,127,0,lcd.RGB(0,0,0));

delay(250);

}

}

And here is the video of example 29.2 in action … brought to you by Mr Blurrycam:

So there you have it, another useful part and a very nice colour LCD to make use of.

Have fun and keep checking into tronixstuff.com. Why not follow things on twitter, Google+, 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.

Tutorial: Arduino and Colour LCD

Learn how to use the colour LCD shield from Sparkfun in chapter twenty-eight 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.

Updated 19/02/2013

Although there are many colour LCDs on the market, I’ve chosen a relatively simple and popular model to examine in this tutorial – the Sparkfun Color LCD shield:

If you buy one note (shown above) that stacking headers aren’t supplied or fitted to the shield. If you get a header pack from Sparkfun or elsewhere – order PRT-10007 not PRT-11417 as the LCD shield doesn’t have the extra holes for R3 Arduino boards. However if you do have an Arduino R3 – relax … the shield works. While we’re on the subject of pins - this shield uses D3~D5 for the three buttons, and D8, 9, 11 and 13 for the LCD interface. The shield takes 5V and doesn’t require any external power for the backlight. The LCD unit is 128 x 128 pixels, with nine defined colours (red, green, blue, cyan, magenta, yellow, brown, orange, pink) as well as black and white.

So let’s get started. From a software perspective, the first thing to do is download and install the library for the LCD shield. Visit the library page here. Then download the .zip file, extract and copy the resulting folder into your ..\arduino-1.0.x\libraries folder. Then restart the Arduino IDE if it was already open.

At this point let’s check the shield is working before moving forward. Fit it to your Arduino – making sure the shield doesn’t make contact with the USB socket**. Then open the Arduino IDE and upload the TestPattern sketch found in the Examples folder. You should be presented with a nice test pattern as such:

It’s difficult to photograph the LCD – (some of them have very bright backlights), so the image may not be a true reflection of reality. Nevertheless this shield is easy to use and we will prove this in the following examples.

At the start of every sketch, you will need the following lines:

#include "ColorLCDShield.h"
LCDShield lcd;

as well as the following in void setup():

lcd.init(PHILIPS); 
lcd.contrast(63); // sets LCD contrast (value between 0~63)

With regards to lcd.init(), try it first without a parameter. If the screen doesn’t work, try PHILIPS or EPSON instead. There are two versions of the LCD shield floating about each with a different controller chip. The contrast parameter is subjective, however 63 looks good – but test for yourself. Now let’s move on to examine each function with a small example, then use the LCD shield in more complex applications.

The LCD can display 8 rows of 16 characters of text. The function to display text is:

lcd.setStr("text", y,x, foreground colour, background colour);

where x and y are the coordinates of the top left pixel of the first character in the string. Another necessary function is:

lcd.clear(colour);

Which clears the screen and sets the background colour to the parameter colour.  Please note – when referring to the X- and Y-axis in this article, they are relative to the LCD in the position shown below.

Now for an example – to recreate the following display:

… use the following sketch:

// Example 28.1

#include "ColorLCDShield.h"
LCDShield lcd;

void setup()
{
 // following two required for LCD
 lcd.init(PHILIPS); 
 lcd.contrast(63); // sets LCD contrast (value between 0~63)
}

void loop()
{
 lcd.clear(BLACK);
 lcd.setStr("ABCDefghiJKLMNOP", 0,2, WHITE, BLACK);
 lcd.setStr("0123456789012345", 15,2, WHITE, BLACK);
 lcd.setStr("ABCDefghiJKLMNOP", 30,2, WHITE, BLACK);
 lcd.setStr("0123456789012345", 45,2, WHITE, BLACK);
 lcd.setStr("ABCDefghiJKLMNOP", 60,2, WHITE, BLACK);
 lcd.setStr("0123456789012345", 75,2, WHITE, BLACK);
 lcd.setStr("ABCDefghiJKLMNOP", 90,2, WHITE, BLACK);
 lcd.setStr("0123456789012345", 105,2, WHITE, BLACK);
 do {} while (1>0);
}

In example 28.1 we used the function lcd.clear(), which unsurprisingly cleared the screen and set the background a certain colour. Let’s have a look at the various background colours in the following example. The lcd.clear()  function is helpful as it can set the entire screen area to a particular colour. As mentioned earlier, there are the predefined colours red, green, blue, cyan, magenta, yellow, brown, orange, pink, as well as black and white. Here they are in the following example (download):

// Example 28.2

int del = 1000;
#include "ColorLCDShield.h"

LCDShield lcd; void setup() { // following two required for LCD lcd.init(PHILIPS); lcd.contrast(63); // sets LCD contrast (value between 0~63) }

void loop()
{
 lcd.clear(WHITE);
 lcd.setStr("White", 39,40, WHITE, BLACK);
 delay(del);
 lcd.clear(BLACK);
 lcd.setStr("Black", 39,40, WHITE, BLACK);
 delay(del);
 lcd.clear(YELLOW);
 lcd.setStr("Yellow", 39,40, WHITE, BLACK);
 delay(del);
 lcd.clear(PINK);
 lcd.setStr("Pink", 39,40, WHITE, BLACK);
 delay(del);
 lcd.clear(MAGENTA);
 lcd.setStr("Magenta", 39,40, WHITE, BLACK);
 delay(del);
 lcd.clear(CYAN);
 lcd.setStr("Cyan", 39,40, WHITE, BLACK);
 delay(del);
 lcd.clear(BROWN);
 lcd.setStr("Brown", 39,40, WHITE, BLACK);
 delay(del);
 lcd.clear(ORANGE);
 lcd.setStr("Orange", 39,40, WHITE, BLACK);
 delay(del);
 lcd.clear(BLUE);
 lcd.setStr("Blue", 39,40, WHITE, BLACK);
 delay(del);
 lcd.clear(RED);
 lcd.setStr("Red", 39,40, WHITE, BLACK);
 delay(del);
 lcd.clear(GREEN);
 lcd.setStr("Green", 39,40, WHITE, BLACK);
 delay(del);
}

And now to see it in action. The colours are more livid in real life, unfortunately the camera does not capture them so well.

Now that we have had some experience with the LCD library’s functions, we can move on to drawing some graphical objects. Recall that the screen has a resolution of 128 by 128 pixels. We have four functions to make use of this LCD real estate, so let’s see how they work. The first is:

lcd.setPixel(int colour, Y, X);

This functions places a pixel (one LCD dot) at location x, y with the colour of colour.

Note – in this (and all the functions that have a colour parameter) you can substitute the colour (e.g. BLACK) for a 12-bit RGB value representing the colour required. 

Next is:

lcd.setLine(x0, y0, x1, y1, COLOUR);

Which draws a line of colour COLOUR, from position x0, y0 to x1, y1. Our next function is:

lcd.setRect(x0, y0, x1, y1, fill, COLOUR);

This function draws an oblong or square of colour COLOUR with the top-left point at x0, y0 and the bottom right at x1, y1. Fill is set to 0 for an outline, and 1 for a filled oblong. It would be convenient for drawing bar graphs for data representation. And finally, we can also create circles, using:

lcd.setCircle(x, y, radius, COLOUR);

X and Y is the location for the centre of the circle, radius and COLOUR are self-explanatory. 

We will now use these graphical functions in the following demonstration sketch (download):

// Example 28.3
#include "ColorLCDShield.h"

LCDShield lcd;

int del = 1000;
int xx, yy = 0;
void setup()
{
 lcd.init(PHILIPS); 
 lcd.contrast(63); // sets LCD contrast (value between 0~63)
 lcd.clear(BLACK);
 randomSeed(analogRead(0));
}

void loop()
{
 lcd.setStr("Graphic Function", 40,3, WHITE, BLACK);
 lcd.setStr("Test Sketch", 55, 20, WHITE, BLACK); 
 delay(5000);
 lcd.clear(BLACK);
 lcd.setStr("lcd.setPixel", 40,20, WHITE, BLACK);
 delay(del);
 lcd.clear(BLACK);
 for (int a=0; a<500; a++)
 {
 xx=random(160);
 yy=random(160);
 lcd.setPixel(WHITE, yy, xx);
 delay(10);
 }
 delay(del);
 lcd.clear(BLACK);
 lcd.setStr("LCDDrawCircle", 40,10, WHITE, BLACK);
 delay(del);
 lcd.clear(BLACK); 
 for (int a=0; a<2; a++)
 {
 for (int b=1; b<6; b++)
 {
 xx=b*5;
 lcd.setCircle(32, 32, xx, WHITE);
 delay(200);
 lcd.setCircle(32, 32, xx, BLACK);
 delay(200);
 }
 }
 lcd.clear(BLACK); 
 for (int a=0; a<3; a++)
 {
 for (int b=1; b<12; b++)
 {
 xx=b*5;
 lcd.setCircle(32, 32, xx, WHITE);
 delay(100);
 }
 lcd.clear(BLACK);
 }
 lcd.clear(BLACK); 
 for (int a=0; a<3; a++)
 {
 for (int b=1; b<12; b++)
 {
 xx=b*5;
 lcd.setCircle(32, 32, xx, WHITE);
 delay(100);
 }
 lcd.clear(BLACK);
 }
 delay(del);
 lcd.clear(BLACK);
 lcd.setStr("LCDSetLine", 40,10, WHITE, BLACK);
 delay(del);
 lcd.clear(BLACK); 
 for (int a=0; a<160; a++)
 {
 xx=random(160);
 lcd.setLine(a, 1, xx, a, WHITE);
 delay(10);
 }

lcd.clear(BLACK);
 lcd.setStr("LCDSetRect", 40,10, WHITE, BLACK);
 delay(del);
 lcd.clear(BLACK); 
 for (int a=0; a<10; a++)
 {
 lcd.setRect(32,32,64,64,0,WHITE);
 delay(200);
 lcd.clear(BLACK);
 lcd.setRect(32,32,64,64,1,WHITE);
 delay(200);
 lcd.clear(BLACK); 
 }
 lcd.clear(BLACK); 
}

You can see Example 28.3  in the following video. (There’s a section in  the video showing semi-circles – however this isn’t possible with the new Arduino v1+ library).  For photographic reasons, I will stick with white on black for the colours.

So now you have an explanation of the functions to drive the screen – and only your imagination is holding you back.  ** Get an Eleven board – it has a microUSB socket so you don’t run the risk of rubbing against shields.

For another example of the colour LCD shield in use, check out my version of “Tic-tac-toe“.

Have fun and keep checking into tronixstuff.com. Why not follow things on twitter, Google+, 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.