That’s it. That’s all we need. Follow the link above to get the Nextion Editor. The image editing software is going to be the software you choose, as Photoshop certainly can be used, however, I quit using photoshop when Adobe decided we can’t be trusted to edit our images unless we pay them a minimum amount a month. I don’t subscribe to having to subscribe. I’ve used Microsoft Paint with good results in the past, though the images you will see of the background images I made are the result of having owned Photoshop prior to Adobe forcing an update that made me have to subscribe to even open the program. Yup, I paid $300 for a copy of Photoshop for business purposes, and Adobe didn’t think that was enough. They took that $300, said ‘thanks’ and rewarded me less than six months later with forcing an update, even though I didn’t want it, to then make me have to pay a minimum $10 a month to simply open the program. Why they remain successful is beyond me, though there aren’t many options that corporate users can use to do things as quickly, so maybe they figure the ones they lose don’t matter. I guess we don’t, but I digress. back on topic. Pick your image editor, and just know that the dimensions for your screen have to be exact, in pixels, otherwise the background image won’t be as one intends it to be. In older versions of the Nextion editor, this didn’t matter as much, but on the newer versions of the editor, it will not allow anything to extend ‘off screen,’ which is indicated by the white background that will load. (Patience, you’ll understand soon enough.) <\/p>\n\n\n\n
Before we begin, let’s talk some dimensions. The pixel width and height of the screens is important for building the images you want to use as the background. We call them pixels, as the technical term, but the ‘unit’ can be named anything, so if you don’t know what a pixel is, it’s just a unit of distance or size. A pixel is a dot of a certain size and that dot can change colors to form images by adjusting the dot and all of the surrounding dots, but don’t get hung up there. Just think of a pixel as a unit of length for terms of this explanation. The Nextion Enhanced (which are what C4 sends with the stack we recommend) screen sizes are as follows, assuming we are standing them with the long side up and down (vertical). Exchange the ‘long’ side measurements for the ‘short’ side if using horizontal.<\/p>\n\n\n\n
- \n
- 2.4″ screens are a 240 by 320 pixel rectangle. (Therefore if you set the image to 240 X 320, it will fit.)<\/li>\n\n\n\n
- 3.2″ screens are a 240 by 400 pixel rectangle. <\/li>\n<\/ul>\n\n\n\n
If you are building a different screen size, the premise will be the same as far as this tutorial, however, you will have to find the pixel sizes on your own. <\/p>\n\n\n\n
With all of that established, let’s attempt to build an image in Microsoft Paint to use as a background. Open Microsoft Paint. Click File, then click Image Properties which will open the following box. Note: It is important to remember that Paint is archaic by nature, so when layering, it is important to save your work in steps. Otherwise, if you place to many things onto the canvas, the program can run out of allotted memory and crash, making you a sad panda. Don’t be a sad panda, plan and execute steps so that your work isn’t lost to the computer gods’ whim. <\/strong><\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_image_properties.png\")
<\/figure>\n<\/div>\n\n\nClick on the Pixels radio button, then change the width to 240, and the height to 320. Then hit enter. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_Home_240X320-1024x547.png\")
<\/figure>\n<\/div>\n\n\nI like to build a type of banner that allows us to place the mode name on the top of the screen for each page. Knowing that we are going to be building this screen for all of the pages, we can make a template to use, and change only the text box at the top to build our images for the pages individually. You should setup a folder on your computer to save the images to now, so that you can centralize them and not have to find them in your Documents or Pictures folders which is often a pain. I made a folder on my desktop for this. Now we’ll start building. <\/p>\n\n\n\n
Using the toolbar at the top of Paint, I set the colors in the palate that I am going to use first. In my case it is #77773c which is an OD Green. Click on the Edit Colors button. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_Main_Menu-1024x127.png\")
<\/figure>\n<\/div>\n\n\nI change the top number above RGB to #77773c, and click OK. You’ll notice the top circle changed to the color selection, but the bottom circle stays white. Do the same process for the bottom circle, making both the outline and fill the same color. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_Color_Palate.png\")
<\/figure>\n<\/div>\n\n\nYou will see (I had completed this prior to typing these instructions) that the color appears in the menu now. Select the color and make sure it is highlighted. I make boxes as the ‘background’ in the color I chose. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_Select_Fill.png\")
<\/figure>\n<\/div>\n\n\nPaint sucks, in that if you lose the ‘focus’ on the item you make.We control this with ‘layers’. If you click on the Layers button on the top, you can make each adjustment on a layer, and then when it outputs the file it will combine all of the layers into a flat image. I click the ‘+’ on the top of the right pane and you’ll notice each time you click it a new layer will appear. This should ease our worry if we lose focus. I make four or five layers, noting I may not use all of them, however, if we lose focus on the object we just made we can delete that layer and start again. The layers should be started from the bottom up, as layering is like icing a cake. We bake the cake, put icing on, then put the decorations on from the bottom up. I am not a fan of Paint, but it works. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_Layers-1024x319.png\")
<\/figure>\n<\/div>\n\n\nSelecting one of the layers on the right to start with, I then drag a rectangle within the boundaries of the ‘canvas’. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_Making_First_Box.png\")
<\/figure>\n<\/div>\n\n\nI then right click on the dotted line, and go to resize. Click on the chain in the middle to unbind the ratio so that we can now make the box 240 X 50 pixels. Select the pixels radio button, and then type 240 into the first box and 50 in the second. Then click OK.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_First_Box_Resized.png\")
<\/figure>\n<\/div>\n\n\nRight click again on the dotted line and select Fill, then select Solid Fill. I then drag the box to where the top left corner matches the top left corner of the canvas. I then select a different layer (usually the layer directly below the first, and then the one directly under that on which I’m working. The layers will come in handy when we begin placing our text boxes for each of the modes. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_First_Box_Placed_and_filled.png\")
<\/figure>\n<\/div>\n\n\nBearing in mind that you will have your own ideas as to how you want your screen to look, after you build this first set of images and understand how the entire system of what we’re doing comes together, you can then go back and freely make your own design. This one is mine, and it was simple enough I can pull it off fairly quickly. I choose to place the text of the page I am making so that I can give each page its own ‘flair,’ etc. however, if you want to make one simple background and use it on every page you can. You will only have to make a text box later in the Nextion Editor to display what mode the page is displaying. You’ll understand better later, however just know that I make an image for each page to have its own. If you run into a situation where memory is a problem with the screen’s onboard memory, you can cut back by making one simple background image and simply adjusting what is displayed by text boxes in the Nextion Editor. I know, hang in there, it will make sense later. Back on task. I now select the next layer down and make a vertical box and place it on the left hand side of my canvas.<\/p>\n\n\n\n
I then resize that box to overlap the previous box when aligning the top left corners, and I make it 50 X 320 pixels in the same manner I made the first box and adjusted sizing. (Technically, if I wanted to do the math, I could make the box 320-50=270, but it’s just easier when going fast to not do the math, and the overlap won’t show. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_Second_Box_Placed_and_filled.png\")
<\/figure>\n<\/div>\n\n\nNow, we’ve got the basis of what my screen will look like, and I could save it as my only background image that use in the Nextion editor, however I want to use a font that may not be available in the Nextion Editor, so I will make each page here, starting with the home screen ‘MMDVM’. I select the third layer on the layers pane, then I select the A for font. I then select the font I want to use, and the size of font I want to use. In my case it is ‘Game of Squids’ (this is a custom font I downloaded, and I won’t cover that in this tutorial, however fonts are an easy topic to cover, just not here) and size it to 20. Bold is also selected. This will show most ‘odd’ fonts better. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_Selecting_font-1024x186.png\")
<\/figure>\n<\/div>\n\n\nNow, I want to place the font, center it, and remembering that I am making the ‘pages’ type the page that I want this ‘screen’ to be made for. In this first case I will type ‘MMDVM’ which is the home page for the Pi-Star stack display. I will not go through every page for brevity sake, but suffice to say that you will have to do this for every mode you are going to use. (Listed above. So a separate image will be made for MMDVM, P-25, DMR, YSF, NXDN, and D-Star. I ignore POCSAG, but if you wanna use it, more power to you.) With that said, simply follow the same method for each page, and you can hide or show each layer by clicking the ‘eye’ on each layer to turn that layer on or off. <\/p>\n\n\n\n
On task, I drag a Text Box onto the canvas, type in my call sign, and then resize and move the box to where I want it. It may sometimes be easier to move the top left corner of the text box to the top left corner of the canvas, and then resize the rest of the box to match the first filled box we made. With text boxes, there is no right clicking and typing the size, so however you decide to resize the box, keep it consistent between pages. I do this to ensure that the text on each page aligns with the others, and looks like we intended that box to change and gave it some forethought. It’s a design thing, but it is your choice how you want things to align when the Pi-Star stack switches pages. You can control how the text is aligned in the same settings panel that you selected the font and font size. You can choose left, center, or right. Each is self explanatory. I left align. You’ll notice that by resizing a box to smaller than the text appears causes the text to automatically wrap downward. Vertical text is made this way. Also, don’t forget to select the color of font you want by clicking the circles for outline and fill, and then selecting your color. I’m using black. <\/p>\n\n\n\n
I personalize my screen by placing my call sign vertically on the left hand side, and we can leave this alignment layer on all modes. Makes for a neat appearance and definitely lets whomever turns on the hotspot know that it belongs to me. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_Callsign_Placed.png\")
<\/figure>\n<\/div>\n\n\nClicking anywhere outside of the textbox you’ve just made leaves you with the following. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_Callsign_Deselected.png\")
<\/figure>\n<\/div>\n\n\nNow we can go for the different pages. I select the next layer UP on the layers pane, and then make a text box across the top of the canvas. It is a really good idea to save your work at this point, just in case the memory gods decide to say ‘nope, we’re done’ and crash your Paint program. Trust me, save it. Save it into your folder as a name that will remind you it is the base beginning of your pages. Technically, we could simply import this image in the Nextion Editor as the background for every page, and then control the text that changes indicating what page we’re on using a textbox in Nextion Editor, however, the font selection may not appear as available when choosing your fonts in the Nextion Editor, especially if it is a font you’ve installed on your own. So, I want to match the font of my callsign for the individual page designations, so I will do that by building separate images for each page. If you run into memory issues because you have added a million things I haven’t covered in this tutorial while building in Nextion Editor, you may contemplate using just one image for the background and controlling as stated. I select the layer above the layer I just made with my call sign. With each ‘page’ you build, you will then delete the top layer in the layer pane by right clicking and deleting it, then adding another layer, making sure it gets dragged to the top and following the same process. I name each image I save as the page it will go to, so MMDVM (home), YSF, DMR, etc. These images should be saved in the .png format. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Paint_MMDVM_With_Call.png\")
<\/figure>\n<\/div>\n\n\nIf you’ve built each page by now, you should be ready for the Nextion Editor. Here we go. Hopefully you’ve installed the Nextion Editor and it is ready to rock at this point. We’re now able to close Paint and thus, close out a period of time that we cannot get back. Thanks Microsoft. Thanks for nothing. (Seriously, they spent a long time developing Paint, but then just decided it wasn’t worth pursuing, so we get updates to make it compatible with new versions of Windows, but no real bug fixes, etc. It’s quirky, but it’s free. Remember, if a product is free, you<\/strong> are the product.)<\/p>\n\n\n\n
The first step in the Nextion Editor is to go to File on the menu bar and click New. Upon clicking New, you will be asked to save the project as a file name. Navigate to the folder you wish to use, and give the project a name and click Save.Once saved, this will bring up a box where you choose the particular screen you are building for. If you’ve purchased the Pi-Star stack we recommended here, then it will be the 3.2″ in the enhanced. Remember, however, I stated earlier that I am building this tutorial for a 2.4″ screen. Hopefully you did those adjustments while using Paint, if you’re using a larger screen, otherwise the images aren’t going to jive well. (They’ll fit fine, but they won’t be as I intended them to be when aligned, etc.) <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Begin-1024x457.png\")
<\/figure>\n<\/div>\n\n\nThe next box you will see asks you to select the display you want to work with. In the case of the stack we recommended, you would select the Enhanced box, then the NX4024K032_011, however, I’m using the NX3224K024_011 2.4″ for this tutorial. (My screen is a 2.4″ and I am ‘refreshing’ my stack using what I build in this tutorial. Don’t hit the OK button just yet, as we have to select the orientation we want to use first. (Don’t worry, it will ask you if you did.) <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Screen_Selected.png\")
<\/figure>\n<\/div>\n\n\nNow click on the Display on the left of the screen, and select 0 Vertical. (Unless you’ve made images otherwise, then follow your instincts, Sparky.) <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Vertical_Selected.png\")
<\/figure>\n<\/div>\n\n\nNow we can click OK, and the program opens a screen showing the canvas in the approximate size of the real thing. Awesome.<\/p>\n\n\n\n
You’ll notice the different panes of the program. Each pane will be used throughout the project, but we are going to start on the top right pane of the screen, which is called Page. You guessed it, we have to make a page for each mode. So, we do so by clicking the plus button (the left most) for each page we want. It should be noted at this point that numbering typically starts with 0 (zero) for programmers, and therefore they have made each beginning number 0 (zero). So, the first page is page0. We will edit its name shortly to help us remember, but the program will call the pages by page number, so it’s important to put the pages in the order you will see shortly. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Page_Pane.png\")
<\/figure>\n<\/div>\n\n\nWe will rename the first page MMDVM. Right click page0 and select rename, then type in MMDVM. (The names are for human interaction. We have to remember what page we’re building and working on, so we name them.)<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Page0_renamed.png\")
<\/figure>\n<\/div>\n\n\nNow, we’ll add the other pages, and name them in the order they will be called by the Pi-Star stack to display the information to us. To reiterate, the pages must be in the order because the program calls them in that order depending upon the mode the MMDVM modem is receiving or transmitting. DMR, YSF, etc. That order is MMDVM, DStar, DMR, YSF, P25, NXDN, and then POCSAG (which we won’t build).<\/p>\n\n\n\n
So your pages should look like the following once you’ve done the add pages and renamed them. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Pages_Added_and_Named.png\")
<\/figure>\n<\/div>\n\n\nWe add each page by clicking the top left menu item in the Pages pane, then renaming each page. Total, there should be six (not including POCSAG, because, well, I don’t use it, but if you wish to, add it. The page numbers are 0 through 5.) Now that pages are added and named, we can import our fonts and images. <\/p>\n\n\n\n
We’ll start with fonts. Click on Tools on the menu and select Font Generator. This is where we’ll build out the fonts for the pages to use when they receive updates to show you. I use Arial in 16, 18, and 24 sizes. We’ll build those now. In the font generator, select the font in the Font dropdown, select the size in the Height drop down (you can also type in the size, such as 18, because it isn’t listed). Name the font in the bottom right corner of the Font Generator, and then click Generate Font. This will open a save dialog box. Unless there exists a font that is named the same name, you can simply click Save and it will save your font. The program will then tell you it generated the font, the size, etc. and upon clicking OK, it will ask you if you want to add the font, select Yes. If you’ve previously generated fonts, you can select those without generating them again by clicking the + button on the font pane. Otherwise, continue by simply adjusting the size of the font, renaming the file to save and saving the file for each font size. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Font_Pane.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Fonts_added.png\")
<\/figure>\n<\/div>\n\n\nTake note of the ID numbers on the left hand side of the Fonts pane. These numbers will be used with each text box to determine the font that is used for any information that goes into that text box from the program. Now we’ll move on to importing the images we made earlier so we can use them on our project. Select the Picture tab on the Fonts Pane, and the pane will switch to the Picture pane. (Yay, logic.) We then can click on the + and navigate to where we saved the images, select all of the images and import them by clicking Open.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Selecting_images.png\")
<\/figure>\n<\/div>\n\n\nYou will receive a box that indicates the images were imported. Click Ok, and you should see the following.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Pictures_Pane_Imported_complete.png\")
<\/figure>\n<\/div>\n\n\nNow we’ll use one of those images. On the Page pane at the top right, make sure MMDVM is selected. On the Toolbox pane to the left of the screen, click Picture. You’ll see an empty blue box appear on the canvas named p0. On the Attribute pane to the bottom right of the screen, we will change that blank box to the image we wish to use. If we sized everything properly in Paint, and it correlates, there shouldn’t be a ton of adjustment other than placement. Let’s click on the empty box to the right of pic in the Attribute pane, click browse, then select the image that has MMDVM on it (ID:2). Click OK, and the image replaces the empty blue box. The box is always placed at 0,0 coordinates, regardless of whether you’re placing a text box, picture box, etc. We’ll deal with coordinates in a couple of steps from now. Follow up with doing the same process for each page, setting the picture to the corresponding image we built earlier. Now that we have assigned each page it’s own background image, we can concentrate on building the text boxes that will be used by the program to display the information. This won’t make perfect sense at first, but if you understand that there are different information types that the program will pass, the naming conventions will make sense. Let’s get to it!<\/p>\n\n\n\n
Making sure we’re on the MMDVM page, we’ll build the text boxes now. In the Toolbox, click on Text, which will add a text box at coordinates 0,0. (Told you we’d get to it… just about there…). <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_t0_added.png\")
<\/figure>\n<\/div>\n\n\nNow is the time to do a little math. Don’t worry, it is basic math, but if you remember we made the left box that contains the call sign in the image 50 pixels wide, if we look at the dimensions I gave you earlier (240 pixels) for width, our text boxes need to fit neatly into the white area left, or they will overlay the call sign box. So, we take 50 away from 240 and we have 190 left. That means that we can have a textbox 190 pixels long, which is plenty for what we need. The text boxes will default to 30 pixels tall, which will come into play soon. Noting that our top box was also 50 pixels tall, we have to ADD 50 pixels to the placement in the coordinates that get assigned to the box. Each additional box needs a minimum of 80 added to align under the previous box properly. You’ll get it very soon. In the interim, keep the t0 box selected. Awesome. Here we go with that math. With the text box still selected, we are going to look at the Attributes pane. Let’s start by typing hard coordinates into the attributes pane. Scroll to the bottom of the pane and you will see x, w, w, and h. Yup, those are what we’ll work with next. Note that you’ve got a w of 100, and an h of 30. This is the size of the text box, we’ll adjust this in a moment, for now we want to adjust x and y. In the x box type in 50 then select the y box. You’ll note that the text box moved to the right by 50 pixels. Ah, we’re on to something now, right? <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Moved_The_TextBox_first-1024x687.png\")
<\/figure>\n<\/div>\n\n\nNow, we’ll move it down by hard typing the coordinate into the y. Let’s take 0 and add 50. You guessed it, type in 50 and you’ll see the textbox move. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Moved_The_TextBox_second-1024x688.png\")
<\/figure>\n<\/div>\n\n\nCatching the hang of this? Awesome. Now let’s show what each page will need as far as text boxes, and then we’ll get back to building them all out. They are: <\/p>\n\n\n\n
- \n
- MMDVM<\/strong> (p0)\n
- \n
- Four text boxes named t0 through t3. <\/li>\n<\/ul>\n<\/li>\n\n\n\n
- DSTAR<\/strong> (p1)\n
- \n
- Five text boxes named t0 through t4.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- DMR<\/strong> (p2)\n
- \n
- Eight text boxes named t0 through t7.<\/li>\n\n\n\n
- Four text boxes named t0bis through t3bis (We’ll get there, trust…) <\/li>\n<\/ul>\n<\/li>\n\n\n\n
- YSF<\/strong>(p3)\n
- \n
- Five text boxes named t0 through t4.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- P-25<\/strong>(p4)\n
- \n
- Four text boxes named t0 through t3.<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- NXDN<\/strong>(p5)\n
- \n
- Four text boxes named t0 through t3.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
That’s it. Those are the text boxes we have<\/strong> to have, but you’re going to see that I will add others to accomplish labeling. <\/p>\n\n\n\n
So, starting on the MMDVM page, let’s make sure we have the text boxes placed. So far, we’ve placed the T0. You’ll note that it is slightly encroaching on the green of the background image. I will tweak that now by moving the text box downward by a few pixels. This is where the match comes in. I ‘pad’ by adding a few pixels here and there, and base most of my placement on what visually looks good to me. You do the same. I’m going to change my x\/y setting to x=50 (no change) and the y to 52. This will bump the text box downward 2 pixels. I’m also going to make the textbox extend to the edge of the screen by making the width 240 – 50 = 190 pixels, leaving the text box 30 pixels in height. <\/p>\n\n\n\n
![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/NExtion_Neditor_t0_adjusted_to_final-1024x684.png\")
<\/figure>\n\n\n\nNow we can select the font that the text box will use when it is given instructions to display a message. We have to change the maximum characters the textbox will accept, so that if we have a longer string passed to it, it will display it and not ignore it. We do that by adjusting the txt_maxl box to a number we will never exceed. I typically use 50, but 20 most likely will always suffice. I also change the ‘newtxt’ to display a quick reminder message for me as I’m working on the page as to what the box is, and avoid future confusion. I double click the ‘newtxt’ which highlights the text in the box, and then type ‘Box 1, dummy’ or whatever message you’d like it to say for the time you’re working on the page. We’ll cover initiation messages coming up, but for now… You’ll note that the default font is 0. We can adjust the size of the font by using the fonts we generated earlier. I will set the font box to the corresponding number for the font I want to use. In this case, 1. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_t0_font_selected_and_changed-1024x684.png\")
<\/figure>\n<\/div>\n\n\nNow I can move on to adding the second text box, placing it, and changing the parameters of what font will be displayed, etc. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_second_textbox_added.png\")
<\/figure>\n<\/div>\n\n\nNote the difference in the fonts displayed. Also note that the first text box doesn’t have any real defining boundaries without it being selected. Should you want it to appear 3D, we can do that too, as well as simply putting a border around it. We’ll look at that now. Select the t0 text box. In the Attribute pane, you will see a box that is named style. You can go through the different styles and set this as you please. In my case, I will select 3D_Down. Bear in mind that any ‘effects’ that you put on the text box will add pixels that you must pad for in placing the text boxes, but with that in mind, feel free to experiment and see what they will be like when you upload the final product to the Pi-Star Stack. You can see the effect by deselecting the t0 box by clicking anywhere outside of that box. Note the changes I’ve made in the Attribute box in the next image. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_t0_effect_added_and_attribute-adjusted-1024x681.png\")
<\/figure>\n<\/div>\n\n\nI purposefully have the t1 textbox on the screen so you can compare as we build the page. Now, we’ll move the t1 box down to a position, add the effect, max characters, and sizing all in one fell swoop. Lets do some math. If you notice, we’ve got the top left corner of the t0 box at the coordinates 52, 54. If I place the t1 box in the same coordinates, it will overlay the t0. We don’t want to do that, so I’m going to add 30 to it (the height of the text box) and position it on the y coordinates, but adding 2 for padding, making the final number 86. So our t1 box is now placed at x 52 and y86. I’m going to match the numbers and settings for the other boxes except the txt box, which will say ‘Box 2, Dummy’. Now we have the following. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_t1_added_sized_and_complete.png\")
<\/figure>\n<\/div>\n\n\nWe will do the same for the next two text boxes, adding the appropriate padding and positioning to allow them to rest in the screen in a decent visual arrangement. The arrangement of the boxes should be based on the information that they contain, so now is a good time to list what text boxes do what depending upon the page you’re on, which happens in the background of the Pi-Star, or WPSD software, once you’ve loaded the Nextion display driver into your configuration. <\/p>\n\n\n\n
- \n
- MMDVM<\/strong> (home) Page\n
- \n
- t0 is the textbox that the program uses to display ‘owner call and ID or error text’ LOCKOUT. Cleared on successful boot. <\/li>\n\n\n\n
- t1 is the textbox that the program uses to display ‘status \/ ERROR’ messages. Cleared on successful boot.<\/li>\n\n\n\n
- t2 is the textbox that the program uses to display ‘date & time’. <\/li>\n\n\n\n
- t3 is the textbox that the program uses to display the network connection information including network IP upon successful boot and obtaining an IP. <\/li>\n\n\n\n
- t4 is the textbox for owner call (from Pi-Star MMDVM Host settings)<\/li>\n\n\n\n
- t5 is the textbox for owner ID (I assume this is the DMR ID, I don’t use it, so…) <\/li>\n\n\n\n
- t30 is the textbox that will display RXfrequency (from Pi-Star MMDVM host settings)<\/li>\n\n\n\n
- t32 is the textbox that will display TXfrequency (from Pi-Star MMDVM host settings)<\/li>\n\n\n\n
- t20 is the textbox that will display CPU temp in C (can be changed to F in MMDVM host to display F, Setting = DisplayTempInFahrenheit=1)<\/li>\n\n\n\n
- t31 is the textbox that will display location (from the Pi-Star MMDVM host settings)<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- D-Star<\/strong> Page\n
- \n
- t0 is the textbox that will display the type my1, my2 information (reported from the D-Star mode)<\/li>\n\n\n\n
- t1 is the textbox that will display the ‘your’ (reported from the D-Star mode)<\/li>\n\n\n\n
- t2 is the textbox that will display the ‘reflector’ (reported from the D-Star mode)<\/li>\n\n\n\n
- t3 is the textbox that will display ‘rssi’ (reported from the D-Star mode)<\/li>\n\n\n\n
- t4 is the textbox that will display the ‘ber’ (reported from the D-Star mode)<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- DMR<\/strong> Page\n
- \n
- t0 is the textbox that will display src1 id \/ call \/ TA (reported from DMR mode, Time Slot 1, reported ID or DMR ID which could be call sign or DMRID.) <\/li>\n\n\n\n
- t1 is the textbox that will display dst (Talkgroup or ‘distribution’ for Timeslot 1)<\/li>\n\n\n\n
- t2 is the textbox that will display src 2 id \/ call \/ TA (reported from DMR mode, Time Slot 2, reported ID or DMR IS which could be call sign or DMRID.)<\/li>\n\n\n\n
- t3 is the textbox that will display dst (Talkgroup or ‘distribution’ for Timeslot 2)<\/li>\n\n\n\n
- t4 is the textbox that will display rssi1 (Timeslot 1 rssi.)<\/li>\n\n\n\n
- t5 is the textbox that will display rssi2 (Timeslot 2 rssit)<\/li>\n\n\n\n
- t6 is the textbox that will display ber1 (Timeslot 1 ber)<\/li>\n\n\n\n
- t7 is the textbox that will display ber2 (Timeslot 2 ber)<\/li>\n\n\n\n
- t8 is the textbox that will display talkgroup name TS2<\/li>\n\n\n\n
- t9 is the textbox that will display talkgroup name TS1<\/li>\n\n\n\n
- t10 through t12 are no longer used<\/li>\n\n\n\n
- t13 through t17 are the textboxes that will display CSV data for Timeslot 2<\/li>\n\n\n\n
- t18 through t22 are the textboxes that will display CSV data for Timeslot 1<\/li>\n\n\n\n
- t0bis <\/li>\n<\/ul>\n<\/li>\n\n\n\n
- YSF<\/strong> Page\n
- \n
- t0 is the textbox that will display type, source (Usually the call and ID of the received signal)<\/li>\n\n\n\n
- t1 is the textbox that will display dst<\/li>\n\n\n\n
- t2 is the textbox that will display src<\/li>\n\n\n\n
- t3 is the textbox that will display rssi<\/li>\n\n\n\n
- t4 is the textbox that will display ber<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- P25<\/strong> Page\n
- \n
- t0 is the textbox that will display type, source<\/li>\n\n\n\n
- t1 is the textbox that will display dst<\/li>\n\n\n\n
- t2 is the textbox that will display rssi<\/li>\n\n\n\n
- t3 is the textbox that will display ber<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- NXDN<\/strong> Page\n
- \n
- t0 is the textbox that will display type,source<\/li>\n\n\n\n
- t1 is the textbox that will display dst<\/li>\n\n\n\n
- t2 is the textbox that will display rssi<\/li>\n\n\n\n
- t3 is the textbox that will display ber<\/li>\n<\/ul>\n<\/li>\n\n\n\n
- POCSAG<\/strong> Page (I don’t use, but the info is good to have.)\n
- \n
- t0 is the textbox that will display waiting \/RIC<\/li>\n\n\n\n
- t1 is the textbox that will display message<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
Knowing the above, we can reference the information that we want to display on our pages. I try to keep things simple, and therefore when they don’t work properly, they become more simple to troubleshoot. We can inundate ourselves with information, but at what benefit? I like simply displaying the DMR Timeslots as 1 and 2, and then displaying the information of the caller and talkgroup. The rssi and ber are tertiary, or secondary information that I can either take or leave without losing the gist of what I’m trying to accomplish. I include them in my builds just to make sure there is enough information to explain why a signal is good, bad, or indifferent. The other information isn’t necessary to do any of this, and is only, in my opinion, used to stack far too much information to be useful to me. I may use the RXfrequency and TXfrequency, just because I have historically hard written those into text boxes that weren’t numbered properly to be changed if I change the configuration of the Pi-Star, but even then it could be difficult to fit everything into the limited amount of space. Back on task. Let’s finish the build for the MMDVM page, then we’ll go through the DMR page, etc. <\/p>\n\n\n\n
So far, as a reminder, we’ve accomplished the following. I will change the text in the boxes from the ‘Dummy’ message to the information that will be passed. Then we’ll set up the home screen to ‘initializing’ settings. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_t1_added_sized_and_complete-1.png\")
<\/figure>\n<\/div>\n\n\nSo, let’s change the first two boxes’ information to state what the information actually will be. Then we’ll complete this page by adding the next two textboxes, and then setting the Preinitialize Event settings. I’ve added the following textboxes:<\/p>\n\n\n\n
- \n
- t2 – set the txt to date&time, the txt_maxl to 50, the x to 52, the y to 118, the w to 186, the h to 30, font to 2, and the style to 3D_Down<\/li>\n\n\n\n
- t3 – set the txt to Network, the txt_maxl to 50, the x to 52, the y to 150, the w to 186, the h to 30, font to 2, and the style to 3D_down<\/li>\n\n\n\n
- tRX (will never get called to be changed, this is intentional and set as a label) – set the txt to Receive, the txt_maxl to 10, the x to 52, the y to 182, the w to 10, the h to 30, the font to 2, and left the style as flat<\/li>\n\n\n\n
- t30 – set the txt to RXFreq, the txt_maxl to 25, the x to 52, the y to 214, the w to 186, the h to 30, the font to 1, and left the style as flat. <\/li>\n\n\n\n
- tTX (same as tRX, will never change) – set the txt to Transmit, the txt_maxl to 25, the x to 52, the y to 246, the w to 100, the h to 30, the font to 2, and left the style as flat. <\/li>\n\n\n\n
- t32 – set the txt to TXFreq, the txt_maxl to 25, the x to 52, the y to 278, the w to 186, the h to 30, the font to 1, and left the style as flat. <\/li>\n<\/ul>\n\n\n\n
That’s it, we’re done with assembling the MMDVM screen, which will serve as the home screen of the Pi-Star stack. Now we’ll set the text boxes to their initial states on boot up. I like humor, which is evident in that which I do at times. Let’s take a look at the Event pane on the editor. If you click outside of the canvas, it will deselect any box that you had selected, which is what we want at this point. We will be inputting a little bit of code here, but don’t worry, it isn’t difficult. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Event_Pane.png\")
<\/figure>\n<\/div>\n\n\nMake sure, just as you see in the above image, that the Preinitialize Event(0) is the highlighted tab before you begin. Once that is verified, we are going to type into that box the following:<\/p>\n\n\n\n
t0.txt=\"Bruh, be patient\"\nt1.txt=\"I'm thinking...\"\nt2.txt=\"I'll let you know\"\nt3.txt=\"If I load\"\nt30.txt=\"Everything\"\nt32.txt=\"Correctly\"<\/code><\/pre>\n\n\n\nWe can see if the screen will like it by running the debugger, which will show a simulation of the screen initial settings. Note that we left the original messages in the boxes that I told you I like to type to make sure I don’t forget what box does what. Pressing the debugger button will initialize the screen to the code we just put in. Let’s run the debugger. Click on the Debug button on the menu at the top. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Debug.png\")
<\/figure>\n<\/div>\n\n\nYou should see the following.<\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_Debugging_In_Progress-1024x761.png\")
<\/figure>\n<\/div>\n\n\nNotice that the text contained in the boxes has now changed to what we typed into the code above. We can also make the debugger tell the boxes to change the text again, just for grins, so we can see how it will be displayed on the screen. Let’s do that now. You can copy and paste the following into the bottom left box of the debugger that is currently open and then click Run all commands and watch the text boxes change. <\/p>\n\n\n\n
t0.txt=\"\"\nt1.txt=\"Done thinking\"\nt2.txt=\"06\/04\/2026 22:10:08\"\nt3.txt=\"eth0:192.192.192.192\"\nt30.txt=\"440.125000\"\nt32.txt=\"445.125000\"<\/code><\/pre>\n\n\n\nYou’ll note that the wlan0 line goes outside of the boundaries of the box as does the date&time. We have to adjust the font size. We will change that to the next lower value. Let’s do that now. Close the debugger, and let’s click on the network box (t3). Change the font to 1 from 2 and click outside of that box to nothing. Do the same for t2. We’ll run the debugger again and repeat the process. If you get the screen uploaded to the actual device, and then notice any anomalies that we haven’t caught in the build stage, you can fix them prior to screwing everything together and finalizing your build. Run the debugger again, copy and paste the above code changing the text boxes, and click Run all commands. If you’re satisfied with the results, we’ll move on to building the Dstar screen, which should be a much faster process. DMR page will take a little longer, as maybe YSF, but we’re cooking with gas now. <\/p>\n\n\n\n
Once we’ve built the other pages out to full extent, we can also debug them the same way, by typing the following into the debugger command and Run all commands. We cycle through pages with “Page (number we want loaded)”. This will load that page in it’s initialized state (how it would look upon first initialization, in the MMDVM page case, loading everything we told it to into the initialization stage.) We can then run commands such as above (corresponding to the textbox numbering) to make the text boxes change. Easy enough if you pay attention. <\/p>\n\n\n\n
So, let’s build out the DSTAR page now. Close the debugger and click on the DSTAR page in the top right Page pane. Taking notes from the above listed functions, we’ll need textboxes from t0 to t4. We’ll add these and place them on our page to look appropriate. Remember there are no labels when the information is changed in the textboxes, so you’ll have to either label them on the page with textboxes specifically for labeling, or know what it means when the information is displayed. I like the labeling method, so I will add a font that is 12 in size to do this so I can make the smallest text box possible (and still see what it says). It is now listed as font 3. The following is what I’ve designed mine to look like. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DSTAR_built.png\")
<\/figure>\n<\/div>\n\n\nThe tRSSI and tBER boxes are set boxes that won’t change. The txt is set to RSSI and BER, respectively, and the font is the new font 3, at 12 in font size. These are labels to show you what you’re looking at when the screen is active. You could build labels for the other information, but it will be apparent when the screen loads with updated information. <\/p>\n\n\n\n
My DMR page looks like the following. You simply follow the above pattern in the settings for the Attribute pane, and have to do the math to get all of the information onto the screen that you can. Font sizes etc. For brevity sake on this tutorial, I don’t want to go through every page, as the information is redundant, just know that if you use the list I gave you above, you can figure out what information is needed for each page. I only use the particulars that matter for the DMR page, which are Timeslots, Callsigns (ID), and talkgroup for each time slot. KISS. <\/p>\n\n\n
\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_YSF.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_P25.png\")
<\/figure>\n<\/div>\n\n\n![\"\"](\"https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_Neditor_NXDN.png\")
<\/figure>\n<\/div>\n\n\nWith the above images, you can see that I’ve added the trs and tber textboxes. These are my labels and the text will not change. All of the other boxes are numbered as they should be, so simply copy what I’ve got, and you’re in like Flynn. Once completed on all pages, it’s time to upload it to the actual screen we’ll be putting these pages on! <\/p>\n\n\n\n
On the menu under File, you will see TFT file output. If you click on this, it will ask you to save it to a folder. I recommend saving it to the same folder you’ve been working in so you can find it. This is the file we will copy to a microSD card to program the screen to work for us. When you navigate to the folder, you will have to type the name that you want to use for the file too. Don’t forget to put the .tft at the end of it. Once you’re done with navigation and naming, click Output. This will place the tft file in a tft folder so you can keep it easy to find, and separated from the working files. Once the file is output, copy and paste it onto the microSD card. <\/p>\n\n\n\n
Once you’ve copied and pasted the file onto the microSD card, insert it into the microSD card slot on the back of the screen (with the unit not powered on)<\/strong>. Once the card is in the slot, add power to the Pi-Star stack and watch the screen. It will notify you that it is uploading the program. Once it reaches 100%, power the Pi-Star stack down and remove the microSD card from the screen. It’s best to test the screen prior to finalizing the unit by screwing it all together. If the screen works as anticipated, button it up, you’re done!<\/p>\n\n\n\n
That’s it for this tutorial. It took me a long time to write, and I hope it has helped you. <\/p>\n\n\n\n
Until next time…<\/p>\n\n\n\n
~73, WF4RT<\/p>\n","protected":false},"excerpt":{"rendered":"
The Pi-Star stack that we recommend in our post here, shows a Nextion display. The display is a ‘smart’ display, however it is so smart<\/p>\n","protected":false},"author":2,"featured_media":677,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"footnotes":""},"categories":[49,5],"tags":[],"class_list":["post-631","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-moderate","category-software-tutorials"],"featured_image_urls":{"full":["https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR.png",247,330,false],"thumbnail":["https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR-150x150.png",150,150,true],"medium":["https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR-225x300.png",225,300,true],"medium_large":["https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR.png",247,330,false],"large":["https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR.png",247,330,false],"1536x1536":["https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR.png",247,330,false],"2048x2048":["https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR.png",247,330,false],"kreeti-slider-full":["https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR.png",247,330,false],"kreeti-featured":["https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR.png",247,330,false],"kreeti-medium":["https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR.png",247,330,false],"kreeti-medium-square":["https:\/\/www.thezoo2.com\/wp-content\/uploads\/2026\/06\/Nextion_NEditor_DMR.png",247,330,false]},"author_info":{"display_name":"WF4RT","author_link":"https:\/\/www.thezoo2.com\/?author=2"},"category_info":"Moderate<\/a> Software Tutorials<\/a>","tag_info":"Software Tutorials","comment_count":"0","_links":{"self":[{"href":"https:\/\/www.thezoo2.com\/index.php?rest_route=\/wp\/v2\/posts\/631","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thezoo2.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thezoo2.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thezoo2.com\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thezoo2.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=631"}],"version-history":[{"count":11,"href":"https:\/\/www.thezoo2.com\/index.php?rest_route=\/wp\/v2\/posts\/631\/revisions"}],"predecessor-version":[{"id":685,"href":"https:\/\/www.thezoo2.com\/index.php?rest_route=\/wp\/v2\/posts\/631\/revisions\/685"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.thezoo2.com\/index.php?rest_route=\/wp\/v2\/media\/677"}],"wp:attachment":[{"href":"https:\/\/www.thezoo2.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=631"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thezoo2.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=631"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thezoo2.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=631"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- MMDVM<\/strong> (home) Page\n
- Four text boxes named t0 through t3.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n
- MMDVM<\/strong> (p0)\n