Getting Started with Arduino! – Chapter Nine

This is part of a series titled “Getting Started with Arduino!” by John Boxall – A tutorial on the Arduino microcontrollers. The first chapter is here, the index is here.

Welcome back fellow arduidans!

In this chapter we will start looking at LED matrix displays, designing user interfaces, implementing a user interface for  a clock, and finish up making an alarm clock.

Firstly, let’s have plenty of fun with 64 LEDs! Using an 8×8 LED display module:


Previously we have used 74HC595 shift registers to drive strips of LEDs, single and four-digit LED displays. An LED matrix seems complex at first, but after further investigation quite simple. With sixteen pins you can control 64 LEDs. It works by having 8 row pins, each pin connected to all the anodes on one row; and 8 pins each connected to the cathodes on one column:


It does look like a mess, but we can work it out. As we did with the 4-digit 7-segment display module, we just need one shift register for the anodes, and one for the cathodes. Moving along from exercise 6.2, it will be easy to drive the an LED matrix display – one shift register (the left hand side) will apply current to the rows (anodes) and the other shift register will apply current to NPN transistors to allow current to flow from the cathodes (columns) to ground. So we can make an example quite easily. You will need:

  • Your standard Arduino setup (computer, cable, Uno or compatible)
  • One 8×8 LED matrix. Try to find one that has LEDs with a forward voltage of 2 volts and a current of less than 20mA. If it is bicolour, that’s ok – just use one colour for now
  • Eight 560 ohm 1/4 watt resistors
  • Eight 1 kilo ohm 1/4 resistors
  • Eight BC548 NPN transistors
  • Two 74HC595 shift registers
  • Solderless breadboard and connecting wires

Here is a circuit diagram for our example (click on it to enlarge):


Please note that there are eight transistor/resistor combinations from the second shift register – I just have not drawn them in to save my sanity. They’re on the bottom right of my board:


Now how are we going to light up those LEDs? We need to send two bytes of data to the shift registers, one byte for the row, and one for the column. For this example we will work with individual pixels. For example, say you want to turn on the pixel at 8 across, 8 down – the bottom right. You need to send the following bytes of data to the shift registers: b00000001 and b00000001. In decimal those two numbers are 128 and 128. Or the top-left LED, at 1 across, 1 down – it would be b10000000, b10000000 or decimal 1,1. Once again we can use the functions:

… to send the data to the shift registers. This example sketch for the above circuit should be pretty well self-explanatory if you have been following my tutorials.

Here is is in action:

Once again, quite mesmerising. Did you notice that the horizontal solid rows were dimmer than the solid vertical columns? This is because when you light up one row, all eight LEDs are drawing current from one pin of the shift register – so there is less current for each LED; whereas in the column, each LED has its own source of current, so can therefore operate at full brightness. So a hint – when you are creating images or characters for your display, use scrolling columns to display the image.

Experiment with the example 9.1 sketch, if you display only vertical columns, and make the delay zero – you can give the illusion that the entire display is on, but it is not. Which leads us into the first exercise for this chapter.

Exercise 9.1

We can display entire columns with our matrix display. We can position these columns on demand. And without a delay, fill up the entire matrix. Now you can create images, or characters and display them on the matrix, one column at a time. For example, the little yellow dude from that popular arcade game many years ago might look like this:

Using the circuit described for example 9.1, create a character, shape, or whatever tickles your fancy, and animate it to move across the screen.

Hint – To animate an image, you will need to map the matrix every time the image changes – just like a normal animation or cartoon. However, store all the values for the entire animation in one array, otherwise you will go bonkers. When you need to read the array, each matrix image can be read as they are multiples of eight (then add the reference to the value you want).

For inspiration, here is what I came up with:

and the corresponding sketch.

How did you go? If you have an interesting animation, and you can do so – please email a link to Youtube, Vimeo, etc showing your creation – you could win a prize.

Time to get a little more serious now. :(

Over time you have been making things, some useful, some more experimental than anything. Hopefully you will reach the stage of designing something that has a real-world use and could be used by people other than yourself or your immediate circle of friends. In the next few weeks we will look at methods of transitioning projects from prototypes to standalone products you can develop!

A major part of your design should be the user interface, or how your project responds to user input and displays data, results and so on. If something is difficult to use, or understand, it will not be a good product. So what can we do about this? This week we will examine the clock made in example 7.4 and change it to be independent of a computer, and easy for the user to operate. But now for some design inspiration…

The humble alarm clock (it has been staring at me every morning). Here is my late grandfather’s clock from the 1960s:



Simple, yet functional. It does what it is supposed to do with the minimum of fuss. (It’s German). And that is how our project user interfaces should be. As technical people it is very easy to get carried away and put buttons, lights, and all sorts of things together, but at the end of the day, less is more. How can we emulate this with Arduino – but in a simple method?

Looking at the face of the clock, it displays the time (hours, minutes, seconds) and the alarm time. We can use an LCD for that. On the top is the alarm off button. We can use a button for that. On the rear there are winders for the time and alarm spring – we have electricity for that. There are two knobs, one to adjust the time, and one to adjust the alarm – here we have several options. We could use up/down buttons… perhaps we could use a knob as well? And finally there is the gain control – we don’t need this as our DS1307 is infinitely more accurate.

A rough map of how you want things to work is always a good start, for example my mess below:


How can this be implemented? Let’s see. The clock will normally display the date, time, etc. If a button is pressed, it will switch to menu mode (on the right). A knob will be used to select one of the options listed on the right, when the required option is displayed, the user presses the button to select the option. Then the user can use the knob to adjust the variable for that option, and press the button to return to the menu. The last menu option is to return to the clock display. So we can control the whole lot with only one button and one knob.

The button is easy with Arduino, and to save money we can use a potentiometer as a knob. Remember we did this in in exercise 6.2. Normally it can return a value between 0 and 1023, but with our clock we need it to return a value that falls within a variety of ranges – from 0 to 6 for day of the week, to 0 to 59 for the minute adjustment.

Exercise 9.2

Create a function to use a potentiometer to return an integer between zero and a maximum range value. The function will accept the maximum range value, and return an integer which represents the position of the knob. For example:

Here is a short video of my interpretation in action.

And the resulting sketch. The value rangemax that is fed into the function is the number of positions in the range you want to work with. For example, if I want the knob to return a value between zero and fifty-nine (sixty values in the range) I would set rangemax to 60. The value dialpin is the number of the analogue pin the potentiometer is connected to. You should use a linear potentiometer to ensure a nice smooth adjustment.

Great – now we have a way of reading our knob and customising the result for our range requirements. Our clock example’s menu will require eight options, each with their own function (e.g. set hours, set minutes, set year, return to clock, etc). We have one button, so you could use that to trigger an interrupt to start the menu display (interrupts were covered in chapter three). However if you have made an LCD shield use the interrupt pins, you will need to check the button status while displaying the time. We will make the display of the menu a separate function as well.

For now we will make our clock respond to the ‘menu’ button, and display the eight options when the knob is rotated. We will build on the sketch from example 7.4. Here is the result of doing this:

Now it is time (ha!) to make those menu options actually do something. First we need our displaymenu() function to call the selected option. This can be done with a switch…case function. For example, I will put this code after the while loop:

There is no need for a seventh option (return to clock display) as this will default if the knob is in the ‘7’ range. Notice I have already declared the name of the functions to call. All we have to do is create the individual functions. However there is one catch to work around, when it comes to setting time and date data, this is all done with the one function:

So inside the function that (for example) sets the hour, immediately before setting the hour, read the rest of the values from the clock, and reset them back in with the setDateDS1307() function.

Once again the basic work has been done for you, please see this video:

… and the sketch. Although the contents of the LCD during the menus may be brief, the framework of the user interface has been created and can now be easily modified. For example, if you had a 20 x 4 character LCD, you could offer more help to the user. But returning to the original task – emulating Grandfather’s alarm clock. We need an alarm!

Exercise 9.3

You guessed it – modify the clock in example 9.3 to have an alarm as well. User can set the alarm, and turn it on or off with the menu system. When the alarm sounds, the user should be able to turn off the alarm, Have fun!

How did you go? Here is a video demonstration of my work:

… and the sketch. That was really fun – I have a lot more clock ideas now.

I hope you enjoyed the change of pace this article and have a greater understanding on why we should create simpler human-machine interfaces wherever possible. Now to move on to Chapter Ten.


Have fun and keep checking into 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.

The following two tabs change content below.

John Boxall

Founder, owner and managing editor of

41 Responses to “Getting Started with Arduino! – Chapter Nine”

  1. Beta says:

    Instead of usng a ton of transstors and resstors to drve the LED matrx’s cathodes, could you nstead use an analogue swtch lke the 4066 (

    • John Boxall says:

      Hello agan
      What an excellent queston, I hadn’t thought of that. I don’t thnk the 4066 can handle more than 10mA per pn; however lookng at data sheets for NXP and ON Sem 74HC4066 they can handle up to 25mA per pn. If you lke I wll order some ths week and try them out. Cheers, John

    • Beta says:

      Oh. That could be a problem unless you controled the led’s by rows. You mght could move the curent lmtng resstors to the cathode sde, whch would gve the array the brgh appearance.

  2. Mike says:

    Why use the transstors at all? The 74HC595 has more than enough current to drve that matrx.

    • John Boxall says:

      Correct me f I’m wrong but each pn of the 74HC595 can only handle 25~35mA a pn (NXP data sheet)… therefore f I lght up a whole row that wll be somewhat exceeded.

  3. H John!

    Wth your colaboraton and example made a scrollng termometer:×7.html

    (n portuguese but the code and lustraton show the dea)

    Maybe my experment can help other of your followers to be good and make thngs!

  4. Tirlochan says:

    Thanks Jone very good tutorals, Sr can you don one favour to me as am new to programmng. How can store array of Hours and mnutes and compare the same every second and trgger some thng when tme reaches

    nt TmeONHour[5]
    nt TmeONMnutes[5]
    Int TmeOffHour[5]
    nt TmeOffMnutes[5]

    t wll be a great help


    • John Boxall says:

      you should read chapter four about arrays, and then use the f() functon for your decson makng process. A good example program for you to see s exercse 10.1.
      Furthermore you should get a copy of “Gettng Started wth Arduno” by Massmo Banz

  5. Tim Gilmore says:

    I’m nterested n desgnng a smlar crcut wth an LCD and potentometer and push button as seen n exercse 9.2. Can you drect me to how they are connected to the Arduno. I see a module based swtch, resstor and potentometer and need more nformaton on how to setup your exercse.

    Thank you.

    • John Boxall says:

      Hello Tm
      1) The potentometer wll have three connectons. The centre one goes to an analogue nput pn (A0~A5), then one on the left goes to GND and the one on the rght goes to 5V.
      2) A good example of connectng buttons s n chapter 12, look for the ‘button board’. Although t has four buttons, you can see how each button s wred to 5V, GND and a dgtal nput pn.
      3) LCD modules are covered n chapter 24

  6. Chris says:

    On the NPN transstor, where should “E” be connected to?

  7. Chris says:

    Thank you for your reply John.
    I have one more queston.
    After I followed your project (8×8 led matrx), I used the arduno code from ths webste to ths project, and as you see the vdeo n the bryan’s webste, my led matrx blnks lke the led matrx n the vdeo, but only half of my led’s lghts blnk…. do you know why? I checked wrng connectons a lot of tmes, but stll can’t fgure t out.

    • John Boxall says:

      Hello Chrs
      It s hard for me to say wthout lookng at your crcut n person.
      However f you are usng /exactly/ the same sketch, the problem les wth wrng or a faulty MAX7219.

  8. David says:

    Your grandfather’s clock s apparently angry about t beng almost seven o’clock. That makes t 7am I presume.


  9. Tarneem says:

    can any one help me n my project.. just want to do the same but wll control my matrx usng parallel port

    so guess the crcut wll be same except the arduno
    but wonder how many wre wll use.. mean for each shfted regster.. there s only one nput and 8out out
    s t ok to connect that regster drectly wth parallel port? no need for resstors or any thng else?

  10. Ruben says:

    H John,

    We are about to use your tutoral for a project at school.
    It’s a very good tutoral !!
    But I have one queston: What knd of capactors are you usng and where can I buy them?

    Thank you!


  11. Tomas says:

    Are resstor values are good? Especally the 560 ohms, current would be 5mA wth 5V suplly.

  12. Tomas says:

    I was askng about ths pcture . I thought the current through LEDs wll be too small.

  13. Garry says:

    I’ve seen the error
    button pn 8 clashes wth my LCD sheld 11.12.7,8,9,10
    because I can connect button pn 8 to the extended pns on my LCD sheld I never spotted my mstake
    never mnd
    you lve and learn
    I guess I would have to change the pn 8 n you prog to somethng else or mod my LCD sheld
    keep up the good work

  14. shin kagawa says:

    can I usng ths code usng my arduno uno wth atmega328.
    I have a problem after loadng ths program nto my arduno.
    when I press the button whch connected to dgtal pn 8, I can’t set both tme and date.
    my potentomer not functon as well.
    do you connect the potentometer to analog pn 1?

  15. shin kagawa says:

    ok, just done what you have tell.but when press the push button, t doesn’t show “pressed” at the LCD.the other problem s I can’t set the date and tme for my ds1307. n the LCD screen t keeps show the selecton menu,when don’t turn the potentometer. can youexplan to me, how ths clock s workng actually.Thanks

  16. shin kagawa says:

    Thanks,do you ever try to buld propeller clock usng arduno? f, yes, whch chapter you teach how to buld t?

  17. shin kagawa says:

    hello, do you ever buld a clock wthout usng rtc? just usng mlls functon?

  18. mark says:

    Instead of a Potentometer. How much dfferent would the code be f a rotary encoder was used. If you could show one example of settng say hours, I should be able to fgure the other parameters.

    • John Boxall says:

      We cover rotary encoders n chapter eleven.

      • Chris says:

        H John, I’m n the mddle of a HNC project and I plan to use an UNO to control a waterng valve. I thought I could make t easy on myself and use an alarm clock code and use the sgnal ntended for a buzzer to operate a relay/solenod. What do you thnk?

      • John Boxall says:

        Sure – you just replace the code that make the buzz wth code to turn on/off a dgtal output etc.


Leave a Reply

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: