Posts with «piano» label

Nextion Enhanced Stepper Motor Piano Project


Nextion is a programmable human machine interface (HMI) that can be customized and designed to simplify the interaction between you and your project.

This Nextion Enhanced module (NX4827K043) with a resistive touch screen display, has some additional features not seen in previous traditional versions of the Nextion series.

  • A built in real time clock (RTC)
  • Accessible flash memory (32MB)
  • GPIO functionality
  • Faster clock speed

Before you connect the Nextion Enhanced module to your project, you need to design your interface with the free Nextion Editor. The editor can be downloaded here.

In this project, I will be designing a simple dynamic interface, which will allow me to interact with a stepper motor in two different ways.

The first interface will let me control the direction and speed of the stepper motor through the use of a simple GUI. I will have left and right arrows for the direction, and up and down arrows for the speed. I will also map the Expansion board to this interface for a more tactile experience.

The second interface will be more musical in nature. I will design a functional “Stepper motor piano” that will allow me to play simple songs using the rotational sounds of the stepper motor. This concept is not new, but I will show you how easy it is to make.


Project Scope

My project will show a splash screen when the project is powered up. After 3 seconds, the first interface will display.

The first interface will have 4 arrows:

  1. Left and Right arrows for the stepper motor direction of rotation
  2. Up and down arrows to increase/decrease stepper motor rotational speed
  3. Next Page button – to jump to the next interface

Each arrow/button on the first interface will be mapped to a specific button on the expansion board. Eg.

  1. Left/Right arrow is mapped to Left/Right button
  2. Up/Down arrow is mapped to Up/Down button
  3. Next page button is mapped to Enter button on the expansion board

The second interface will look like a piano on the Nextion Enhanced display. Each key on the piano will transmit a specific and unique number to the Arduino.

The specific number received by the Arduino will allow it to set the speed of stepper motor which will ultimately affect the frequency of sound it produces. Therefore when the “C” key is pressed on the Nextion display, the stepper motor will rotate at a frequency that sounds like a “C” note.

The stepper motor speeds can be determined by tuning the motor to specific notes using the first interface and an iPhone app called Tuner T1 Free".

If you plan to replicate this project, you will need to determine the relevant speeds of your own stepper motor, and substitute your values into the Arduino code later on in this tutorial.


Create a New Project

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.

I am using the “Nextion Enhanced NX4827K043” device.

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


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.


I will not be using any fonts in my project, but if you wanted to write any text to the display, you will need to generate a font in the Nextion Editor.

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

Each font will automatically be indexed, so that you can reference the font programmatically 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.



As I said before, I will not be using any fonts for my project because the words on the screen will not be changing in any way. I can get away with designing a “Picture” and importing that into the project. I will need 3 pictures for my project.

  1. Splash screen
  2. Stepper Motor Controller
  3. Stepper Motor Piano

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.

I imported the following pictures from my computer:


Splash Screen


Interface 1: Stepper Motor Controller


Interface 2: Stepper Motor Piano


Creating the 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).


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 page0
    1. Select “page0” from the Page window
    2. Select “Picture” from the Toolbox window
    3. Double-click the “pic” attribute from the Attribute window
    4. Select the splash screen image from the list
    5. Press the OK button
  2. Add a Timer to page0
    1. Select Timer from the Toolbox window
    2. Change the “tim” attribute from 400 to 3000 in the Attribute window
    3. 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.


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
    1. Select “page1” from the Page window
    2. Select “Picture” from the Toolbox window
    3. Double-click the “pic” attribute from the Attribute window
    4. Select the “Stepper Motor Controller” image from the list
    5. Press the OK button
  2. Add Hotspots over each button on the Stepper Motor Controller image
    1. Select “Hotspot” from the Toolbox window
    2. Drag and resize the Hotspot so that it covers the “Left” button
      1. This is the area that will respond to “Left button” presses.
      2. It will be transparent when uploaded to the Nextion board
    3. Select the “Touch Press Event” tab in the Event window
    4. Un-Check the “Send Component ID” checkbox
    5. Type the following code into the “User Code” Section of the Event window:
      • print “L”
    6. Change the object name of the hotspot to “Left” using the following process:
      1. Select objname from the attribute window and change the text from “m0” to “Left”
      2. It is not compulsory to change the hotspot object name; however it will help later on.
    7. Repeat steps 2a-2f for each of the other buttons in the following order and as per the table below
      1. Right
      2. Faster
      3. Slower
      4. 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.

  1. Map the buttons to the Expansion board
    1. Select “page0” and then “page1” from the Page window
    2. Select the “Preinitialize Event” tab from the Event window
    3. 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.


Page 2 - Stepper Motor Piano

This 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
    1. Select “page2” from the Page window
    2. Select “Picture” from the Toolbox window
    3. Double-click the “pic” attribute from the Attribute window
    4. Select the “Stepper Motor Piano” image from the list
    5. Press the OK button
  2. Add Hotspots over each key on the Stepper Motor Piano image
    1. Select “Hotspot” from the Toolbox window
    2. Drag and resize the Hotspot so that it covers the the “A” key.
      1. This is the area that will respond to “A-key” presses.
      2. It will be transparent when uploaded to the Nextion board
    3. Select the “Touch Press Event” tab in the Event window
    4. Type the following into the “User Code” section
      • print 1
    5. 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.

  1. The “Back” button will allow me to jump back to the previous interface on the Nextion Enhanced board.
    1. 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
    2. Select the Event window
    3. Make sure the “Touch press event” tab is selected
    4. Type:   page page1   into the User Code section



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.


Arduino Libraries and IDE

The Arduino IDE can be downloaded from this site.

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.



Here is the Arduino Code for this project:

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

I used the “Tuner T1 Free” app from the iTunes app store 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.


Hooking it up:

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,

  1. The Stepper motor driver and motor
  2. 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.

Here is how you would connect the Arduino to the Stepper motor driver board and associated stepper motor.


And this is how you would connect the Arduino to the Nextion Enhanced display


And this is what it looked like when I put it all together:

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.

Voila !! The stepper motor piano is born !!

I played a number of simple tunes on the Stepper motor piano and was surprised how well it worked. Very clever !!


Concluding comments

This project is relatively simple, but stepper motors can be tricky to set up and tune. Nothing a bit of determination cannot fix.

This project was a lot of fun. If you plan to replicate this project, I would be interested to see your versions, or just knowing if this helped you in any way.


This project would not have been possible without the collaborative efforts of iTead Studio. Their Nextion Enhanced display has a lot more to offer than what I have shown you here. But hopefully this tutorial gives you some insight into the power of such a display, and perhaps how it could improve the project you are currently working on. The only thing I did not like was the power requirements. I would have preferred something within Arduino power supply limits. Nevertheless, I am very happy with the Nextion Enhanced display, and would recommend it to anyone looking for a Human Machine interface to include in their project. You can see how simple it was to create TWO interfaces for my project, and I only scratched the surface.

Harpsi-Gourd Gets You Into Thanksgiving Spirit

Halloween might be over, but for some of us there’s still another pumpkin-centric holiday right around the corner to give us an excuse to build projects out of various gourds. During a challenge at a local event, [Michael] came up with a virtual cornucopia of uses for all of the squashes he had on hand and built a touch-sensitive piano with all of them.

The musical instrument was dubbed the Harpsi-Gourd and makes extensive use of the Arduino touch-sensitive libraries. Beyond that, the project was constructed to be able to fit into a standard sized upright piano. While only 15 pumpkins are currently employed, the instrument can be scaled up to 48 pumpkins. Presumably they would need to be very small for the lid of the piano to still close.

The Harpsi-Gourd is a whimsical re-imagining of the original Makey Makey which can be used to do all kinds of things, including play Mario Bros. There are all kinds of other food-based musical instruments at your disposal as well, though.

Filed under: musical hacks
Hack a Day 06 Nov 18:00

Making a Player Piano Talk MIDI

[Ramon] was always fascinated with pianos, and when he came across a few player piano rolls in an antique shop, a small kernel of a project idea was formed. He wondered if anyone had ever tried to convert a player piano into a full MIDI instrument, with a computer tickling the ivories with a few commands. This led to one of the best builds we’ve ever seen: a player piano connected to a computer.

[Ramon] found an old piano in Craigslist for a few hundred dollars, and once it made its way into the workshop the teardown began. Player pianos work via a vacuum, where air is sucked through a few pin points in a piano roll with a bellows. A series of pipes leading to each key translate these small holes into notes. Replicating this system for a MIDI device would be impossible, but there are a few companies that make electronic adapters for player pianos. All [Ramon] would have to do is replicate that.

The lead pipes were torn out and replaced with 88 separate solenoid valves. These valves are controlled via a shift register, and the shift registers controlled by an ATMega. There’s an astonishing amount of electronic and mechanical work invested in this build, and the finished product shows that.

As if turning an ancient player piano into something that can understand and play MIDI music wasn’t enough, [Ramon] decided to add a few visuals to the mix. He found a display with a ratio of 16:4.5 – yes, half as tall as 16:9 – and turned the front of the piano into a giant display. The ten different styles of visualization were whipped up in Processing.

The piano has so far been shown at an interactive art exhibit in Oakland, and hopefully it’ll make it to one of the Maker Faires next year. There are also plans to have this piano output MIDI with a key scanner underneath all the keys. Very impressive work.

Video below.

Filed under: musical hacks
Hack a Day 26 Dec 00:00

Laser Piano Worthy Of The Band ‘Wyld Stallyns’

[Robi] and [Kathy] from elecfreaks have put together a how-to article about a Laser Piano they just built. Instead of keys, the user breaks beams of laser light to trigger the sounds.

Several laser pointer diodes are wired in parallel and mounted in a box, cardboard in this case. The laser diodes are aimed at photocells that reside on the other side of the box. Each photocellis connected to a digital input pin on an Arduino. When the Arduino senses a state change from one of the photocell, meaning the beam of light has been interrupted, it plays the appropriate wave file stored on an external JQ6500 sound module.

[Robi] admits that there are some improvements to be made, specifically the trigger response time and the piano sounding too monotonous. If you have any ideas, please leave them in the comments section.

If you’d like to build one, the bill of materials and Arduino code are listed on the above site. We’ve features some other interesting laser-based instruments in the past, such as this guitar, this harp and this harp.

“Be excellent to each other!”


Filed under: musical hacks
Hack a Day 03 Jul 06:00

Pair of musical hacks use sensor arrays as keyboards

This pair of musical keyboard hacks both use light to detect inputs. The pair of tips came in on the same day, which sparks talk of consipiracy theory here at Hackaday. Something in the weather must influence what types of projects people take on because we frequently see trends like this one. Video of both projects is embedded after the jump.

On the left is a light-sensitive keyboard which [Kaziem] is showing off. In this image he’s rolling a marble around on the surface. As it passes over the Cadmium Sulfide sensors (which are arranged in the pattern of white and black keys from a piano keyboard) the instrument plays pitches based on the changing light levels. [Thanks Michael via Make]

To the right is [Lex's] proximity sensor keyboard. It uses a half-dozen Infrared proximity sensor which pick up reflected light. He calls it a ‘quantised theremin’ and after seeing it in action we understand why. The overclocked Raspberry Pi playing the tones reacts differently based on distance from the keyboard itself, and hand alignment with the different sensors.

Filed under: musical hacks

Fruit piano uses a different circuit than the Makey Makey

[Hasbi Sevinç] is using perishable goods in his electronics project. The orange, tomato, and two apples seen above act as keys for the virtual piano. The concept is the same as the Makey Makey which is often demonstrated as a banana piano. This implementation uses an Arduino to read the sensors and to connect to the computer running the piano program.

You can see there’s a fair amount of circuitry built on the breadboard. Each piece of fruit has its own channel to make it into a touch sensor. The signal produced when your finger contacts the food is amplified by transistors connected in a Darlington pair. That circuit drives the low side of a optoisolator transmitter. The receiving side of it is connected the I/O pin of the Arduino. You can see the schematic as well as a demo clip after the break.

This use of hardware frees up a lot of your microcontroller cycles. That’s because projects like this banana piano use the timers to measure RC decay. [Hasbi's] setup provides a digital signal that at most only needs to be debounced.

Filed under: arduino hacks, peripherals hacks

“Years”: Playing wood’s year rings

“Years” is an artwork created by Bartholomäus Traubeck that translates wood’s year rings into sound. The record player uses a system  that analyse tree’s years for their strength, thickness and rate of growth. This data are mapped to a scale defined by the overall appearance of the wood and serves as basis for a generative process that outputs piano music. The system is composed by arduino, ps eye, stepper motor for moving the tonearm, vvvv and ableton live, all connected via midiyoke and/or serial.

For more information:

Arduino Blog 24 May 08:41
ar(t)duino  bio  music  piano  tree  vvvv  wood