Looking to add a joystick to your Arduino project but not sure where to start? Look no further! In this comprehensive tutorial, we’ll walk you through everything you need to know to get your joystick up and running with Arduino.
We’ll start with an overview of joysticks and how they work, then move on to connecting the joystick to your Arduino board. You’ll learn how to read the joystick’s input and use it in your project. We will also cover important topics like debouncing, calibration, and how to use libraries to simplify your code. By the end of this tutorial, you’ll have a solid understanding of how to use a joystick with Arduino, as well as the skills you need to apply it to your own unique projects.
Whether you’re a beginner or an experienced Arduino user, this tutorial has something for everyone. So join us as we dive into the exciting world of Arduino joysticks!
What is a Joystick?
A Joystick module typically consists of two potentiometers, one for the X-axis and one for the Y-axis, as well as a push-button switch. These potentiometers are used to measure the position of the joystick along the X and Y axes, while the push-button switch is used to detect when the joystick is pressed.
What is a potentiometer?
A potentiometer is an electronic component that is commonly used to measure or control the level of voltage in a circuit. It is essentially a variable resistor with three terminals: two fixed outer terminals and a movable middle terminal.
The potentiometer works by varying the resistance between its two outer terminals as the movable middle terminal is rotated. This variation in resistance allows the user to control the voltage level in the circuit. Potentiometers are commonly used in audio equipment, such as volume controls and tone controls, as well as in various other electronic devices where a variable voltage needs to be controlled.
In our case, we are using it to measure user input and translate into an action (moving a device, playing a videogame, etc).
How are potentiometers used in a Joystick
A Joystick will have 2 potentiometers (one for each axis along a plane). The pictures below show one of the potentiometers. As you can see, movement of the joystick leads to a rotation of the potentiometer, which as we will see later, will result in a change of the output voltage of that potentiometer, which can be used as a signal for our project.
How is the pushbutton used in a Joystick
The joystick’s body is connected to a pushbutton, so when you press down on the joystick, the pushbutton is engaged, and there is a change in voltage signal at the output pin, which we can use for our projects.
Joystick device and pins
Output Pins
VRX (X-axis output pin): This pin is connected to the wiper of the potentiometer that measures the position of the joystick along the X-axis. The voltage on this pin varies based on the position of the joystick, with the voltage ranging from 0V to the maximum voltage (5V).
VRY (Y-axis output pin): This pin is connected to the wiper of the potentiometer that measures the position of the joystick along the Y-axis. The voltage on this pin varies based on the position of the joystick, with the voltage ranging from 0V to the maximum voltage (5V).
SW (Push-button switch output pin): This pin is connected to the push-button switch on the Joystick module. When the button is not pressed, the voltage on this pin is equal to the maximum voltage (5V). When the button is pressed, the voltage on this pin is equal to 0V.
Other Pins
The GND and +5V pins are connected to GND and 5V on your Micro Controller (i.e. Arduino UNO).
Connecting Joystick to Arduino UNO
GND – Connect to Arduino GND
VCC – Connect to Arduino 5V
VRX – Connect to Arduino A0
VRY – Connect to Arduino A1
SW – Connect to Arduino IO Pin #2
First Test of Joystick with Arduino UNO
Use the code below to complete the first test of the Joystick. This code reads the X and Y values from the joystick and the state of the button and then prints these values to the serial monitor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
int xPin = A0; int yPin = A1; int buttonPin = 2; int buttonState = 0; void setup() { pinMode(buttonPin, INPUT); Serial.begin(9600); } void loop() { int xValue = analogRead(xPin); int yValue = analogRead(yPin); buttonState = digitalRead(buttonPin); Serial.print("X: "); Serial.print(xValue); Serial.print(" | Y: "); Serial.print(yValue); Serial.print(" | Button: "); Serial.println(buttonState); delay(100); } |
After running the code, open the Serial Monitor, and the output should behave as follows:
Below is an example from me moving the Joystick straight up, and another from doing nothing. It looks like some calibration might be needed. You can also see that the button also showed a change in value even though I didn’t push it. Some work needed to improve that as well.
Joystick at Center (Doing Nothing)
Joystick pushed Up
Calibrating a Joystick
Calibrating an Arduino joystick is an important step to ensure accurate and consistent readings from the joystick. Calibration involves determining the minimum and maximum values of the joystick input and mapping those values to a desired range.
From the previous example, make sure to take note of the output values for both axis when the joystick is placed left, center, right, and up, center, down. Below are my uncalibrated values:
Then copy and paste the code below and replace the first 6 constants with your values (you can see how I entered them)?
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
int xMin = 0; int xMid = 522; int xMax = 1023; int yMin = 0; int yMid = 499; int yMax = 1023; void setup() { Serial.begin(9600); pinMode(A0, INPUT); pinMode(A1, INPUT); } void loop() { int xValue = analogRead(A0); int yValue = analogRead(A1); int xMapped; if (xValue < xMid) { xMapped = map(xValue, xMin, xMid, 0, 511); } else { xMapped = map(xValue, xMid, xMax, 512, 1023); } int yMapped; if (yValue < yMid) { yMapped = map(yValue, yMin, yMid, 0, 511); } else { yMapped = map(yValue, yMid, yMax, 512, 1023); } Serial.print("X: "); Serial.print(xMapped); Serial.print(" Y: "); Serial.println(yMapped); delay(100); } |
Fixing the Push Button Variability
In order to address the issue of the pushbutton reading flickering, we will need to change the pinmode setup on our Arduino to be INPUT_PULLUP.
Pullup Pins
A pullup resistor is a resistor connected between the input pin and the positive power supply voltage (Vcc), and it serves to ensure that the input pin is in a known state when no external signal is present. When a switch or sensor is connected to an input pin configured with a pullup resistor, the input pin is pulled up to the voltage level of Vcc when the switch or sensor is open (not activated).
With the Arduino UNO, the digital pins can be configured as input with a pullup resistor using the pinMode() function. For example, to configure digital pin 2 as input with a pullup resistor, you would write:
|
1 |
pinMode(2, INPUT_PULLUP); |
When the input pin is configured with a pullup resistor, the internal resistance between the pin and Vcc is typically between 20kΩ and 50kΩ, depending on the specific model of Arduino board. This means that the input pin will read HIGH when it is not connected to anything or when the switch or sensor is open, and it will read LOW when the switch or sensor is closed.
Using this to solve our issue
In our example, we will go ahead and define the mode of Pin 2 the same way as the example above (INPUT_PULLUP). See the code below for full example and then read the results of the test via Serial Monitor. As you can see, the variability / flickering problem of the push button is now solved.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
int xMin = 0; int xMid = 522; int xMax = 1023; int yMin = 0; int yMid = 499; int yMax = 1023; int buttonState = 0; void setup() { Serial.begin(9600); pinMode(A0, INPUT); pinMode(A1, INPUT); pinMode(2, INPUT_PULLUP); } void loop() { int xValue = analogRead(A0); int yValue = analogRead(A1); buttonState = digitalRead(2); int xMapped; if (xValue < xMid) { xMapped = map(xValue, xMin, xMid, 0, 511); } else { xMapped = map(xValue, xMid, xMax, 512, 1023); } int yMapped; if (yValue < yMid) { yMapped = map(yValue, yMin, yMid, 0, 511); } else { yMapped = map(yValue, yMid, yMax, 512, 1023); } Serial.print("X: "); Serial.print(xMapped); Serial.print(" Y: "); Serial.print(yMapped); Serial.print(" | Button: "); Serial.println(buttonState); delay(100); } |
Example – Joystick with NeoRing
In this example, we will use our joystick to control individual LED lights on a NeoPixel LED Ring (by AdaFruit) with 16 LEDs. Depending on the position of the joystick, a specific area of the LED ring will light up. The main one lighting up at max intensity, and the adjacent ones with lighter intensity. If the joystick is near the center, the whole ring will light up at low intensity, and if the push button is pressed, the color that the LED lights up will change, cycling between several colors with each press of the button.
Connecting our NeoRing LED to Arduino UNO
Install Required Arduino Library
Before we can run this example, we need to install the Adafruit NeoPixel Library. See steps in the images below:
Arduino Code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 |
#include <Adafruit_NeoPixel.h> #define LED_PIN 6 //Pin connected to NeoPixel Ring #define LED_COUNT 16 //# of LEDs in NeoPixel Ring // Declare our NeoPixel strip object: Adafruit_NeoPixel pixels(LED_COUNT, LED_PIN, NEO_GRB + NEO_KHZ800); int xMin = 0; int xMid = 522; int xMax = 1023; int yMin = 0; int yMid = 499; int yMax = 1023; int buttonState = 0; float angle = 0; int n=0; int n1=0;//Value prior to n int n2=0;//Value after n int c=0;//Joystick pushbutton tracker variable int c1[6]={255,0,0,255,255,0}; int c2[6]={0,0,255,0,255,255}; int c3[6]={0,255,0,255,0,255}; void setup() { Serial.begin(9600); pinMode(A0, INPUT); pinMode(A1, INPUT); pinMode(2, INPUT_PULLUP); pixels.begin(); // INITIALIZE NeoPixel strip object (REQUIRED) } void loop() { int xValue = analogRead(A0); int yValue = analogRead(A1); buttonState = digitalRead(2); int xMapped; if (xValue < xMid) { xMapped = map(xValue, xMin, xMid, 0, 511); } else { xMapped = map(xValue, xMid, xMax, 512, 1023); } int yMapped; if (yValue < yMid) { yMapped = map(yValue, yMin, yMid, 0, 511); } else { yMapped = map(yValue, yMid, yMax, 512, 1023); } float angle = atan2(-yMapped+yMid, xMapped-xMid) * 180.0f / PI; if(angle<0){ angle=angle + 360; } if(buttonState ==0){ if(c==5){c=0;} else{ c=c+1; } } if((abs(-yMapped+yMid)>50)||(abs(xMapped-xMid)>50)){ n=round((angle/22.5)-1); if(n==15){ n1=14; n2=0; }else if(n==0){ n1=15; n2=1; }else{ n1=n-1; n2=n+1; } pixels.clear(); // Set all pixel colors to 'off' pixels.setPixelColor(n, pixels.Color(c1[c], c2[c], c3[c])); pixels.setPixelColor(n1, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(n2, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); } else{ pixels.setPixelColor(0, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(1, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(2, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(3, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(4, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(5, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(6, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(7, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(8, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(9, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(10, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(11, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(12, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(13, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(14, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); pixels.setPixelColor(15, pixels.Color(c1[c]*5/255, c2[c]*5/255, c3[c]*5/255)); } pixels.show(); // Send the updated pixel colors to the hardware. Serial.print("X: "); Serial.print(xMapped); Serial.print(" Y: "); Serial.print(yMapped); Serial.print(" | Button: "); Serial.print(buttonState); Serial.print(" | Angle: "); Serial.print(angle); Serial.print(" | n: "); Serial.println(n); delay(100); } |