nextion lcd screen pricelist

In the late 1960s, TV viewers were awed by the constellation of LEDs on the console of the Starship Enterprise. During the 1970s, any Hi-Fi worth its salt HAD to have seven-segment LEDs. By the 1990s, anything short of an LCD screen was considered passé. Welcome to the 21st century where touch screens are the standard by which products (and projects) are judged!

Early touch screens required copious amounts of processor memory. Programming was pixel by pixel and extremely memory-intensive (2 bytes (colors) x pixel-width x pixel-height; our small display = 153,600 bits = 38,400 bytes per screen!). As with most things, technology evolves; it’s simplified and eventually codified. Enter the Nextion family of touch screen displays. A current project of mine is just screaming for a touch screen, and research led me to the Nextion; primarily due to its built-in processor and simple-to-use IDE (integrated development environment). I thought I’d share this gem with my N&V friends.

The Basic Nextion displays range in size from 2.4” (240x320 pixels) to 7.0” (800x480 pixels). For the first installment of this series, we’ll discover what it takes to put a basic screen together and get it to do things when we push virtual buttons. In follow-up articles, we’ll add a PIC processor to the mix using ME Labs’ PBP3 programming language, then later refine both ends for more advanced operation.

To get started, you’ll need to download the IDE from https://nextion.itead.cc/resources/documents/instruction-set as well as with the downloads for this article. Patrick Martin (North American Nextion distributor) spent countless hours compiling the Instruction Set for our benefit.

With the IDE open, you can also access the Instruction Set from a tab on the screen. I went to the Instruction URL, selected All (Ctrl-A), copied (Ctrl-C), and then pasted (Ctrl-V) into a new Word document. This enabled me to print the document for easy reference.

Prices correspond to sizes, so for this first project, we’ll select the smallest (and cheapest) size: the NX3224T024_011 2.4” (240x320) screen (Figure 3).

At this point, we need to create a font that can be used with the objects we’ll be placing on the screen. In the top header is the button, Tools. Click on it and select Font Generator. The first entry in the pop-up is Height, which is the font size. By clicking on the drop-down arrow, you’ll see the sizes are in fixed increments (don’t try to enter your own value). To start, 16 is good enough.

Finally, click the X (top right corner) to close the window. You should see your new font appear in the Font window (bottom left on your screen). We now have the bare essentials necessary to create a simple screen project.

In the Toolbox (upper left block), click on Button. A gray block will appear in the top left corner of the display area (center of the screen) with newtxt in the center and b0 (that’s “b” zero) in the top left corner of the button. The lower right screen window is labeled Attribute. You should see b0 selected.

Scroll down, find txt, and change it to Screen 2. Just below txt is txt_maxl. Our text contains eight characters, so change txt_maxl from 10 to 8. Entering the number of characters helps conserve memory. If your txt_maxl value is too small, you’ll get an error. Too large, and you’re wasting memory resources.

The lower right block lists the “attributes” for the selected object; in this case, the button (b0). So, bco will have a gray square and the number 48631. Click on the gray square and select the red option from the drop-down. The window should have a red square and the new number should be 63488; our button should now be red. Change txt to Screen 1 and again change txt_maxl to 8 (refer to Figure 6).

From the Page window, select page0 (our first page). Click on b0 (the button). The Event screen (lower and right of center) offers two choices: Touch Press Event and Touch Release Event. Click on the Touch Release Event tab. Click on the User Code window and type in dp=1; dp will be in blue while =1 will be black. There are no spaces.

In the Main header bar, click on Save, then Compile. To test our work, click on Debug in the Main header. A new window will appear with our page0 and gray button (Figure 7). Click on the gray button (Screen 2) and the next page1 should appear with our red button (Screen 1) showing. Click on it and page0 reappears. Click on them a couple times to get a feel for what’s happening.

The Toolbox shows several different tools that can be incorporated into your project. Let’s look at a few of them and build a more refined experiment that utilizes more of the Nextion capabilities.

Looking at the Instruction Set, pictures can be no larger than the display screen (in our case, 320x240 pixels). They must be formatted as 16-bit 565 color. Choices are jpeg/jpg, bmp, png, tiff, and non-animated gif.

Going back to the Nextion Editor, select Picture from the bottom tab in the lower left block (it should say Fonts now). You should see Picture in the header for that block. Click on the + button. Find the Splash1.png we just made and select it. Click OK, OK. You should now see it in the Picture block.

From the Toolbox, click on Picture; p0 should now appear in the top left corner of your display screen. In the Attribute panel (lower right), double-click on the white space next to pic; click on the Splash1 image, then click OK. It should occupy the display area.

Now we can load components on top of it. If you put a splash screen over objects, the splash will cover and hide everything else. Add your splash screen first.

Click on the Text tool from the Toolbox. You should see a text block displayed in the top left corner of the Display screen. Remember, the Button was labeled b0; the Text component is labeled t0.

In the Toolbox, click on Progress bar. You’ll see an object appear in the top left corner of the Display screen called j0. Move your mouse over the right-most side of j0 until you see horizontal arrows; left-click and drag the right side to the right edge of the screen. Object j0 should now be as wide as the screen. (You could also change the w Attribute to 320.)

In the Attribute window, your h value should be 30. Considering our display height is 240, 240 – 30 = 210. Enter 210 in the Y value. The Progress Bar Object (j0) should now be at the bottom of the screen.

Click on Timer in the Toolbox. Notice a new bar appears in the middle of the screen with tm0. In the Attribute block, change the tim value to 500. Timer value is listed in milliseconds. We get 0.5 second processes with tim=500. In the Event block (bottom right of center), click in the User Code area. Type the following as it appears:

You can access the Instruction Set by clicking on the Instructions tab just below the Main header on the Nextion website (https://nextion.tech) or in the article downloads. For now, there are a few things I wish to point out.

For the green used in the Splash1 screen, Photoshop gave me: R=24, G=193, B=7. When we get the binary for these values (follow the above instructions), the final result is 7680 decimal. Entering that value into any object’s bco gives a close approximation of the green used (this value shown in Figure 12).

Finally, Section 7 — Format of Nextion Return Data explains the UART communication protocol we’ll need when we talk to our PIC processor in our next installment.

In this article, we downloaded the Nextion IDE Editing Software and loaded it with prefabbed objects. We checked our work in the simulator. I suggest playing with various “Attributes” to see what happens.

If this article interests you, jump on Nextion’s website and read their tutorials, and perhaps even order one of their displays. Again, there is a ton of information online applying the Nextion to the Arduino.

After two theory-loaded blog posts about handling data array-like in strings (Strings, arrays, and the less known sp(lit)str(ing) function and Strings & arrays - continued) which you are highly recommended to read before continuing here, if you haven"t already, it"s big time to see how things work in practice! We"ll use a string variable as a lookup lookup table containing data of one single wave period and add this repeatedly to a waveform component until it"s full.A few weeks ago, I wrote this article about using a text variable as an array, either an array of strings or an array of numbers, using the covx conversion function in addition for the latter, to extract single elements with the help of the spstr function. It"s a convenient and almost a "one fits all" solution for most use cases and many of the demo projects or the sample code attached to the Nextion Sunday Blog articles made use of it, sometimes even without mentioning it explicitly since it"s almost self-explaining. Then, I got a message from a reader, writing: "... Why then didn"t you use it for the combined sine / cosine lookup table in the flicker free turbo gauge project?"105 editions of the Nextion Sunday blog in a little over two years - time to look back and forth at the same time. Was all the stuff I wrote about interesting for my readers? Is it possible at all to satisfy everybody - hobbyists, makers, and professionals - at the same time? Are people (re-)using the many many HMI demo projects and code snippets? Is anybody interested in the explanation of all the underlying basics like the algorithms for calculating square roots and trigonometric functions with Nextion"s purely integer based language? Are optimized code snippets which allow to save a few milliseconds here and there helpful to other developers?Looking through the different Nextion user groups on social networks, the Nextion user forum and a few not so official but Nextion related forums can be surprising. Sometimes, Nextion newbies ask questions or have issues although the required function is well (in a condensed manner for the experienced developer, I admit) documented on the Nextion Instruction Set page, accessible through the menu of this website. On top of that, there is for sure one of my more than 100 Sunday blog articles which deals not only with that function, but goes often even beyond the usual usage of it. Apparently, I should sometimes move away from always trying to push the limits and listen to the "back to the roots!" calls by my potential readers...Do you remember the (almost) full screen sized flicker free and ultra rapid gauge we designed in June? And this without using the built-in Gauge component? If not, it"s time to read this article first, to understand today"s improvements. The June 2022 version does its job perfectly, the needle movement is quick and smooth, and other components can be added close to the outer circle without flickering since there is no background which needs constantly to be redrawn. But there was a minor and only esthetic weak point: The needle was a 1px thin line, sometimes difficult to see. Thus, already a short time after publishing, some readers contacted me and asked if there were a way to make the needle thicker, at least 2 pixels.Recently, when playing with a ESP32 based NodeMCU 32S and especially with its WiFi configuration, I did as (I guess) everybody does: I loaded an example sketch to learn more about the Wifi library. When you set up the ESP32 as an access point, creating its own wireless network, everything is pretty straightforward. You can easily hard code the Wifi name (SSID) and the password. But what about the client mode ? Perhaps one needs to use it in different environments. And then, a hard coded network name and password are definitively not the best solution. Thus, I thought, why not use a Nextion HMI for a dynamic WiFi setup functionality?