This article includes additional downloadable resources.
Please log in to access.

Learn about how to use DIYsplay in your projects in a few minutes and create awesome graphical displays! - by Liam Davies

Recently, we introduced our first real physical product - the DIYsplay! We’ve spent a number of months developing it in collaboration with 4D Systems, and last month, it finally went on sale. We didn’t expect them to sell out quite so quickly, so we ordered a bunch more!

In the meantime, we're making some more projects to show off the fancy screens included with the DIYsplay. This month, we're learning how to build a basic DIYsplay program and add some useful information to it with two projects.
Let's dig in!

Project 1: The “Hello World”

Parts Required	Jaycar	Altronics	Pakronics
1x Arduino Compatible Uno R3	XC4410	Z6240	ARD-A000066
1x Breadboard	PB8820	P1002	PAKR-A0066
1x Jumper Wires*	WC6027	P1017	ADA1957

Parts Required

You'll also need a DIYsplay - head to diyode.store to order yours!

This project is the simplest, and will help get you started with the DIYsplay even if you have little experience with electronics.

DIYsplay should work with most Arduino boards on the market, although we recommend using an Arduino Uno or Nano to get started. You’ll need a few jumper wires to connect to the DIYsplay.

You can use a breadboard, or directly connect the DIYsplay to the Arduino. Simply connect the wires up as follows, or if you’d prefer we also have a Fritzing diagram that should help!

	Arduino Pin	DIYsplay pin
5V Power	5V	5V
Ground	GND	G
Sig pin	D3 (Pin 3)	SIG
Reset pin	D4 (Pin 4)	RES
RX line	D5 (Pin 5)	SW
TX line	D6 (Pin 6)	RX

You can see we’ve connected the left side of wires first, then the right. The wire colour may not match what we have in the Fritzing diagram but it doesn’t matter - as long as they’re connected in the same way, everything should work without too many dramas.

Note: The green wire in this photo has been misplaced. Please refer to the Fritzing diagram to correctly wire up your DIYsplay.

Once you’re sure you’ve connected everything correctly, feel free to plug in your Arduino to the USB port on your computer and check that the DIYsplay logo appears on the screen. It may flash a few times before starting, but once it’s going it should stay on. Great, our DIYsplay is all working! On your computer, be sure that the Arduino IDE (Integrated Development Environment) is installed. If not, head over to https://www.arduino.cc/en/software and install the IDE.

We prefer the newer Arduino IDE 2.0 which can be installed from the aforementioned link and also includes code suggestions and a cleaner interface, however the process of installing the DIYsplay library will be mostly identical in both 2.0 and previous versions.

DIYsplay has been built to make displaying your information of choice as simple as possible. To install the required Arduino library, head to Tools > Manage Libraries and search for DIYsplay in the Arduino IDE library manager. Click Install and click Install All if the Arduino IDE asks if you want to install dependency libraries.

And boom! The code libraries you need are installed. Now time to set up a basic screen.

Before switching between the screens and changing the widgets displayed on them, you will need to include the DIYsplay library and initialise a DIYsplay object within your code. These lines of code should be at the top of your file:

#include "DIYsplay.h"
DIYsplay diysplay = DIYsplay();

This code includes all of the code needed to run the DIYsplay, and starts up an 'instance' of the DIYsplay so it can be accessed by our code. It assumes you've connected the physical pins as above. Great, all we need to do is put this code into our setup() function like this:

void setup() {
    diysplay.begin();
}

Let’s set the current screen to a digital clock and then set the time as an example. Because there are over 70 different screens preloaded on the DIYsplay, we’re not going to leave you with a big list of screen names and say “Good luck!”. We’ve been hard at work putting together some (hopefully) helpful documentation. You can find the links to it all at the end of this project. For each screen, we show you how to switch to that screen, and also put data on it.

Let’s look at the documentation for the DIGITAL_CLOCK page.

First of all, we need to change the screen by using the setScreen() function. This needs to be called before changing any of the screen elements on the DIYsplay.

void setup() {
    diysplay.begin();
    diysplay.setScreen(DIGITAL_CLOCK);
}

Your IDE software may suggest all of the screens available as you type this code, and all are in capital letters to be properly identifiable.

After that, we can use the setData() function to set numbers, text and more depending on what type of screen we’re using. You can see in the code example below, we want to set the first digit to 2 - as in 2PM. The first setData() function accomplishes this, but you may notice a ‘0’ in front of the ‘2’. This first number is the index, which can be used to modify any widget on a screen. This screen has four widgets, which means we can access all widgets by calling setData() on with any number from 0 to 3. If you’re new to programming, the Arduino language usually likes to use 0 for the first element of anything, and goes up by one from there.

We can then set the minutes place, which we’re setting to ‘30’ here. Again, our index is ‘1’ since that’s the second element of the digital clock.

void setup() {
    diysplay.begin();
    diysplay.setScreen(DIGITAL_CLOCK);
    diysplay.setData(0, 2);
    diysplay.setData(1, 30);
}

Time to upload and give it a go! Make sure your COM port is set correctly, which can be found at the top of the screen either under the COM port dropdown or under the Tools menu. Only COM ports that are recognised will appear, so it shouldn’t be too hard to find the one that corresponds to your Arduino.

Press the “Upload” button in the Arduino IDE and make sure the lights on your Arduino are blinking rapidly. After it’s completed, make sure the DIYsplay logo appears, and with any luck you’ll see our new clock with 2:30:00 pop up on the screen! If you run into any problems during this process, have a read through the troubleshooting section at the end of this project.

Awesome! Let’s improve on our clock by setting our “seconds” position and adding some text in the text area:

void setup() {
    diysplay.begin();
    diysplay.setScreen(DIGITAL_CLOCK);
    diysplay.setData(0, 2);
    diysplay.setData(1, 30);
    diysplay.setData(2, 51);
    diysplay.setData(3, "Hello World!");
}

At this point, it should be clearer as to what this code does. We’re setting 51 to our seconds counter, and writing “Hello World” to the text area. Of course, these are arbitrary values so feel free to experiment and try some of your own.

Unfortunately, this clock only has fixed text at the moment and doesn’t update in realtime. If you’d like to do this, we’d encourage you to try using the millis() function, which returns the number of milliseconds since the Arduino started running. If that still isn’t good enough, go to the File > Examples > DIYsplay > DigitalClock and use a Real-Time Clock module to get accurate real-world time!

Project 2: Ultrasonic Ruler

Additional Parts Required	Jaycar	Altronics	Pakronics
1x HC-SR04 Ultrasonic Module	XC4442	Z6322	ADA4019

Additional Parts Required

Measure distance wirelessly without a tape measure with this handy gadget. We’re using the inbuilt ruler screen on the DIYsplay to display a distance measurement. To actually get the distance, we’re using a HC-SR04 ultrasonic sensor, which can be found almost anywhere so there’s a good chance you already have one!

Don’t disassemble the “Hello World” project yet, as we’ll be using its wiring for the DIYsplay. All of the other projects will follow suit. To wire up the Ultrasonic sensor, it needs four pins. Two of these are Ground and 5V, which we connected to the top and bottom left DIYsplay breadboard pins respectively. You can put these anywhere which have 5V and Ground.

The other two pins on the ultrasonic module are the Echo and Trigger pins. If you’ve never used these ultrasonic modules before, it may seem mysterious as to what these pins actually do. As it turns out, it’s actually much simpler than you might expect. We talked about this a few months ago in our ATTiny10 tutorial, but we’ve included the diagram here again:

The Trigger pin sends out a signal to create pulses on the ultrasonic emitter, which bounces off whatever is in front of the sensor. Depending on how long it takes to return - due to the speed of sound in air - we can figure out the distance of the object. The Echo pin emits a pulse whose duration is the time in microseconds it took for the ultrasonic pulse to return.

#include "DIYsplay.h"
DIYsplay diysplay = DIYsplay();
#define ECHO_PIN 9
#define TRIG_PIN 8
void setup() {
  //Initialises the ECHO and TRIGGER pins.
  pinMode(ECHO_PIN, INPUT);
  pinMode(TRIG_PIN, OUTPUT);
  //Starts the DIYsplay.
  diysplay.begin();
  diysplay.setScreen(RULER_GAUGE_TAPE_COMPASS);
}

The code above is responsible for setting up the Arduino to talk to both the Ultrasonic Sensor and the DIYsplay. You can see we’re defining ECHO_PIN and TRIG_PIN, which can be changed as needed if you’re running the ultrasonic sensor on a different set of pins.

The setup() function sets the pin modes for these ultrasonic pins, and starts up the DIYsplay. We’re using the RULER_GAUGE_TAPE_COMPASS screen, which is a multi-purpose screen that has a ruler overlaid with a bar graph and a four-digit numerical display.

void loop() {
  //Create a trigger pulse.
  digitalWrite(TRIG_PIN, LOW);
  delayMicroseconds(2);
  digitalWrite(TRIG_PIN, HIGH);
  delayMicroseconds(10);
  digitalWrite(TRIG_PIN, LOW);
  …

If you’re still new to Arduino programming, the loop() function runs constantly after the setup() function has finished. After running everything in loop(), the Arduino goes back and runs loop() again, which continues indefinitely.

The first thing we’re doing in our loop function is creating a pulse on our Trigger pin. We first need to turn the pin off (or LOW as Arduino calls it), which will ensure that if we had the pin on previously - from our last loop - we get a nice clean pulse to the Ultrasonic module. Then, we turn the pin on (‘HIGH’) and wait 10 microseconds before turning it off again. After we’ve done this, the Ultrasonic module has realised it needs to send out some ultrasonic waves and wait until they come back.

When they do, we need to measure the pulse the ultrasonic module sends:

  …
  //Calculate the distance to the object we hit.
  double duration = pulseIn(ECHO_PIN, HIGH);
  double distance = duration * 0.034 / 2.0;
  …

The pulseIn() function waits for a pulse to appear on ECHO_PIN, and measures how long it is in microseconds, which we store in the variable ‘duration’. Since we know the speed of sound (340 meters per second), given that we know the time it took to go to the object and back, we can calculate the distance fairly easily and store it in the distance variable - this is in centimetres.

We promise this is the last chunk of code! We can now put these values on the DIYsplay. The widget at index 0 is the four-digit number at the top of the screen. You can see we’re multiplying the number by 10, which we need because we have a decimal point. For example, if we wanted to display 23.4 on the widget, we would need to pass 234 instead.

Finally, we can set the ruler value. Since it only has a range of 0-100, we need to ensure the value we pass in doesn’t go over that with the constrain() function.

  …
  //Write the data to the DIYsplay.
  diysplay.setData(0,distance * 10.0);
  distance = constrain(distance, 0, 100);
  diysplay.setData(1,distance); 
  delay(100);
}

After the code is written, upload it to the Arduino and start experimenting! We found it works best if the distance measured is anywhere between 10cm and 2 metres. The ultrasonic module does work outside of this range, however it becomes less reliable and outputs spurious results.

You may wish to average multiple readings to get a better result, or slow down the sampling time so the text is easier to read!

DIYsplays are now available on the DIYODE store, so head over to diyode.store and grab yours now!