PCBWAY PCB Manufacturing

PCBWAY Christas PCB Manufacturing

Advanced PCB Manufacturing
Advanced PCB Manufacturing


Gearbest Tronxy X8 220 x 220 x 200mm Desktop DIY 3D Printer
Tronxy X8 220 x 220 x 200mm Desktop DIY 3D Printer only $139.99

Gearbest Hubsan H117S Zino GPS 5.8G 1KM FPV with 4K UHD Camera 3-Axis Gimbal RC Drone - RTF
Hubsan H117S Zino GPS 5.8G 1KM FPV with 4K UHD Camera 3-Axis Gimbal RC Drone - RTF only $394.99

Gearbest 37-in-1 Sensor Modules Kit
37-in-1 Sensor Modules Kit only $13.99

Menu with voice & rotary encoder

rotary encoder menu arduino


So, today we will look at a very simple but interesting project. We will use this rotary encoder to scroll through the menu, this LCD to print the text using i2c communication, this DFplayer module to play sounds and an amplifier with a speaker. That’s it, that’s all we need for this project.
I will first show you how a rotary encoder like this one works, how to use it to encode the position for the menu and use it to scroll up and down. Then we will talk about the LCD screen controlled with i2c communication so we won’t need a lot of wires. We will talk about the library used for this LCD but also how to create special characters like for example an arrow, a musical note and so on, because those special characters are a little bit more difficult to create. Finally, I’ll show you how to use this DF player to play mp3 sounds and amplify the sound using a cheap sound amplifier. So, let’s get started.

1. Part list

You have a full list with all the parts that you need for this project below. You could use any other type of components that work the same as this do. The LCD screen has an i2c module soldered to it so we could control it using just 2 wires, SCL and SDA for clock and data. The DF player is so easy to use with the UART serial comunication pins, Tx and Rx. It can play directly mp3 files so no conversion is needed. We will use the libraries for this 2 modules. The rotary encoder is the most one you will fond there. It only needs 3 pins to encode steps and position.

rotary encoder menu arduino

Full part list here

2. The rotary encoder

So, we will do this project step by step. If you want you could jump directly at the final project but first I want to show you how each element works.

Let’s start with the rotary encoder. The component below is the most basic rotary encoder that you will find there. It looks like a potentiometer but it is not. It can detect rotation steps, direction of the rotation and it also has a push button inside. So is the perfect component for a menu to scroll up and down and also to select using the push button.

rotary encoder menu arduino

So here is how this works. Inside we have a perimeter of copper connections like the ones below. The more connectors we have the better is the precision of the encoder. We also have two connectors that will be two of the encoder pins outputs and we name those clock and data. All of the internal connecters are connected to ground and to the clock and data outputs we will add a 10k pullup resistor like this. So right now the pins are not touching the internal copper connectors so the voltage at the output is 5V since we have the pull up connected top that voltage. But when we start rotating the encoder to the right, the clock output will touch one of the connectors and the output at the clock pin will be now ground but the data pin is still 5V.

rotary encoder inside

We keep rotating till the data pin will also be ground. So, all we have to do in order to know the rotation direction is to know which pin is switched to ground first. If is clock than data we are rotating to the right and if is data then clock we are rotating to the left and each time one of the pins change its value from ground to 5V or from 5V to ground we count one step.
In the code we will also save the initial position of the pins and then just detect any change in that position.

So that easy we can count steps and detect rotation direction, so when we are rotating to the right we increase steps and when rotating to the left we decrease the steps values.

2.2 Rotary encoder example

One important thing about encoders is that the connecter has to be bigger than the pins and the space between connectors as well so in a certain moment both pins could fit on to the metal connector, because if not we wouldn’t be able to detect direction only count the steps.

So now that we know how this works let’s make the connections to the Arduino and run the first example code of this tutorial. I’ll connect the clock pin to digital pin 8 and the data to digital pin 9 as you can see below. Remember to add two pullups resistors of 10k between each pin and 5 volts and connect ground to the middle pin of the encoder. We won’t connect the push button for this example.

rotary encoder inside

Ok so the code is more than easy. We read the state of the clock pin. If the detected state is not the same as the last state that we had a change. But if the state is the same, well, we don’t do nothing. So now we check the state of the data pin. If is different than the clock pin then we are rotating to the right and if it the same we are rotating to the left increasing or decreasing the counter value.

Download rotary encoder example code here

Finally, we print the values on the serial monitor. The final code is made with pin interruptions instead of digitalRead in the void loop in order to make sure that we won’t lose any step. Upload the code and open the serial monitor. As you can see I start rotating the encoder and I increase or decrease the counter value. Easy right?

rotary encoder inside

Go to the next part, the LCD control