Skip to main content
Analog Joystick with two axes (horizontal/vertical) and an integrated push button.

​
Pin names

​
VCC
Power
Positive power supply
​
VERT
Analog Output
Vertical axis output (analog)
​
HORZ
Analog Output
Horizontal axis output (analog)
​
SEL
Digital I/O
Push button
​
GND
Ground
Ground
The idle position voltage is VCC/2. Moving the joystick along the vertical axis changes the voltage of the VERT pin from 0 volts (bottom) to VCC (top). Moving the joystick along the horizontal axis changes the voltages of the HORZ pin from 0 volts (right) to VCC (left). The SEL pin is normally open (floating). Clicking on the center of the joystick shorts the SEL pin to ground. The joystick’s button simulates bouncing by default. You can disable bouncing by setting the “bounce” attribute to “0”.

​
Attributes

​
bounce
string
default:""
Set to “0” to disable bouncing

​
Operating the Joystick

You can operate the joystick with your mouse by moving cursor over the joystick. You’ll see four arrows, corresponding to the four movement directions, and a circle in the middle. Click on one of the arrows to move the joystick shaft in that direction, and on the circle in the middle to press the joystick’s push button (connected to the SEL pin). To operate the joystick with the keyboard, first focus on it (using the tab key or by clicking on it with the mouse), then use the arrow keys to move the shaft of the joystick, and the space key to press the joystick’s push button (connected to the SEL pin). It’s possible to combine multiple keys at once, e.g. left arrow and top arrow, to move the shaft in a diagonal direction. You can also press on the space key while holding down the arrows to press the joystick while moving the shaft.
Partial movement and touch control are not currently supported. We’d love to see them supported though - so if you are up to the task, there’s an open issue waiting for your love.

​
Using the Joystick in Arduino

Joystick PinArduino PinsExample code pin
VCC5V
VERTany analog pin (A0…A5)A0
HORZany analog pin (A0…A5)A1
SELany digital pin2
GNDGND
To use the Joystick in Arduino, connect the VERT and the HORZ pins to analog pins (A0…A6), and configure these pins as input. Read the joystick position using analogRead(). 
#define VERT_PIN A0
#define HORZ_PIN A1
#define SEL_PIN  2

void setup() {
  pinMode(VERT_PIN, INPUT);
  pinMode(HORZ_PIN, INPUT);
  pinMode(SEL_PIN, INPUT_PULLUP);
}

void loop() {
  int vert = analogRead(VERT_PIN);
  int horz = analogRead(HORZ_PIN);
  bool selPressed = digitalRead(SEL_PIN) == LOW;
  // horz goes from 0 (right) to 1023 (left)
  // vert goes from 0 (bottom) to 1023 (top)
  // selPressed is true is the joystick is pressed
}

​
Joystick Position Table

The following table shows the different joystick position and the corresponding HORZ / VERT values, as returned by analogRead():
PositionHORZVERT
Top-Left10231023
Top5121023
Top-Right01023
Left1023512
Center512512
Right0512
Bottom-Left10230
Bottom5120
Bottom-Right00

​
Using map()

You can use the map() function to re-map the values to a different range. For instance, map(analogRead(HORZ_PIN), 0, 1023, -100, 100) will return -100 when the joystick is all the way to the right, 0 when the joystick in centered, and 100 when the joystick is all the way to the left.

​
Automation controls

The joystick can be controlled using Automation Scenarios. It exposes the following controls:
​
x
float
Set the x value of the joystick (-1 to 1, 0 is centered)
​
y
float
Set the y value of the joystick (-1 to 1, 0 is centered)
​
pressed
int
Set to 1 to press the button, 0 to release it.

​
Simulator examples

  • Etch-a-sketch - A simple drawing game using a MAX7219 LED Dot Matrix

Build docs developers (and LLMs) love

Get started for freeTalk to us