Visuino: Moving Servo Via Nextion Slider

HMI solution are always good option to interact with machines. which also makes projects interesting so here is an tutorial for controlling servo motor with the help of nextion slider.There are many Display options for adding graphical user interface to Arduino boards. Most of them however require considerable amount of memory, and processing time, and are not suitable for Arduino boards with limited memory, and processing power such as Arduino UNO or Arduino Nano. When the memory is limited, and an advanced user interface is needed, the Smart Programmable Serial Nextion Displays are a popular choice. The Itead offers a free Graphical Nextion Editor for designing the user interface of the display.

I would like to thanks again to Boian mitov for making things happen through his efforts to turn technologies simple.

https://www.visuino.com/

Step 1: Components Required

Hardware needed:

Arduino uno ( or any other arduino microcontroller board)
Micro servo motor 9g
Nextion Serial Interface Smart Display(In my case nx3224t028_011)
Jumper wire
usb type A to B cable
breadboard
To program the display you will also need a 5V USB to TTL Serial Converter Module

Softwares needed( All latest versions)

Arduino IDE 1.6.8 or higher release
Nextion editor v0.43
Visuino 7.8.2.102

Step 2: Circuit Connections

Connections of servo are shown in the image attached , make sure connections are right and here control pin of servo is labed as orange.

circuit connections:

between servo and arduino uno

control pin of servo to digital pin 2
vcc-----vcc
Gnd-----Gnd

Between arduino and nextion

vcc----vcc
Gnd---Gnd
Tx of arduino------Rx of nextion
Rx of arduino------Tx of nextion

To program the Nextion Display with the Nextion Editor you need to connect it with a USB to TTL Serial Converter to your computer or transfer tft file to sdcard .

Connect the Nextion Wires Connector to the Display .
If your USB to Serial Module is configurable, make sure it is set to provide 5V power .
In my case I needed to configure it with a power selection jumper)Connect the Ground Wire (Black wire) from the Nextion Display to the Ground pin of the USB to TTL Serial Converter Module .
Connect the Power (+5V) Wire (Red wire) from the Nextion Display to the Power(VCC/+5V) pin of the USB to TTL Serial Converter Module .
Connect the RX Wire (Yellow wire) from the Nextion Display to the TX pin of the USB to TTL Serial Converter Module .
Connect the TX Wire (Blue wire) from the Nextion Display to the RX pin of the USB to TTL Serial Converter Module .
Connect the USB to TTL Serial Converter Module to the computer with a USB cable .

you can make use of breadboard to make multiple vcc and gnd connections.

Step 3: Designing Nextion Slider Component

please follow the video tutorial.

remember to add and generate font otherwise project will not compile.

you have to add only one slider component and one text components(only if you think) and arrange its attributes as shown in images.
After compiling open build folder and copy the tft file generated to fat32 formatted sdcard and transfer it to nextion display.power it on and wait for update to complete then power it off and remove sdcard.

To program the Nextion Display, you will need to Download and Install the Nextion Editor.

Start the Nextion Editor
From the Menu select |File|New| .In the "Save As" dialog, type project file name, and select a location to save the project .
Click on the "Save" button In the "Settings" dialog, select the Display type (In my case nx3224t028_011)

Click on the "DISPLAY" tab on the left to show the Display settings (Picture 4)Select Horizontal orientation for the display
Click on the "OK" button to close the dialog .

open the attached file in nextion editor and compile it , then open build folder and copy the servo tft file and transfer it to sdcard .