{"id":5101,"date":"2017-03-17T06:10:27","date_gmt":"2017-03-17T11:10:27","guid":{"rendered":"http:\/\/www.plastibots.com\/?p=5101"},"modified":"2018-07-31T09:53:25","modified_gmt":"2018-07-31T13:53:25","slug":"nextion-tft-lcd-why-you-need-one","status":"publish","type":"post","link":"https:\/\/www.plastibots.com\/index.php\/2017\/03\/17\/nextion-tft-lcd-why-you-need-one\/","title":{"rendered":"Nextion TFT LCD &#8211; Why you need one!"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" class=\"alignright size-thumbnail wp-image-5118\" src=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/Capture-150x150.jpg\" alt=\"capture\" width=\"150\" height=\"150\" \/>I&#8217;ll start this by stating that I don&#8217;t work for iTead, and nor am I getting any sort of kickbacks&#8230; \u00a0 I just really like this TFT LCD. \u00a0I stumbled upon the <a href=\"https:\/\/nextion.itead.cc\/\" target=\"_blank\" rel=\"noopener\">Nextion<\/a>\u00a0(which is a slick easy-to-use TFT LCD with a HMI editor) when they had their first crowdfunding campaign a year or so ago. \u00a0 I ignored it as there was not a lot of documentation, and frankly, I really didn&#8217;t understand the concept of graphics work done on the TFT, and the rest on the MCU. \u00a0 Wish I had taken a gamble at the time. \u00a0Instead, I went down a path building projects using SPI-based TFTs which require a lot of work to draw and manipulate graphics and text. They are also generally slow at drawing as they require the MCU (an ESP8266 in my case) to do the graphics processing work and send them pixel-by-pixel to the TFT.<br \/>\n<!--more--><\/p>\n<p><strong>The Nextion Approach:<\/strong><\/p>\n<p>The Nextion approach\u00a0consists of a TFT LCD that has brains and memory built in, and a Windows editor (HMI) to develop your graphical interface by placing images and text on a screen and designing how they will interact. \u00a0 You can even do some <a href=\"https:\/\/www.itead.cc\/wiki\/Nextion_Instruction_Set\" target=\"_blank\" rel=\"noopener\">programming <\/a>on the base device and more so on the enhanced version (which has GPIO pins). \u00a0You could, for example do an entire project solely on the Nextion screen (enhanced model) by connecting a temperature and other sensors directly and reading the results. \u00a0What I (and most others do) is connect it to an Arduino or \u00a0EPS8266. \u00a0 These MCUs become the brains to process input from sensors etc and simply need to send commands over serial to display results graphically. \u00a0You can see this in action with my\u00a0<a href=\"http:\/\/www.plastibots.com\/index.php\/2017\/01\/03\/wiot-2-weather-station-nextion-tft-with-esp8266\/\" target=\"_blank\" rel=\"noopener\">WIoT-2<\/a>.<\/p>\n<p>The general idea is you develop your interface (HMI) on the Nextion. \u00a0Lay out all the graphics, text, buttons etc and assign them variable names. \u00a0You can then develop your sketch which procesess sensor and other data and sends the commands over serial to update the values in the interface. \u00a0You can also \u00a0control the interface (i.e. change a page, force a button click etc etc). \u00a0In the HMI, you lay out your graphics, buttons and text, compile it, transfer the .tft file to a Micro SD card, then load the card into the back of the Nextion, and power it up. \u00a0This will load the tft file into the firmware of the Nextion. \u00a0Once complete, disconnect power, remove the card, then power it back up. \u00a0You will see your screen with graphics and default values you created. \u00a0You compile the sketch and upload that to the MCU and you have a project! \u00a0 Then, connect +5V, GND and the TX\/RX lines to your MCU and you&#8217;re done.\u00a0 Easy peasy! \u00a0My <a href=\"http:\/\/www.plastibots.com\/index.php\/2017\/01\/03\/wiot-2-weather-station-nextion-tft-with-esp8266\/\" target=\"_blank\" rel=\"noopener\">WIoT-2<\/a> project provides lots of info and as well as a sketch and HMI file.<\/p>\n<table>\n<tbody>\n<tr>\n<td>\n<p><figure id=\"attachment_4990\" aria-describedby=\"caption-attachment-4990\" style=\"width: 150px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/editor.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4990 size-thumbnail\" src=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/editor-150x150.jpg\" alt=\"The Nextion HMI Editor\" width=\"150\" height=\"150\" \/><\/a><figcaption id=\"caption-attachment-4990\" class=\"wp-caption-text\">The Nextion HMI Editor<\/figcaption><\/figure><\/td>\n<td>\n<p><figure id=\"attachment_4971\" aria-describedby=\"caption-attachment-4971\" style=\"width: 150px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2016\/12\/Capture.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-4971 size-thumbnail\" src=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2016\/12\/Capture-150x150.jpg\" alt=\"The Nextion Screen\" width=\"150\" height=\"150\" \/><\/a><figcaption id=\"caption-attachment-4971\" class=\"wp-caption-text\">The Nextion Screen<\/figcaption><\/figure><\/td>\n<td><a href=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/WIoT22018.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5886 size-medium\" src=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/WIoT22018-300x179.png\" alt=\"\" width=\"300\" height=\"179\" srcset=\"https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/WIoT22018-300x179.png 300w, https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/WIoT22018-768x459.png 768w, https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/WIoT22018.png 801w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/td>\n<td>\n<p><figure id=\"attachment_5108\" aria-describedby=\"caption-attachment-5108\" style=\"width: 150px\" class=\"wp-caption alignright\"><a href=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/Schematic2_bb-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5108 size-thumbnail\" src=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/Schematic2_bb-1-150x150.png\" alt=\"Nextion to MCU Connection\" width=\"150\" height=\"150\" \/><\/a><figcaption id=\"caption-attachment-5108\" class=\"wp-caption-text\">Nextion to MCU Connection<\/figcaption><\/figure><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p><strong>About the Cost:<\/strong><\/p>\n<p>There&#8217;s no question that the Nextion TFT&#8217;s are more expensive than other TFT&#8217;s out there. \u00a0 However, you have to consider the total cost of ownership. \u00a0What is your time worth? How complex is it to draw graphics to other TFT&#8217;s? \u00a0Prior to the Nextion, I was using other TFTs that used SPI to communicate. They require graphics and font processing code to be written in your MCU and pushed from the MCU to the screen when displaying content. \u00a0You have to do this for each element. For example, to place some text you have to send separate commands to define which font to use, which size, it&#8217;s colour, and x\/y placement. \u00a0It also requires many debug runs to ensure you have the placement correct. \u00a0This is very time consuming. \u00a0Over 80% of my time coding the original WIoT was dedicated to writing code to manipulate graphic \/ button elements to send to the RA8875 TFT controller and LCD I had. \u00a0Considering this, is that extra ~30% cost of a Nextion worth the many more hours you have to put in coding your project? I can safely say definitely not. \u00a0I estimate that I put in more than 50 hours writing code to interface with the RA8875 driver and coming up with the screens\/graphics\/fonts for my original WIoT. \u00a0It was a lot of work. \u00a0The Nextion and HMI Editor made this easy and slick \u00a0(used in <a href=\"http:\/\/www.plastibots.com\/index.php\/2017\/01\/03\/wiot-2-weather-station-nextion-tft-with-esp8266\/\" target=\"_blank\" rel=\"noopener\">WIoT-2<\/a>). \u00a0I haven&#8217;t even mentioned the time it took me to learn how to create custom fonts and then integrate them into the libraries. \u00a0The Nextion has a tool built-in and does all the heavy lifting automatically. \u00a0Again, don&#8217;t forget &#8211; after doing all this, the other methods require the MCU to draw graphics by sending pixel-by-pixel over the SPI line. \u00a0The Nextion has all graphics and fonts in memory, so all your MCU has to do is issue serial (text) commands to set pictures and change text &#8211; which makes things very zippy. \u00a0As an example, it takes 3-5 seconds to update 1 weather icon with the RA8875 in my original WIoT. \u00a0My MCU is sending a 100x100px image over SPI each time the weather refreshes. \u00a0In WIoT-2, the Nextion does an entire page with all graphics\/text (including background graphic) in 1-2 seconds. \u00a0The reason is all graphics are already in memory. \u00a0So changing a weather icon can be done by simply stating <em>pic=2, <\/em>and BAM it&#8217;s updated in a flash<em>.<\/em>\u00a0 \u00a0That&#8217;s a huge improvement. \u00a0Switching one graphic for another is a split second action and a single command.<\/p>\n<p><strong>Notable Features:<\/strong><\/p>\n<p>Easy Debugging: \u00a0You can do most of the screen feature debugging within the Nextion Editor and it&#8217;s debug window. \u00a0You can simulate commands from the MCU and look at results. All without even having an MCU \/ sketch running.<\/p>\n<p>MCU debugging: \u00a0You can even connect your MCU with running sketch to your PC, open the HMI editor and allow it to push data over serial to the Editors&#8217; debug window to see actual results. \u00a0You don&#8217;t even need a physical Nextion screen. \u00a0So you can develop your project while you wait for your Nextion to arrive in the mail&#8230; \u00a0Oh, and the Editor is a free download (link below).<\/p>\n<p>Font Generation: \u00a0The Nextion Editor comes with a font tool that allows you to select any system font that you have and convert it for use on the Nextion. \u00a0There is no ugly creation or modifications to font libraries etc, it automatically makes the font available (by ID) and embeds it in the TFT file package.<\/p>\n<p><strong>Links:<\/strong><\/p>\n<ul>\n<li>Itead&#8217;s <a href=\"https:\/\/nextion.itead.cc\/\" target=\"_blank\" rel=\"noopener\">Nextion<\/a> Page<\/li>\n<li><a href=\"https:\/\/nextion.itead.cc\/download.html\" target=\"_blank\" rel=\"noopener\">HMI editor<\/a> download. \u00a0You can play with it before you buy a screen. \u00a0You can even debug your MCU with it to try it out.<\/li>\n<li>Where to buy: \u00a0<a href=\"http:\/\/www.banggood.com\/5_0-Inch-Nextion-HMI-Intelligent-Smart-USART-UART-Serial-Touch-TFT-LCD-Module-Display-Panel-p-1113915.html?rmmds=search?p=R90804949020201412E4\" target=\"_blank\" rel=\"noopener\">Nextion TFT LCD 5<\/a>&#8221; \u00a0 \u00a0(Other sizes:<a href=\"http:\/\/www.banggood.com\/Nextion-NX3224T024-2_4-Inch-Man-machine-Interface-HMI-Screen-Kernel-In-English-p-1105052.html?p=R90804949020201412E4\" target=\"_blank\" rel=\"noopener\"> 2.4<\/a>&#8220;, <a href=\"http:\/\/www.banggood.com\/3_2-Inch-Nextion-HMI-Intelligent-Smart-USART-UART-Serial-Touch-TFT-LCD-Screen-Module-p-1105286.html?rmmds=search?p=R90804949020201412E4\" target=\"_blank\" rel=\"noopener\">3.2<\/a>&#8220;, <a href=\"http:\/\/www.banggood.com\/4_3-Inch-Nextion-HMI-Intelligent-Smart-USART-UART-Serial-Touch-TFT-LCD-Module-Display-Panel-p-1114160.html?rmmds=search?p=R90804949020201412E4\" target=\"_blank\" rel=\"noopener\">4.3<\/a>&#8220;, <a href=\"http:\/\/www.banggood.com\/5_0-Inch-Nextion-HMI-Intelligent-Smart-USART-UART-Serial-Touch-TFT-LCD-Module-Display-Panel-p-1113915.html?rmmds=search?p=R90804949020201412E4\" target=\"_blank\" rel=\"noopener\">5.0<\/a>&#8220;, <a href=\"http:\/\/www.banggood.com\/7_0-Inch-Nextion-HMI-Intelligent-Smart-USART-UART-Serial-Touch-TFT-LCD-Screen-Module-p-1105319.html?rmmds=search?p=R90804949020201412E4\" target=\"_blank\" rel=\"noopener\">7.0<\/a>&#8221; ). \u00a0Note &#8211; Although Banggood has a funny name, I use them all the time. \u00a0Prices are competitive, free shipping and the best customer service from an overseas site.<\/li>\n<li><a href=\"http:\/\/www.plastibots.com\/index.php\/2017\/01\/03\/wiot-2-weather-station-nextion-tft-with-esp8266\/\" target=\"_blank\" rel=\"noopener\">WIoT-2<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<table>\n<tbody>\n<tr>\n<td><a href=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/Template-1.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5012 size-medium\" src=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/Template-1-300x243.png\" width=\"300\" height=\"243\" srcset=\"https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/Template-1-300x243.png 300w, https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/Template-1-768x623.png 768w, https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/Template-1.png 801w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/td>\n<td><a href=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/IMG_2920.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-5076 size-medium\" src=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/IMG_2920-300x208.jpg\" alt=\"Garage door status icons\" width=\"300\" height=\"208\" srcset=\"https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/IMG_2920-300x208.jpg 300w, https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/IMG_2920-768x533.jpg 768w, https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/IMG_2920-1024x710.jpg 1024w, https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/IMG_2920.jpg 1525w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/td>\n<\/tr>\n<tr>\n<td>\u00a0<a href=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/OutsidePopup.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5887 size-medium\" src=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/OutsidePopup-300x181.png\" alt=\"\" width=\"300\" height=\"181\" srcset=\"https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/OutsidePopup-300x181.png 300w, https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/OutsidePopup-768x462.png 768w, https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/OutsidePopup.png 791w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/td>\n<td>\u00a0<a href=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/JanInterface2.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5123 size-medium\" src=\"http:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/JanInterface2-300x181.jpg\" alt=\"JanInterface2\" width=\"300\" height=\"181\" srcset=\"https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/JanInterface2-300x181.jpg 300w, https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/JanInterface2-768x464.jpg 768w, https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/JanInterface2.jpg 799w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I&#8217;ll start this by stating that I don&#8217;t work for iTead, and nor am I getting any sort of kickbacks&#8230; \u00a0 I just really like this TFT LCD. \u00a0I stumbled upon the Nextion\u00a0(which is a slick easy-to-use TFT LCD with a HMI editor) when they had their first crowdfunding campaign a year or so ago. \u00a0 I ignored it as there was not a lot of documentation, and frankly, I really didn&#8217;t understand the concept &hellip; <a href=\"https:\/\/www.plastibots.com\/index.php\/2017\/03\/17\/nextion-tft-lcd-why-you-need-one\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":5118,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[65,6,57,69,168,119,44],"tags":[170,159,169,171],"class_list":["post-5101","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-arduino-electronics","category-dyihacks","category-electronics","category-electronics-reviews","category-esp8266","category-iot","category-reviews","tag-esp8266","tag-iot","tag-nextion","tag-nodemcu","has_thumb"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/www.plastibots.com\/wordpress\/wp-content\/uploads\/2017\/01\/Capture.jpg","jetpack_shortlink":"https:\/\/wp.me\/pK41j-1kh","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/www.plastibots.com\/index.php\/wp-json\/wp\/v2\/posts\/5101","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.plastibots.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.plastibots.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.plastibots.com\/index.php\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.plastibots.com\/index.php\/wp-json\/wp\/v2\/comments?post=5101"}],"version-history":[{"count":4,"href":"https:\/\/www.plastibots.com\/index.php\/wp-json\/wp\/v2\/posts\/5101\/revisions"}],"predecessor-version":[{"id":5932,"href":"https:\/\/www.plastibots.com\/index.php\/wp-json\/wp\/v2\/posts\/5101\/revisions\/5932"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.plastibots.com\/index.php\/wp-json\/wp\/v2\/media\/5118"}],"wp:attachment":[{"href":"https:\/\/www.plastibots.com\/index.php\/wp-json\/wp\/v2\/media?parent=5101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.plastibots.com\/index.php\/wp-json\/wp\/v2\/categories?post=5101"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.plastibots.com\/index.php\/wp-json\/wp\/v2\/tags?post=5101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}