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: File, Tools, Help, About 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.
- 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.
- 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!
