{"id":1081,"date":"2022-07-20T05:42:53","date_gmt":"2022-07-20T05:42:53","guid":{"rendered":"https:\/\/blog.embeddedexpert.io\/?p=1081"},"modified":"2022-07-20T05:42:56","modified_gmt":"2022-07-20T05:42:56","slug":"stm32-and-nextion-display-part-1-environment-setup","status":"publish","type":"post","link":"https:\/\/blog.embeddedexpert.io\/?p=1081","title":{"rendered":"STM32 and Nextion Display Part 1: Environment Setup"},"content":{"rendered":"\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img decoding=\"async\" src=\"https:\/\/m.media-amazon.com\/images\/S\/abs-image-upload-na\/9\/AmazonStores\/ATVPDKIKX0DER\/4551205750cd023df17bdecd5dbbb3ee.w400.h400.jpg\" alt=\"\" \/><\/figure><\/div>\n\n\n\n<p>In this guide, we shall see how to work with Nextion display with STM32. <\/p>\n\n\n\n<p>In this part of guide, we shall cover the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>What is nextion display.<\/li><li>Nextion editor Setup.<\/li><li>STM32 setup.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. What is Nextion Display:<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>Nextion is a Seamless Human Machine Interface (HMI) solution that provides a control and visualisation interface between a human and a process, machine, application or appliance. Nextion is mainly applied to IoT or consumer electronics field. It is the best solution to replace the traditional LCD and LED Nixie tube.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"https:\/\/wiki.iteadstudio.com\/images\/7\/73\/Nextionweather.jpg\" alt=\"\" \/><\/figure>\n\n\n\n<p>Nextion includes hardware part (a series of TFT boards) and software part (the\u00a0<a href=\"http:\/\/nextion.itead.cc\/\">Nextion editor<\/a>). The Nextion TFT board uses only one serial port to communicate. It lets you avoid the hassle of wiring. We notice that most engineers spend much time in application development but get unsatisfactory results. In this situation, Nextion editor has mass components such as button, text, progress bar, slider, instrument panel etc. to enrich your interface design. And the drag-and-drop function ensures that you spend less time in programming, which will reduce 99% of your development workloads. With the help of this WYSIWYG editor, designing a GUI is a piece of cake.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Nextion Editor Setup:<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>First thing is head to Nextion Editor from <a rel=\"noreferrer noopener\" href=\"https:\/\/nextion.tech\/nextion-editor\/#_section1\" data-type=\"URL\" data-id=\"https:\/\/nextion.tech\/nextion-editor\/#_section1\" target=\"_blank\">here<\/a>.<\/p>\n\n\n\n<p>Then press on download EXE file:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"438\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/Screen-Shot-2022-07-20-at-8.08.17-AM-1024x438.png\" alt=\"\" class=\"wp-image-1082\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/Screen-Shot-2022-07-20-at-8.08.17-AM-1024x438.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/Screen-Shot-2022-07-20-at-8.08.17-AM-300x128.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/Screen-Shot-2022-07-20-at-8.08.17-AM-768x328.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/Screen-Shot-2022-07-20-at-8.08.17-AM-1536x657.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/Screen-Shot-2022-07-20-at-8.08.17-AM-2048x875.png 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/Screen-Shot-2022-07-20-at-8.08.17-AM-1150x492.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/Screen-Shot-2022-07-20-at-8.08.17-AM-750x321.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/Screen-Shot-2022-07-20-at-8.08.17-AM-400x171.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/Screen-Shot-2022-07-20-at-8.08.17-AM-250x107.png 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>After download, install the program (simple next next ).<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. STM32 Setup:<\/h2>\n\n\n\n<p><\/p>\n\n\n\n<p>Connecting the Nextion display to the STM32 is very straightforward. You just need to make four connections: GND, RX, TX, and +5V. These pins are labeled at the back of your display, as shown in the figure below.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/12\/nextion-pins-f.jpg?resize=682%2C423&amp;quality=100&amp;strip=all&amp;ssl=1\" alt=\"\" class=\"wp-image-48123\" \/><\/figure><\/div>\n\n\n\n<h3 class=\"wp-block-heading\">Nextion display pinout<\/h3>\n\n\n\n<p>Here\u2019s how you should wire the Nextion display:<\/p>\n\n\n\n<figure class=\"wp-block-table is-style-regular\"><table><tbody><tr><td><strong>Nextion<\/strong><\/td><td class=\"has-text-align-center\" data-align=\"center\"><strong>Wiring to<\/strong><\/td><\/tr><tr><td>GND<\/td><td class=\"has-text-align-center\" data-align=\"center\">GND<\/td><\/tr><tr><td>RX<\/td><td class=\"has-text-align-center\" data-align=\"center\">PA9 (USART1 TX)<\/td><\/tr><tr><td>TX<\/td><td class=\"has-text-align-center\" data-align=\"center\">PA10 (USART1 RX)<\/td><\/tr><tr><td>VCC<\/td><td class=\"has-text-align-center\" data-align=\"center\">5V<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Since the utilitized Serial is USART1, we need to configure the USART1.<\/p>\n\n\n\n<p>The following is the configuration:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Baud 115200 (depending on your model)<\/li><li>RX in interrupt mode<\/li><li>TX in polling mode.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p>Hence, the configuration is as following:<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;clike&quot;,&quot;mime&quot;:&quot;text\/x-csrc&quot;,&quot;theme&quot;:&quot;dracula&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;fileName&quot;:&quot;&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">#include &quot;stm32f4xx.h&quot;\n#include &quot;nextion_uart.h&quot;\n#include &quot;stdio.h&quot;\n#include &quot;string.h&quot;\nstatic void uart_set_baudrate(USART_TypeDef *USARTx, uint32_t PeriphClk,  uint32_t BaudRate);\n#define AF07 0x07\n\nuint8_t comend[3]={0xFF,0xFF,0xFF};\n\nvoid nextion_uar_init(uint32_t baud,uint32_t freq)\n{\n\t\/*Enable clock access to GPIOA and USART1*\/\n\tRCC-&gt;APB2ENR|=RCC_APB2ENR_USART1EN;\n\tRCC-&gt;AHB1ENR|=RCC_AHB1ENR_GPIOAEN;\n\t\/*Configure the GPIO for UART Mode*\/\n\tGPIOA-&gt;MODER|=GPIO_MODER_MODE9_1;\n\tGPIOA-&gt;MODER&amp;=~GPIO_MODER_MODE9_0;\n\tGPIOA-&gt;MODER|=GPIO_MODER_MODE10_1;\n\tGPIOA-&gt;MODER&amp;=~GPIO_MODER_MODE10_0;\n\tGPIOA-&gt;AFR[1]|=(AF07&lt;&lt;GPIO_AFRH_AFSEL9_Pos)|(AF07&lt;&lt;GPIO_AFRH_AFSEL10_Pos); \/\/ALT7 for UART1 (PA9 and PA10)\n\t\/*Configure UART*\/\n\tuart_set_baudrate(USART1,freq,baud);\n\tUSART1-&gt;CR1|=USART_CR1_TE|USART_CR1_RE;\n\tUSART1-&gt;CR1|=USART_CR1_RXNEIE;\n\tNVIC_EnableIRQ(USART1_IRQn);\n\tUSART1-&gt;CR1|=USART_CR1_UE;\n}\n\n\n\n\nstatic uint16_t compute_uart_bd(uint32_t PeriphClk, uint32_t BaudRate)\n{\n\treturn ((PeriphClk + (BaudRate\/2U))\/BaudRate);\n}\n\nstatic void uart_set_baudrate(USART_TypeDef *USARTx, uint32_t PeriphClk,  uint32_t BaudRate)\n{\n\tUSARTx-&gt;BRR =  compute_uart_bd(PeriphClk,BaudRate);\n}\n\n\nvoid uart1_write(char ch)\n{\n  \/*Make sure the transmit data register is empty*\/\n\twhile(!(USART1-&gt;SR &amp; USART_SR_TXE)){}\n\n  \/*Write to transmit data register*\/\n\tUSART1-&gt;DR\t=  (ch );\n}\n<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>This is setup for USART1 to communicate between STM32 &amp; Nextion display.<\/p>\n\n\n\n<p>In next part, we shall see how to send strings from STM32 to Nextion display.<\/p>\n\n\n\n<p>Stay tuned \ud83d\ude09<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>Happy coding \ud83d\ude42<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this guide, we shall see how to work with Nextion display with STM32. In this part of guide, we shall cover the following: What is nextion display. Nextion editor Setup. STM32 setup. 1. What is Nextion Display: Nextion is a Seamless Human Machine Interface (HMI) solution that provides a control and visualisation interface between [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,11,12],"tags":[],"class_list":["post-1081","post","type-post","status-publish","format-standard","hentry","category-lcd","category-peripheral-drivers","category-stm32"],"_links":{"self":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/1081"}],"collection":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1081"}],"version-history":[{"count":1,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/1081\/revisions"}],"predecessor-version":[{"id":1083,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/1081\/revisions\/1083"}],"wp:attachment":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1081"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1081"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1081"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}