Assignment 7: Pixel Display

Click here to access the repository for this assignment.

The idea

In this assignment we will build a method of displaying characters and images on the 5 by 7 array of LEDs. This extends the investigation we began in studio by using the entire display at any given time via multiplexing.

The background

Output multiplexing

Due to the way it’s wired, it’s not physically possible to fully control more than one row of this LED display at once (what if I wanted to make a checkerboard pattern?).

In order to control the entire board at any given time, we must multiplex our connection. Multiplexing is communication with mutiple outputs (the columns, in this case) using shared wires (the rows in this case). There are many different types of multiplexing, but today we will be using time-division multiplexing.

Taking advantage of the very slow speed of the human eye (it thinks that static images played back at 30fps or so look like motion), we can cycle through the columns, one by one, very quickly, so that the change is invisible to our perception.

For example, if I wanted to draw two columns “at once,” I could do this:

  • Set column 1’s output LOW and all the other column outputs HIGH.
  • Output HIGH on the rows that are to be lit, and LOW on the rows that are to stay dark.
  • Wait for $\frac{1}{2}$ of the length of a single frame, or the time period that this whole process takes. You will choose this in a bit.
  • Set column 2’s output LOW and all the other column outputs HIGH.
  • Output HIGH on the rows that are to be lit, and LOW on the rows that are to stay dark.
  • Wait for $\frac{1}{2}$ of the length of a single frame.
  • Repeat.

An overall frame length of 5 seconds or so is good for debugging purposes, but you will want the length to be less than about 30ms for normal operation (33fps).

The assignment


We’ve provided a file, font.h (in cse132-assignment7/display/font.h), that defines an array called font_5x7 that describes which LEDs should be on or off to display any of the 96 printable ASCII characters on a 5 by 7 pixel display.

It’s a two-dimensional array: the first dimension corresponds to the character code (using its ASCII code minus 0x20, so A is index 33, not 65), while the second dimension corresponds to the column (of the 5 by 7 display). The individual bits of each index of the array represent the state of the LEDs in each row, with an extra useless bit tacked on at the end (bytes are 8 bits, but our LED only has 7 rows).

  1. Make sure you understand how the font is represented by printing some different characters in binary form:

     c = 0x03;  // '#'

    Hint: look at it sideways.

    For this piece of the assignment, do not set the pinMode() of the display pins to OUTPUT, as that will interfere with serial communications. The point of this part is just to help you understand how to interpret the contents of font_5x7[][].

  2. Try the above with different values of c, especially values for which the character is not symmetric from left and right.

Author the Arduino sketch

  1. Open the display Arduino sketch.
  2. Author an Arduino sketch that displays individual characters on the 5 by 7 pixel display, using the provided font file font.h.

    Initially, the display should be blank (the space character). When the user presses buttons the displayed character should change. One button should increment the character (increment the current ASCII character displayed by 1) and another button should decrement the character (decrement it by 1). Wrap around to the beginning (or end) as appropriate. You may need to use the analog pins to read the buttons, since most of the digital pins are used for the 5x7 display. Although the digital pins can not do analog output, the analog pins can do both digital input and output. You can use pinMode(), digitalRead(), and digitalWrite() just as you do with digital pins. For example, if an LED were connected to A1, it could be turned on via a pinMode(A1, OUTPUT) in setup() and digitalWrite(A1, HIGH). You can use the analog pins with buttons (following the same approach to set them up and debounce them as were used earlier).

  3. As you will notice as soon as you look for it, the actual font information for the ASCII characters '0' through '9' is not present in the file that we provided (the entries are all there, but they are all blank).

    Design an appropriate image for each of these characters and include it in the font file.


A few things to watch out for and/or consider:

  • It is possible to extract the individual bit information from the font file in a single line of code, if statements are not needed. Think back to your bitwise arithmetic.

    (You will not be penalized if your solution uses if statements. I’m just nudging you to try it without to begin with.)

  • Make sure you update your font file to draw numbers.

The check-in

  1. Commit your code and verify in your web browser that it is all there.
  2. Follow the checklist below to see if you have everything done before demo your assignment to a TA.

    • font.h is included and has been updated to include numbers
    • LED displays character correctly and clearly
    • All buttons are defined correctly and functioned properly
      • increment the current character by 1
      • decrement the current character by 1
    • Your sketch is able to go back to the beginning when it reaches the last character
    • Numbers 0 through 9 are valid characters that look appropriate (and have been updated in font_5x7.h)
    • All of your files are committed
  3. Check out with a TA. Make sure to show off the characters that you designed.

Things that should be present in your repo structure:

  • display/
    • display.ino
    • font_5x7.h

The rubric

  • 100pts total:
    • Display is wired correctly (25 pts)
    • The characters on the display are bright and clear and feature no flickering (15 pts)
    • The two buttons allow for incrementing and decrementing the character (15 pts)
    • The incrementing/decrementing wraps correctly at either end of the character list (10 pts)
    • Reasonable font design for characters ‘0’ to ‘9’ (30 pts)
    • Good code style/easy to grade (5 pts)

As usual, -1 points if you do not commit to Github before demoing.