@tutorial: Menu with voice & rotary encoder

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

External Link: https://electronoobs.com/eng_arduino_tut22.php

by: ELECTRONOOBS on 2026-06-16

~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.

Arduino NANO: LINK eBay

i2c LCD: LINK eBay

DFplayer: LINK eBay

Resistors: LINK eBay

Rotary encoder: LINK eBay

15W amplifier: LINK eBay

Proto PCB: LINK eBay

Speaker: LINK eBay


You have the full part list above.


~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.

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.

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.

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.

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?

~3.1 I2C LCD control

Now let’s put the encoder aside and talk about the LCD screen. Usually you could control these LCDs by connecting all the data pins on the back. But to keep it all simple and only use 2 pins, this LCD has an i2C module soldered to it. Connect the data and clock pins to analog pins A4 and A5 as in the schematic below and let’s look over the code.


First download and install the i2C liquid crystal library below and install it to the Arduino IDE. Without this library, the code won’t work.

Ok, inside the code we first import the library. We define the slave address for the screen which is usually 0x3f or 0x27 in hexadecimal. So, if your screen doesn’t work try both of this slave addresses. Inside the setup loop we use the init and backlight function to start the LCD and power on the backlight. Now let’s print something. We clear the LCD, set the cursor to the first row and second column position and write ELECTRONOOBS. Now we set the cursor to the second row and write hello world. Add a delay, upload the code and let’s see the results. There you go, easy right. Now let’s create those special characters.


~3.2 Special characters

I want to draw the musical note and the arrow symbols. If we look close enough to the LCD screen we can see that each character is made of a square of 7 by 5 small dots. The photo below will be our 7 by 5 dots. Let’s say we want to draw the arrow. The first row has nothing so we have a binary 0. The second row has one dot in the third position se we have a 100 which in hexadecimal is a 4. The third row has a 110 which is a 6 and the forth has a full line of ones which is 1F in hexadecimal. Then everything is repeating. So, to draw this symbol we have to send to the screen 0, 4, 6, 1F, 6, 4 and another 0.

So, in the code I create a new byte called arrow and the vector will be these numbers. Then in the Setup loop I create the symbol using the create Char function and give to it the 0 direction. Now in the loop I use the lcd dot write function to send the 0 character I’ve just created. Add a delay, upload the code and there you go.

I’ve got the arrow symbol printed on the screen. Do the same for any symbol that you want. You could even create two symbols that when put together create a unique symbol. That’s it. Let’s put the LDC aside and now look on how the DF player works.

~4.1 DFplayer Mp3

This is the module that we will use and the scheamtic below are the connections that we need. The speaker output, the serial communication and the power supply. We need to add the 1k resistors between the RX/TX serial communication Arduino pins and the module, because if not there will be a hiss noise when playing the sound. I don’t know why is that but the 1k ohm resistor fixed the problem.

DFplayer Arduino menu schematic
DFplayer Arduino menu schematic

We also need a micro SD card to store the MP3 files. On this SD card we have to put the files as this. On the SD card create a folder named mp3 and we start with file 0000, then file 0001, 0002 and so on. I’ve created my files using a webpage that will pass text to female robotic voice.


Ok, make the connections above between the module and the Arduino. At the output I’ve added a simple audio amplifier. Add a small speaker, connect 3 push buttons and upload the next code.

First, we need to install the DF player library. Download it from a link below and install it on your Arduino IDE. In the setup loop we define the pins fort the push buttons and prepare the audio module. To play the sounds we use the playMp3 folder track and select the file number where track one represents file 0000 on the SD card and so on… Each time I press a button a different sound will play. Upload the code and let’s see the results.


There you go. Now we know how everything works for this project.

~5.1 Final project

Now we know how everything works for this project. In the final code I merge everything together. Use this final schematic that you could find below. Have it in front of you and make all the connections. In the code depending on the position encoded with the rotary encoder we navigate throw the first menu. Pushing the button, we select the menu and enter the second menu. My example is just two menus deep but you could go to even more.

Download the audio files for the menu below. Also download the final code below. In this code the step detection is made with pin interruption on D8 and D9. Read all the comments in the code in order to understand all the parts. Change the text of the menu if you want.

There you go my friends. I’ve got my scrolling voice menu and also with special characters. I can select my coffee then the sugar level. I can also activate or des-activate the LCD light or set the voice volume. You can make your own menu with different text and different actions. Check all the extra information in the code.


If you would like to help my projects like this one, I have a Patreon campaign. The link is down below. I would really appreciate that guys. I hope that you’ve enjoyed this tutorial. If so don’t forget to click the like button like crazy and share the video with your friends. If you have any question about this video or any other, just leave it in the comment section below or on my Q&A page. Also, don’t forget to subscribe and watch all of my other great tutorials. Remember, if you consider helping my projects check my Patreon page as well. Thanks again and see you later guys.

Leave a comment

Please login in order to comment.

Comments

ADVERTISERS
ADVERTISERS
PCBWAY