0

members

Easy Raspberry basics: Project 31a Raspberry PI Zero W board and Nextion HMI display

of Acoptex.com in Raspberry Pi 3

Raspberry basics: Project 31a

Project name: Raspberry PI Zero W board and Nextion HMI display

Tags: Raspberry, Raspberry PI Zero W board, vers 1.1, v 1.1, Nextion HMI display, Nextion, Nextion HMI display, Smart LCD Display Module, NX4832T035_011, IM150918001, sdkerror, serialavailable failed

Attachments: projectfiles, ino_sketch

In this project, you needed these parts (Dear visitors. You can support our project buy clicking on the links of parts and buying them or donate us to keep this website alive. Thank you):

1. Raspberry PI Zero W board or full kit 1 pc

2. Micro SD card with NOOBS and Micro SD card for Nextion HMI display and SD card adapter 

3. Micro USB power supply (2 A 5V or 5V 3A) 1 pc

4. USB keyboard 1 pc

5. USB mouse 1 pc

6. TV or PC monitor 1 pc

7. HDMI cable 1 pc

8. T-Cobbler Breakout and GPIO Cable 1 pc

9. Micro USB 2.0 OTG Cable 1 pc

10. Mini HDMI to HDMI Adapter (HDMI to Mini HDMI Adapter) 1 pc

11. 4-Port USB 2.0 Hub 1 pc

12. NEXTION HMI Display NX4832T035_011 1 pc

Package normally includes: Nextion Display, connecting wire, a power supply test board.

13. Micro USB cable for Nextion HMI display 1 pc

14. Phone charger 5V DC 0.5A 1pc (it can be different - depends on your display model) for Nextion HMI display

15. USB to TTL/Serial adaptor/converter 1 pc

16. Nextion editor v 0.53 ( you can download it from here  )

General

We will learn how use Nextion HMI display with Raspberry Pi Zero W board.

Understanding the USB to TTL/Serial adaptor/converter

You can read more about USB to TTL/Serial adaptor/converter  here.

Understanding the Nextion HMI display

You can read more about it here.

Commands used with Nextion explained here.

Understanding the Raspberry PI Zero W board

You can read more about it here.

Signals and connections of the Nextion HMI display module


Nextion HMI display module has four pins: power supply +5V DC, ground GND,  transmit TX,  receive RX.

Signals and connections of the Raspberry PI Zero W board


Wiring

1. Powering the Nextion HMI display module

Note: the small power supply test board and connecting wire inside the package allow you to test if the electrical supply is enough or not. See the image below on how to use it.

2. Uploading .TFT file to the Nextion HMI display module

3. Using the Nextion HMI display module with Raspberry Pi Zero W board


Step by Step instruction

We recommend using a high-performance SD card for increased stability as well as plugging your device into an external display to see the default application booting up.

1. Setup and preparation

We assume that you have Raspbian OS installed on your Raspberry Pi Zero W board. 

  1. Do wiring.
  2. Insert your micro SD card with Raspbian OS into the TF card slot on the Raspberry Pi Zero W board. It will only fit one way.
  3. Connect Raspberry PI Zero W board mini HDMI port to your TV or Monitor HDMI (DVI) port (use HDMI cable and mini HDMI to HDMI adapter and/or HDMI to DVI adapter).
  4. Make sure that your monitor or TV is turned on, and that you have selected the right input (e.g. HDMI/DVI,  etc).
  5. Plug in micro USB 2.0 OTG Cable to USB data port of Pi Zero and 4-Port USB 2.0 Hub to micro USB 2.0 OTG Cable. 
  6. Plug in your USB mouse and USB keyboard to 4-Port USB 2.0 Hub.
  7. If you intend to connect your Raspberry Pi Zero vers 1.2 or vers 1.3 to the internet, connect a WiFi dongle to one of the 4-Port USB 2.0 Hub ports.
  8. Connect Micro USB power supply to Raspberry PI Zero board micro USB input.
  9. The Raspberry PI desktop will start up.
  10. Open Terminal window and type the command: sudo apt-get update
  11. Then type the command: sudo apt-get upgrade -y
  12. Adding -y to the end of apt-get commands instructs the program to automatically answer yes to any questions rather than waiting for you to type Y or N.

2. Install library Segnix

Segnix is an open-source interface library for hardware manipulation based on Linux platform and compatible with Arduino API. You can develop with it by using C/C++ and Python. Segnix is dedicated to provide a fast, efficient and unified software development environment for the person like you with a strong electronic design idea. 

Through Segnix, users can directly access to the Linux platform hardware resources such as GPIO, UART, SPI, I2C etc. Segnix supports various hardware platforms, such as Iteaduino Plus A10/A20, IBOX, ITEAD Core EVB, Raspberry Pi and Raspberry Pi Model B+ and so on. Meanwhile, It also provides a great amount of libraries for all kinds of child board like NFC(PN532) module, GPS shield, GSM(SIM900/SIM908) shield, nRF24L01 module, OLED and LCD module etc.

Simplifying the hardware operation makes it possible for software engineers who are not familiar with the underlying hardware and junior developers to understand more about "Code World" and "Physical World". It can also work as a rapid prototyping development tool.

  1. First you need to install required packages. Open Terminal window and type the command: sudo apt-get install build-essential git-core

  2. If you are a Python user, type the command to install the following packages: sudo apt-get install python2.7 python2.7-dev. Please note that Segnix Python API depends python2.7 not python3.x.
  3. Download Segnix by typing the commands: git clone https://github.com/itead/Segnix.git

  4. Type the command: cd Segnix
  5. You need to configure your board. Type the command: make Raspberry_Pi_Rv2
  6. Select Functional Libraries to Install (Optional). If you DO NOT want to customize the libraries to be installed, just skip this step. It's allowed for user to select functional libraries to install. Type the command: sudo nano config.mk . Press Y button on keyboard. Edit it by adding or removing letter "#" at the head of each line for deselecting or selecting the corresponding library. Press Ctrl+X buttons, press Y button and press Enter button to save your changes. 
  7. Installing Segnix requires root (super user)'s privilege. Type the commands: make
  8. sudo make install
  9. To check the version of Segnix installed, type the command: segnix -v. We have installed: Segnix v2.9.8. If you need the help about Segnix type the command: segnix --help 

3. Disable Serial port and Bluetooth

  1. To use serial on Raspberry Pi 3 pin 14/15 you need to disable Bluetooth in /boot/config.txt. Type the command:sudo nano /boot/config.txt

  2. Add this line to the file: dtoverlay=pi3-disable-bt and press Ctrl+X buttons, press Y button and press Enter button to save your changes.
  3.  
  4. Type the command: sudo raspi-config
  5. Select 5 Interfacing Options and press Enter button.
  6. Select P6 Serial and press Enter button.
  7. Select No and press Enter button.
  8. Select Yes and press Enter button.
  9. Press Enter button.
  10. Select Finish and press Enter button.
  11. We need to reboot our Raspberry PI. Select Yes and press Enter button. Or type the command in Terminal: sudo reboot

4. Downloading and installing the Nexion Editor

  1. To get started with Nextion, first you need to install Nextion Editor. Go to Nextion website and download the Nextion Editor v 0.53 by clicking on download exe.
  2. When download process is done you will see the file in your PC Download folder called nextion-setup-v053.exe
  3. Click on this file to start installation process.
  4. Click on Next> button.
  5. Select installation folder and click on Next> button.
  6. Click on Install button and click on Yes button in pop up window.
  7. You will see the shortcut on you PC desktop and the Nextion Editor starts automatically after installation is done.

5. Using the Nextion Editor

This is a quick overview of the different sections of the Nextion Editor.

  1. Main Menu including new, save, open, debug, upload etc.
  2. Working area, this is where the graphical display is designed and shown. It is in this area a scale representation of the display is shown as a canvas on which to work. All desired components are added and arranged with in this area to represent how the final display should look.
  3. Toolbox – this is where you have a wide variety of components you can add to the user interface, like pictures, progress bar, buttons, sliders, and much more.
  4. Picture library, images used on the Nextion display need to be uploaded before hand. In order to do this all images first need to be imported to the IDE, the IDE then gives each image a unique number by which that image is referenced. It is then from this section that images and backgrounds can be selected and positioned in your GUI. Font library, text entered in the GUI needs to be setup to be correctly displayed on the display. To do this fonts are created in specific sizes and styles and then configured for the specific display. After completing the configuration the font can be added to the font list.
  5. Page area, display screens are called pages. New pages are added and named here. It is with the names listed in this panel that different screens are selected by either internally written code or by a connected microcontroller.
  6. Attributes, component attributes such as, display text, value, color, background, are set in this window.
  7. Compiler Output Window: if errors occur, they will be shown in this area.
  8. Event area, code to control how the display behaves is added here allowing for simple display control to be achieved without the need of an external microcontroller.

The resources you need to complete any Nextion HMI project (be aware that you may need to change some settings on the user interface to match your display size):

  • .HMI file (this file can be imported into the Nextion Editor to edit the GUI);
  • background image used in the user interface should also be in the project folder;
  • .TFT file (this file should be uploaded to the Nextion display, this is the file that the display runs);
  • .ino file (this is the file you should upload to your Arduino board).

5.1 Creating a New Project in Nextion Editor

  1. Open Nextion Editor and go to File -> New to create a new file or you can import the .HMI file for this project.
  2. Give it a name and save it. 
  3. You will see the window where you can choose your Nextion model.
  4. Select the Display tab and set the Nextion HMI display orientation. For example, we have selected Horizontal.
  5. Click on OK button to close.

5.2 Adding a Background Image

To use an image as a background, it should be exactly of the same dimensions as your Nextion display. We’re using the 3.5” display, so the background image needs to be 480 x 320 pixels. Check your display dimensions and edit your background image accordingly. You can download wanted images and use them for the background from this website.

Huge collection of free and paid images are available for download. 

You can use INKSCAPE program to convert image width and height (W x H) to match our Nextion display.

If you have a background image with the proper dimensions:

  1. In the bottom left corner of the Nextion Editor, there is a window for fonts and pictures. Select the Picture tab.
  2. Click the (+) button and select your background image. The image will be added to the pictures list and it will be given an id. In this case it is 0.
  3. Go to the toolbox, and click on the Picture component. It will be automatically added to your display area.
  4. When this component selected, you should see its attribute in the attribute area.  You can double click on the attributes to edit them. Double-click on the pic attribute to select the picture you want. You must write “0” which is the index of the picture you want, or select the image on the new window that pops up. After writing “0”, you actually need to hit ENTER to save the changes.

5.3 Adding Fonts

  1. To write text on the display, you need to generate a font in the Nextion Editor. Go to Tools -> Font Generator. A new window will open.
  2. You can select the font height, type, spacing and if you want it to be bold or not. 
  3. Give it a name, for example ProFont, and click the Generate font button. 
  4. Save the .zi file and add the generator font by clicking on Yes button.
  5. The font will be added to the Fonts library at the left bottom corner and it will be given an index. As this is your first font, it will have the index 0.

5.4 Adding button

Let's start adding components to the display area. Add one button from Toolbox area to Display area. Just click on required component.

All components have an attribute called objname. This is the name of the component. Also note that each component has one id number that is unique to that component in that page. You can edit the components the way you want.

5.5 Touchable components

You should trigger an event for the touchable components (the button) so that the script will know that a component was touched. You can trigger events when you press or when you release a component.

  1. Let's see how to trigger an event when the touch is pressed. That event is simply sending the ID of the component that was touched.
  2. Select one of the buttons and in the event window select the Touch Release Event tab and tick on Send Component ID option.

5.6. How to test the interface in the simulator

  1. You can test your interface in the simulator. Click on the Debug button in the main menu.
  2. A new window will open.
  3. In that window when you click on the buttons you see the data returned (HEX code is generated inside the simulator return area).  Let's see the example: 65 00 02 00 FF FF FF (65 is the Touch Detection code, 00 is page ID which is page 0 for our project, 02 Component ID which is 2, 00 Button Release event, FF FF FF  End of Message)

5.7. Compiling and uploading code to the Nextion HMI display

  1. You can use Micro SD card with this module only.
  2. You’ll need a SD card reader or micro SD card adapter and computer to format your card. 
  3. Format the Micro SD card as FAT32. Insert the Micro SD card with SD card adapter in your computer. Go to My Computer and right click on the SD card. Select Format... 

  4. A new window pops up. Select FAT32, press Start to initialize the formatting process and follow the onscreen instructions.
  5. Click on the Compile button  in the main menu to generate the .TFT file.
  6. This is the file to be uploaded on to the Nextion HMI  display.
  7. To see the file generated go to File -> Open Build Folder. It will open a folder inside of which you find the generated file.
  8. The .TFT file can be uploaded on to Nextion HMI  display by 2 methods. One is the USB – TTL method where we connect USB-TTL device to serial port of display. Another method is SD card method.
  9. USB – TTL method is very easy. Connect the USB to TTL adapter to PC and note the serial COM port allotted. Click on Upload button on the Nextion Editor. On the upload window select the COM port (for example, we had COM4) and set the Baud Rate to 115200. Click on GO button.
  10. When upload done you will see the message: Download finished! Total time:....
  11. We will describe the SD card method now. Copy the .TFT file corresponding to the file you are currently working;
  12. Paste that file in the Micro SD card.
  13. Insert the Micro SD card on the Nextion display and plug power.
  14. You will see a message on the Nextion HMI display that the code is being uploaded.
  15. When all done, it should display the following message: Check data... 100% Update successed!
  16. Remove the power from the Nextion HMI display, and take out the Micro SD card.
  17. Apply power again and you will see the interface you have built in the Nextion Editor on your Nextion HMI display.

6. Making, Compiling .INO file

 

  1. After Raspberry Pi reboot go to Terminal. Type the command: sudo nano NetionProButton.ino
  2. Copy the content from attached file to NetionProButton.ino file made on Raspberry Pi 3. You can use Notepad Plus program.
  3. Press Ctrl+X buttons, press Y button and press Enter button to save your changes.
  4. Run Segnix to compile the .INO file. Type the command: segnix NetionProButton NetionProButton.ino
  5. You can run the NetionProButton program after compilation by typing this command: sudo ./NetionProButton

 

Troubleshooting

If you are getting this error:

then you need to disable Bluetooth in /boot/config.txt inorder to use serial on Raspberry Pi 3 pins 14/15.

Summary

We have learnt how use Nextion HMI display with Raspberry Pi Zero W board.

Libraries in use

Script

  • None


Other projects of Acoptex.com
Easy Basics: Project 083d Sipeed Maixduino Kit for RISC-V AI and IoT of Acoptex.com in ESP8266 ESP-32 16-06-2019
Easy Basics: Project 076f ESP32 Development board - How to use GPIO pins of Acoptex.com in ESP8266 ESP-32 03-06-2019
Easy Basics: Project 082a Lithum battery charger TP4056 of Acoptex.com in UNO 01-06-2019

« Go back to category
Is this project fake? Report it!   
Recommend to a friend
Published at 28-03-2019
Viewed: 881 times