[adrotate banner=”7″]

 
Today we are going to use an Arduino and a rotary encoder to build a simple menu on a Nokia 5110 LCD display. Lets get started, Hello guys. I am Nick and welcome to educ8s.tv a channel that is all about DIY electronics projects with Arduino, Raspberry, Pi, ESP8266 and other popular boards. Subscribe to the channel. Now, if you dont want to miss any future videos. In this video, we are going learn how to build our own menu for the popular Nokia 5110 LCD display in order to make our projects more user friendly and more capable.. We have built a similar project in the past, but a lot of the viewers of the channel suggested that I should prepare another video on this subject.. This time we are going to use a rotary encoder instead of push buttons.. Also the menu we are going to build today has more items to choose. From. Lets watch it in action.. This is the project we are going to build. In the display. A simple menu appears and with the help of the rotary encoder, I can navigate up or down and select a menu item by pressing the rotary encoder button.. The menu has 6 items and we can scroll down or up the menu and the items on the display will change. Accordingly. Lets select the first option.. As you can see, a new a UI screen is displayed and by rotating the rotary encoder shaft, we can change the contrast of the display.

. If we press the rotary encoder button again, we go back to the main UI screen.. The second menu item offers a similar functionality. It modifies the volume variable.. If we now select the third menu item and press the button, we can change the language value.. I have not implemented this functionality. This is just a demo project.. A similar functionality is attached to the 4th menu item, which is called difficulty.. We can disable the backlight of the display if we wish, by selecting the 5th menu item, or we can reset everything to its default value with the 6th menu item.. Of course, you can modify it to build your own, more complex menus. If you wish. Lets now see how to build this project.. The parts needed in order to build this project are the following: An Arduino Uno or any other compatible board. A Nokia 5110 LCD display A rotary encoder, A small breadboard, Some wires. The cost of the project is very low. It is less than 10.. You can find links for all the parts I use in. The description of the video below. Lets now connect all the parts together. Before building this project. If you havent used a rotary encoder in the past, I encourage you to watch the tutorial. I have prepared about rotary encoders.. It will help you understand how rotary encoders work and you are going to gain some experience with them. Click on the card here. If you want to watch it now.

, I have placed the display on a small breadboard like this. Lets. First connect the display., The first pin of the display, which is Reset, goes to digital pin, 3 of the Arduino Uno. The second pin goes to digital pin 4. The third pin goes to digital pin 5, the fourth pin to digital pin 11 and the fifth pin to digital pin 13.. The next pin is Vcc.. We connect Vcc to the positive rail of the breadboard and the breadboard positive rail to the 3.3V output of the Arduino.. The next pin is Backlight for the display., Since we want to control it via the software. We connect it to digital pin 7.. The last pin is GND.: We connect GND to the negative rail of the breadboard and the negative rail of the breadboard to Arduino GND.. Now all we have to do is to connect the rotary encoder.. The first pin is GND and we connect it to negative rail of the breadboard.. The next pin is Vcc and we connect it to the positive rail of the breadboard.. The next pin is SW and we connect it to Analog Pin 2.. The next pin is named DT and we connect it to Analog Pin 1.. Lastly, the pin CLK is connected to Analog Pin 0.. You can find the schematic diagram of this project in the description of the video below.. Now we are ready to power up the project.. As you can see, the project is working, fine and the menu is working.

As expected. Great lets now see the software of the project.. The code of the project is complex, but I will do my best to explain. It., You will get a basic understanding of how the code works, but if you want to fully understand it, you have to make your own menu and see exactly how it works. Lets start.. In this project we use 4 libraries.. We use two libraries for the display and two for the rotary encoder.. You can find links for all the libraries in the description of the video below. At first, we are going to take a look at the drawMenu function.. This function is responsible for drawing the Menu on the display.. This function is called every few milliseconds, so if there is a change on the menu, this function is responsible for updating the menu on the screen.. There are also 3 very important global variables. The variable page, the variable menuitem and variable frame., The variable page remembers, which UI screen is displayed on the screen.. So if the page variable is 1, we are in the main UI screen and if the variable is 2, we are in the secondary UI screen where we set the value on a variable.. The menu item remembers the selected menu item.. So if its value is 1, the first menu item is selected, so the drawMenu function must draw this menu item as black with white letters.. If the menu item is 2, the second menu item is selected and so on.

. The frame variable remembers, which part of the menu is displayed on the screen. Since the menu we have created contains 6 items, and we can only display 3 of them at a time. We need to know which items are displayed on the screen.. The frame variable tells us exactly this.. If the frame variable has the value of 1, we display the first three menu items. If it is 2, we display items 234 and so on.. I tried to make the code as easy as possible to modify so I have created some global variables that hold the names for the menu items.. This way you can create your own menus easily without searching in code.. At first, we initialize all the global variables that are needed in the code.. Next, we initialize the display. In the loop function. At first we call the drawMenu function to draw the menu on the screen.. Then we read the value from the Rotary encoder and check if the button is pressed.. For example, if we are on the main UI screen and the first menu item is selected. If the value from the rotary encoder has increased the menuitem variable increases and in the next loop, the drawMenu function will draw the second menu item as selected.. If we now press the button of the rotary encoder, we navigate to the second page, where we set the value of the variable. Again using the rotary encoder, we can increase or decrease the value of the variable.

. If we press the button, we navigate back to the main menu page and page variable, decreases. Thats, the basic idea behind this menu.. We follow the same procedure for all the menu items and pages. The code is complex. It is over 400 lines, long., It seems complicated, but if you try it yourself, you are going to understand it more easily and you will be able to change it, expand it and use it in your own projects.. As always, you can find the code of the project in a link in the description, below. Thats it now. We know how to build complex menus either with or rotary encoder or with buttons.. I personally prefer buttons for my menus, but in some cases a rotary encoder is easier to use.. I would like to hear your opinion about this.. Do you prefer buttons or a rotary encoder to navigate through your menus? Please post your comments in the comments section, below. and dont forget to like the video and share it with your friends. If you find it interesting, Also consider subscribing to the channel and do click that bell or YouTube might not show you updates. As new videos come out., If you are going to be shopping for parts check out the affiliate links from the video description. Thats it for today guys thanks you very much watching.

 
 

[adrotate banner=”1″]

arduino encoder library Video

[mam_video id=ak5TsUFhyf8]

 

 

[adrotate banner=”2″]

 

[mam_tag id=3488]

 

 

[adrotate banner=”3″]

 

arduino encoder library news

 

 

 

 

 

[adrotate banner=”4″]

 

 

arduino encoder library Social

 

 

[adrotate banner=”5″]

 

 

official.arduino
2019-10-02T19:32:52+0000

👋 Want to bring Tony Stark-like gesture control to your projects? Learn how with the BLE-enabled MKR WiFi 1010 and Nano 33 BLE Sense boards using the ArduinoBLE library.
official.arduino
2019-10-02T19:08:01+0000

Arduin-yo ho ho! A fairground favorite, the pirate ship is a fun way to explore the oscillation of a pendulum. How much fun, you ask? Access our Science Kit Physics Lab preview and see for yourself: http://bit.ly/2oC6L0Q

🔬 Now that you’ve gotten your feet wet, dive into the kit and enjoy all nine experiments. Order yours today: http://bit.ly/2MnQ7fr

Most Parts- GPS Clock

COMedia C328-7640 Serial Camera First Image

 

[adrotate banner=”6″]