/ arduino

How to create a miniature digital Billboard

Our goal is to create a miniature digital billboard that displays multiple advertisements alternately. The images will change with pre-defined delay.

Prerequisites

For hardware, I bought this micro controller and this 2.4 inch display, totalling 9.09$. The display is even a touch screen, but for this project we don't need the touch functionality. You can of course also use another microcontroller or compatible display. If you use an arduino uno for example, you can simply stick the display, which is a shield, on top of the arduino instead of soldering.

Hardware

Nano top

The microcontroller I ordered comes in four parts. We need to solder the pins to the board. If you use an arduino uno, it works right out of the box. The following image displays the assembled nano.

Nano bottom

Display top

The display works as is. You can simply plug it into the uno and are good to go. If you use the same microcontroller I am using, some wiring is necessary.

Display bottom

Software

To run anything on the microcontroller, we need to install the arduino software. Arduino has a page for installing its software on any operating system.

If you are running ubuntu, you can install the arduino software from the package repository:

$ sudo apt-get update && sudo apt-get install arduino arduino-core

The official IDE is part of the packages we just installed. You can run it by running the command arduino or from your operating system's menu.

To be able to write to the arduino output as user <username>, add it to the dialout group:

$ sudo usermod -a -G dialout <username>

Additionally, we need the correct libraries to access the display. If you need help installing libaries for arduino, see here. The default path on ubuntu is

/home/<username>/sketchbook/libraries

We need the following libraries:

  • Adafruit GFX, the core graphics library for the display
  • SWTFT, an adaptation of the Adafruit TFTLCD library. This is the actual library to access the display. For the display I ordered, I need the SWTFT library, but depending on your display you might need the original Adafruit TFTLCD library. But you only need either SWTFT or Adafruit TFTLCD.

Wiring

Connected front

To know which pin of the microcontroller we need to connect to which pin of the display, I took the uno and checked which pins the shield used there. See table below.

Connected back

How to connect the pins between the arduino and the display
Arduino Display
A0 LCD_RD
A1 LCD_WR
A2 LCD_RS
A3 LCD_CS
A4 LCD_RST
D2 LCD_D2
D3 LCD_D3
D4 LCD_D4
D5 LCD_D5
D6 LCD_D6
D7 LCD_D7
D8 LCD_D0
D9 LCD_D1
D10 SD_SS
D11 SD_DI
D12 SD_DO
D13 SD_SCK
3V3 3V3
5V 5V
GND GND

Testing the Setup

Connect the microcontroller with your computer via USB and start the arduino IDE (run arduino). If you use the uno, the correct board should be pre-selected, but you can double check. If you use the controller I ordered, set it to Arduino Nano w/ ATmega328. Now load the graphics test from the library (libraries > SWTFT > graphicstest) and upload it. Your display should show the graphics test. You can follow the steps in the serial monitor if you like.

If you don't see the graphics test, you have to fix your setup before continuing.

Displaying Adverts

See my github repository TFT-Billboard. Code adapted from tftbmp (SWTFT, orig. Adafruit).

Do the following to try my patch:

  • Copy the BMPs inside the graphics directory to the micro SD card's root directory.
  • Insert the micro SD card into the display.
  • Upload my patch unmodified onto the micro controller.

After the RGB start screens, you should see three images alternating on the display. If you do, you can start experimenting from here.

At the start of the patch, two constants are defined that alter the behaviour of the billboard: DELAY and IMAGE_COUNT. DELAY is the delay in between two consecutive images in milliseconds. IMAGE_COUNT equals the number of images on the SD card. Change it to the number of images you want to display.

Preparing the Images

The images' names must be two digits starting with one and ending in .bmp (e.g. 01.bmp, 02.bmp, …, 19.bmp, and so on). The total number of images should equal the IMAGE_COUNT defined in the patch.

I used gimp for preparing the images. They have to be:

  • BMP images
  • 24bit (this is important)
  • 240x320px (portrait)

I could not find an efficient way to display landscape images correctly and fast enough on the display. As a workaround, I rotate them 90° and store them in "portrait", then rotate the display. The example images in the graphics directory are stored that way.

Wrapping up

If you have any suggestions please contact me. Also, if you built anything using this guide, please send me images or videos. I would love to see your work!

Martin Schenck

Martin Schenck

Martin is CTO of PlugSurfing. He pioneered in the European e-mobility market by technically commanding PlugSurfing since 2013. PlugSurfing is Europe's leading e-mobility service provider.

Read More