NEXTION EDITOR:A BASIC INTRODUCTION

Nextion Editor is a development software used for visual building of graphical user interface for embedded GUI-intensive devices with various types of TFT displays and Touch Panels. By using this tool, users can start creating TFT based devices much faster and easier.

In this blog, we will introduce the menu and toolbars and use guidance. We will show how to use Nextion Editor with a simple example. With these descriptions, users can quickly get started in using this software to design their interface. Please note that the software will be updated from time to time, more tools and bars will be added. However, the base structure stays the same.

Menu and toolbars

Firstly, let’s have a look at the main interface. As you can see from the below image, it can be divided into 8 parts.

Ⅰ. Main Menu
Ⅱ. Image Library
Ⅲ. Font Library
Ⅳ. Display Area
Ⅴ. Page Area
Ⅵ. Attributes Editing Area
Ⅶ. Compiler Output Window
Ⅷ. Event Area

Ⅰ. Main Menu

In Main Menu, there are four toolbars: FileToolsHelpAbout and a set of project menu.

File:It allows users to easily manipulate current project.

Options Description Note
Save as Save current project to your desired folder
Import Project Import existing project This function is under improvement.
Close Project Close Project
Exit Exit Nextion Editor

Tools: There are two tools-Font Generator and Eyedropper.

Tools Description Note
Font Generator Create your desired font It supports all your local fonts
Eyedropper Select color and show color’s decimal code.

Help: Open Nextion HMI wiki files

About: It refers to the software version.

About Description
About Nextion Editor Software version and related website
Check for new version Check for new version

Toolbar: There are other tools that allow users to manipulate the project easily.

Tools Description Note
Open Open existing HMI file
New Create a new project as this is the first thing
to do for creating a new project.
Save Save current project
Compile Refresh and save the project to activate modification If any error occurs, you can see the info in
Compiler Output. It will automatically generate the TFT file
Debug Online simulator Debug to test your current project or input
codes to preview the effect
Upload Upload the project to Nextion Display
Add Component Add a new component to the display window
Delete Component Delete selected or all components
Copy Copy selected component to clipboard
Paste Paste component from clipboard
Resolution Select resolution and direction The resolution should be the same as your Nextion
Display size. If not the same, you have to select the right
solution before uploading to Nextion Display.
ID Click to choose whether to show component ID
XY Click to choose whether to show XY coordinates

Ⅱ. Image Library

In this area, users can manipulate the pictures as they desired. Note: If the picture is too large, the system will automatically cut the picture to a left top corner.

Option Description Note
Add Click to add a new picture from target position New added pictures will be placed orderly
Insert Insert new pictures above selected picture The picture ID number will be rearranged,
this is useful if you wrongly delete the pictures
Replace Replace the selected picture with a new picture The picture ID number will not change
Delete Delete selected picture The picture ID number will change
Delete All Delete all pictures in image library

Ⅲ. Font Library

Before using Font Library, users should first go to the toolbar Tools› Font Generator, choose the height, and select the font in the preview area, input Font Name, and click Generate font.
Move back to font library, users can now manipulate the font library.

Options Description
Add Add new fonts
Delete Delete selected font
Preview Preview selected font
Del All Del all fonts from this Fonts Library

Ⅳ. Display Area

The display area is used to display the graphical components used in the projects, like screens, buttons, images, etc. What you see is what you get.
In the display area, users can design any interface as they like. They can change the background to any image. To place a component to the Display Window, simply drag and drop the desired component from the Components Palette to the Display Window. Just place any components in this display area, then modify the component properties to realize the desired function.

Ⅴ. Page Area

This area allows users to manipulate the pages. If users want their Nextion Display Screen more pages to move back and forth, simply add more pages in this area. They can modify page names by double-clicking the page names, and then press enter to save.

Options Description Note
Tool Description Note
Add Add a new page New added page will be
placed orderly
Insert Insert a new page above selected page The page ID number will be rearranged,
this is useful if you wrongly
delete the page
Copy Copy the selected page to the end Copy the whole page
Delete Delete selected page The page ID number will change
Del All Del all pages in this area

Ⅵ. Attributes Editing Area

By clicking the display area or any component placed in the display area, you’ll see a table in this blank area. There are all kinds of attributes in this table. Click on each table cell, you’ll see a tip on the bottom. We will introduce you each component’s properties by following blogs.

Ⅶ. Compiler Output Window

In this compiler output area, after clicking Compile or Debug, the whole project compiling result will be showed here. If any errors occurs, warning prompt will show the error in red.

Ⅷ. Event Area

This is the user code area to add an event to the selected component. You can refer to our wiki Nextion instruction set.

Tool Description
Initialization If you tick Autoloading, once power is on,
it will execute the event automatically.
If you tick Load Commands, it will not execute by default,
when you want it to execute, you must use ref to refresh.
Touch Press Event Touch press to execute the event
Touch release Event Touch release to execute the event

User Guidance

How to use Nextion Editor?
In order to help users quickly learn how to use this software, we will show a very simple example to help you get started. This example aims to create a text component, a button component and a waveform component. Users can use the button component to turn on/off, and while touch releases this button, it jumps to the another page to view the waveform. There are more examples in our Nextion library. Users can download to learn if they are interested.

Example:

Step 1. Create a new project file.

Open Nextion Editor, click New on the toolbar on the top, name the HMI file and save it.
A new window will open, Select the resolution of your Nextion Device and display direction. Submit by clicking OK. You’ll enter into the Display area.

Step 2. Add new font and add pictures.

  1. Add new font

Click Tools› Font Generator, drop-down to select Height, in Preview Area, click the fonts to choose your desired font, the selected font will be previewed in below. Next, input a name for your font in the Font Name field. Last, click Generate font to submit. Choose a folder, and name it, then click save, there will be a Tips window, just click Y to submit.


You’ll see the font you just saved in the Fonts area. You may create more fonts, and can add them in Fonts area.

  1. Add pictures

Now focusing on Picture area, there are no pictures there. Click Add, click to choose the image you want, then you’ll see the below window, click confirm. Your picture will be in the library. This picture is named 0 by default. Here we add two pictures. You can select as many pictures as you like at one time or one by one, but beware that you should better make the pictures size the same as your Nextion resolution.

Step 3. Change background

Click the white Display window, you’ll see an attribute window in the bottom right corner. Click solid color› Image, double click the blank in pic. Then click the pic 1, OK to submit. You’ll see your background has changed.

Step 4.Add text component

Click Add Component›text, then drag and drop it to the right place. Click this text component, you’ll see an attribute window in the bottom right corner. There are many component properties in this table. Click the to modify the parameter as below picture. Remember to delete newtxt and type “Hello, world!” And click on each table cell, you’ll see a tip on the bottom.

Step 5. Add a button component

Click Add Component›button, then drag and drop it to the right place. Click this button component, you’ll see an attribute window in the bottom right corner. Click on the table cell to modify the parameter as below.

Now your job for Page 0 has completed.

Step 6. Add a new page and place a waveform button on.

Move to Page area, click Add, you’ll get page1, double it to rename it as main. Click the blank Display Window, modify bco to black(0).
Click Add Component›Waveform, then drag and drop it to the right place. Click this button component, you’ll see an attribute window in the bottom right corner. Click on the table cell to modify the parameter as below.

Step 7. Compile and Debug your project.

Now I’d like to make this button to raise an event. Once you press and remove your finger, it will raise an event to jump to the waveform.

Firstly, go to page0, and click the button component on the display window, then move to the Event Area, you can click to choose the way you prefer. Usually, I choose Touch Release Event, and remember to tick Send Component ID. And then input page main in User Code field.

Secondly, go to the top toolbar, click Compile. You’ll see sentences on the Compiler Output window on the bottom. If any error occurs, there will be red warnings.

Thirdly, click Debug to enter debug window. When you click on the button icon, it will jump to page main automatically. If everything is okay, you can upload your project to the Nextion Display hardware.

Have you learnt it? This is a very simple tutorial, we are sure you can learn it without facing any major difficulties. For more examples, simply go to our Nextion library. Or you can visit our previous blog as there are some Nextion tutorials there. You may also share your project with us in Nextion Forum.

In next blog, we will introduce you to the components, so stay tuned!

 

 

Leave a Reply

%d bloggers like this: