Introduction: Play Songs Using Stepper Motor!!

About: Computer enthusiast. Movie lover. Game lover. Loves to make things.

This project is about designing a simple dynamic interface, which will allow to interact with a stepper motor in two different ways.

The first interface will control the direction and speed of the stepper motor through the use of a simple GUI,which have left and right arrows for the direction, and up and down arrows for the speed.

The second interface will be more musical in nature which will allow to play simple songs using the rotational sounds of the stepper motor.

Step 1: Parts Required

  1. Arduino UNO (or compatible board)
  2. Nextion Enhanced NX4827K043 from iTead Studio.
  3. Nextion Expansion board for Nextion Enhanced display
  4. Micro SDHC Card
  5. SD Card Reader/Writer - to transfer files from computer to SDHC card
  6. Breadboard
  7. Stepper Motor (42BYGHM809)
  8. 100 uF CapacitorDuinotech Stepper Motor Driver (L298) - [JayCar part# XC4492].
  9. External Power supply - e.g. Regulated Lab Power Supply

Step 2: Creating Interface

The first step is to create the interfaces in the Nextion Editor on your PC.

You can download the Nextion Editor here.

Load up the Nextion Editor and create a new project. When you start a new project, you need to make sure that you select the correct Nextion device from the available options. Here “Nextion Enhanced NX4827K043” device is used.

  1. Select File → NewSelect a name for the project and save it to a suitable place on the hard drive.
  2. Select the appropriate Nextion device from the available options
    • My device has a screen size of 480 x 272 pixels

Step 3: Project Resources

You need to import all of the resources (eg. pictures and fonts) into your project, and then design the interface to suit your specific needs.


There are no specific fonts used, but if you want to write any text to the display, you will need to generate a font in the Nextion Editor.

A)Tools → Font Generator

  1. Select the Height of the Font (eg. 16).
  2. Select the Font code type (eg. iso-8859-2)
  3. Select if you want it to be in Bold or not
  4. Choose the Font you want to use (eg. Arial)
  5. Choose the spacing (eg. 0)
  6. And finally give this Font a unique name (e.g. Arial_16)
  7. Push the “Generate Font” button on the bottom right of the window.

Once you press the Generate Font button, it will get you to save the font using a *.zi extension, and will automatically ask you if you would like to “Add the generated font?” to the project. If you are happy with the font, and would like to use this font in your project, then select “Yes”, otherwise select “No” and start again.

You cannot add any text to your project until you have imported or added a font. All of your project fonts will be displayed in the fonts window.

**Note:Each font will automatically be indexed, so that you can reference the font pro grammatically if required. In fact all resources that you add to your project are assigned a number and incremented by one for every resource added. For some resources, you can see this number to the left of the item. E.g. In the picture above, the Courier Font has an index of 0, whereas the Arial font has an index of 1. If you delete a resource, the index number may change for that item.

Step 4: Importing Images

On the Nextion Enhanced NX4827K043 device, each picture must be 480 x 272 pixels in size.

We will now import the following pictures into the Nextion Editor so that we can use them in the project. In the bottom left hand corner of the Nextion editor is the “Fonts and Picture” resource window:

  1. Select the Picture tab
  2. Then select the “+” icon
  3. This will open a dialog box to allow you to select the picture(s) to add to the project. You can select more than one picture to import.

For Splash Screen you can make any image according to your choice.

And for Stepper motor and piano interface you can download the above image.

Step 5: Making GUI

Every resource will get an ID based on the order it is added, and each resource will automatically get a name.

You can change the name of the resource or object, but you cannot edit the ID.

Three pages will be designed to meet the criteria described above.

To add a page, you simply select the “Add” icon from the “page window”. And keep adding pages until you have a total of 3 pages (page0, page1 and page2).

Step 6: Page 0-Splash Screen

When the Nextion is powered up, the splash screen will be displayed for 3 seconds before it shows the Stepper Motor Controller screen. I used the following steps to create the splash screen.

  1. Add the splash screen picture to page 0
  • Select “page 0” from the Page window
  • Select “Picture” from the Toolbox window
  • Double-click the “pic” attribute from the Attribute window
  • Select the splash screen image from the list
  • Press the OK button

2. Add a Timer to page 0

  • Select Timer from the Toolbox window
  • Change the “tim” attribute from 400 to 3000 in the Attribute window
  • Enter “page page1” in the User code section of the Timer Event(0)This timer event will make the Nextion jump to page1 after 3 seconds.

This timer event will make the Nextion jump to page 1 after 3 seconds.

Step 7: Page 1 - Stepper Motor Controller

This page is designed to control the direction and speed of the stepper motor. There will be two buttons for the direction (Left and Right), and two buttons for the speed (Faster and Slower). And one more button to jump to the next page (i.e. the Stepper Motor Piano page). These buttons will also be mapped to the Nextion expansion board. The tactile buttons of the expansion board will provide an alternative method of controlling the motor.

  1. Add the Stepper Motor Controller picture to page1

  • Select “page1” from the Page window
  • Select “Picture” from the Toolbox window
  • Double-click the “pic” attribute from the Attribute window
  • Select the “Stepper Motor Controller” image from the list
  • Press the OK button

2. Add Hotspots over each button on the Stepper Motor Controller image

a)Select “Hotspot” from the Toolbox window

b)Drag and resize the Hotspot so that it covers the “Left” button

  • This is the area that will respond to “Left button” presses.
  • It will be transparent when uploaded to the Nextion board

c)Select the “Touch Press Event” tab in the Event window

d)Un-Check the “Send Component ID” checkbox

e)Type the following code into the “User Code” Section of the Event window:

  • print “L”

f)Change the object name of the hotspot to “Left” using the following process:

  • Select objname from the attribute window and change the text from “m0” to “Left”
  • It is not compulsory to change the hotspot object name; however it will help later on.

g)Repeat steps 2a-2f for each of the other buttons in the following order and as per the table below

  • Right
  • Faster
  • Slower
  • Next

The decimal ASCII code for the letter “L” is 76, hence when the Nextion Enhanced display sends the letter L to the Arduino using the print “L” command, the Arduino will receive the number 76. When the right button is pressed, it will receive the number 82, and so on. The “Next” button does not transmit anything to the Arduino, it is simply there to jump to the next interface on the Nextion Enhanced display, hence the reason why the user code is different for that button.

3.Map the buttons to the Expansion board

a)Select “page0” and then “page1” from the Page window

b)Select the “Preinitialize Event” tab from the Event window

c)Enter the following code into the “User Code” field of the Preinitialize Event tab:

  • cfgpio 5,1,Left
  • cfgpio 2,1,Right
  • cfgpio 4,1,Faster
  • cfgpio 3,1,Slower
  • cfgpio 1,1,Next

***Please note: There is one space between cfgpio and the number next to it, but there are no other spaces on each line. If you introduce extra spaces, it will not compile. This code maps the buttons on the expansion board to the hotspot objects on page1. For example, when the Left button (IO5) on the expansion board is pressed, it simulates the actions or events associated with hotspot m0/Left. In this case it will send a value of “L” (76) to the Arduino.

The IO number is marked within brackets on the expansion board.

Step 8: Page 2 - Stepper Motor Piano

his interface will be designed to look like a piano, and will allow me to control the stepper motor such that it produces a note in the same key as the one I press on the Nextion display. The stepper motor will produce the note by rotating at a specific frequency.

1.Add the Stepper Motor Piano picture to page2.

  • Select “page2” from the Page window
  • Select “Picture” from the Toolbox window
  • Double-click the “pic” attribute from the Attribute window
  • Select the “Stepper Motor Piano” image from the list
  • Press the OK button

2.Add Hotspots over each key on the Stepper Motor Piano image

a)Select “Hotspot” from the Toolbox window

b)Drag and resize the Hotspot so that it covers the the “A” key.This is the area that will respond to “A-key” presses.It will be transparent when uploaded to the Nextion board.

c)Select the “Touch Press Event” tab in the Event window.

d)Type the following into the “User Code” section

  • print 1

e)Repeat steps 2a-2d for each of the other keys as per the table below.

**When the specific key is pressed, the Nextion Enhanced board will transmit the printed number, followed by three 0x00 values. The terminating values can be ignored.

3.The “Back” button will allow me to jump back to the previous interface on the Nextion Enhanced board.

a)Create a hotspot for the back button using the following process:

  1. Select Hotspot from the Toolbox window
  2. Move/Resize the hotspot over the “Back” button

b)Select the Event window.

c)Make sure the “Touch press event” tab is selected

d)Type:   page page1   into the User Code section

Step 9: Debugging

The good thing about the Nextion Editor, is that you can test out the interface functionality before uploading it to the board.

  1. Save the project by pressing the save button on the task bar
  2. Then press the compile button
  3. Then press the debug button.

A Nextion emulator window will appear. This window should respond in the same manner as Nextion module after the Nextion file is uploaded to the board. This emulator is a great way to test out your interface and to make sure it looks and works as expected. Once I was happy with the interface(s), I transferred the compiled Nextion file onto an SD card:

  1. Press the compile button
  2. File → Open Build Folder
  3. Select the *.tft file with the same name as that of the project.
  4. Copy it to a micro SDHC card
  5. Insert the SDHC card into the SD card slot on the Nextion display
  6. Power up the Nextion board

Wait for the file to flash the Nextion board, and you should see a message that looks like this:

The next step is to power off the Nextion board, and remove the SDHC card.


The Nextion Enhanced display is ready, and now it is the Arduino’s turn. The Arduino is programmed to receive Serial messages from the Nextion Enhanced display and control the stepper motor based on the letters or numbers received. The unique letters or numbers being transmitted from the Nextion board, allow the Arduino to understand what button is being pressed, and it uses those numbers or letters to control the flow of code in order to perform specific stepper motor actions.

The SoftwareSerial library is used to enable Serial communication between the Arduino and the Nextion Enhanced display. The AccelStepper library is used to simplify the process of stepper motor control.

Set up a maximum and minimum speed for the motors, and some pre-defined keys. It is possible to “tune” the motor using the first interface of the Nextion display. You can do this by making the motor turn faster or slower until you reach the desired key.
Here “Tuner T1 Free” app from the iTunes app store is used to identify WHEN the motor was producing a note in key. When the motor was producing a specific note, I would write down the stepper motor speed that was printed to the Serial monitor window. Every time the motor speed is increased or decreased, the Arduino code prints the speed to the serial monitor window. I then use these speeds to update the notes[] array in the Arduino code. The notes[] array holds the stepper motor speeds that correspond to the individual notes on the piano. The Nextion display essentially sends the index number of the note to play from the notes array on the Arduino, thereby simplifying the code required to spin the motor at 16 different speeds.

Step 11: Finalizing+Schematics

With all boards powered off, the next step is to make all of the necessary hardware connections to the Arduino. There are two major sections to consider:

  • The Stepper motor driver and motor
  • The Nextion Enhanced board.

You need to ensure that you use an external power source to power both the stepper motor and the Nextion Enhanced board. The stepper motor driver board itself was powered by the Arduino without any problems, but the actual stepper motor will need an external power supply. The Nextion Enhanced board also needs an external power supply because it requires more current than the Arduino can safely provide.

Make note of the external power supply used. I made sure that I had a large enough power supply to handle the power requirements of the project, and utilized the relevant datasheets to help me identify those requirements. If you plan to replicate this project, make sure you take into consideration the specific power requirements of your motor, your motor driver and your Nextion display. The Arduino can only supply 400mA of current from the 5V pin. With everything hooked up, I powered up the Nextion display, then powered up the Arduino. The stepper motor starts spinning automatically. I used the first interface to change the direction and/or speed of the motor. Please note the maximum and minimum speeds set up in the Arduino code. I then used the Next button to jump to the second interface on the Nextion Enhanced display. The second interface looks like a piano. And when I press a key on the piano display, the motor changes speed to match the note I pressed.

That's it.Now you're done.

Hope you will like it

Epilog Challenge 9

Participated in the
Epilog Challenge 9

Remote Control Contest 2017

Participated in the
Remote Control Contest 2017

Arduino Contest 2017

Participated in the
Arduino Contest 2017