{"id":1129,"date":"2022-08-03T05:34:24","date_gmt":"2022-08-03T05:34:24","guid":{"rendered":"https:\/\/blog.embeddedexpert.io\/?p=1129"},"modified":"2022-08-03T05:52:12","modified_gmt":"2022-08-03T05:52:12","slug":"stm32-and-nextion-display-part-5-graph-display","status":"publish","type":"post","link":"https:\/\/blog.embeddedexpert.io\/?p=1129","title":{"rendered":"STM32 and Nextion Display Part 5: Graph display"},"content":{"rendered":"\n<div class=\"wp-block-image\"><figure class=\"aligncenter\"><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 the previous guide (<a rel=\"noreferrer noopener\" href=\"https:\/\/blog.embeddedexpert.io\/?p=1119\" data-type=\"URL\" data-id=\"https:\/\/blog.embeddedexpert.io\/?p=1119\" target=\"_blank\">here<\/a>), we took a look how to control the LED brightness using sliders. In this guide, we shall see how to plot some graphs using nextion display and STM32.<\/p>\n\n\n\n<p>In this guide, we shall cover the following:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Nextion Display setup.<\/li><li>STM32 Setup.<\/li><li>Code.<\/li><li>Demo.<\/li><\/ul>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Nextion Display Setup:<\/h2>\n\n\n\n<p>We start off by adding a new graph as following:<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"461\" height=\"1024\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-27-31-461x1024.png\" alt=\"\" class=\"wp-image-1130\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-27-31-461x1024.png 461w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-27-31-135x300.png 135w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-27-31-400x888.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-27-31-250x555.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-27-31.png 466w\" sizes=\"(max-width: 461px) 100vw, 461px\" \/><\/figure><\/div>\n\n\n\n<p>Resize the graph as your need and from attribute, check the ID (ID1 in my case):<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"358\" height=\"1024\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-29-14-358x1024.png\" alt=\"\" class=\"wp-image-1131\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-29-14-358x1024.png 358w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-29-14-105x300.png 105w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-29-14-400x1143.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-29-14-250x715.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-29-14.png 424w\" sizes=\"(max-width: 358px) 100vw, 358px\" \/><\/figure><\/div>\n\n\n\n<p>Now, debug the LCD code:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"330\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/2022-07-24_07-21-30-1024x330.png\" alt=\"\" class=\"wp-image-1097\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/2022-07-24_07-21-30-1024x330.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/2022-07-24_07-21-30-300x97.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/2022-07-24_07-21-30-768x248.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/2022-07-24_07-21-30-1150x371.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/2022-07-24_07-21-30-750x242.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/2022-07-24_07-21-30-400x129.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/2022-07-24_07-21-30-250x81.png 250w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/07\/2022-07-24_07-21-30.png 1222w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>In string area, enter those command:<\/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;}\">add 1,0,100\nadd 1,0,200\nadd 1,0,100\nadd 1,0,000\nadd 1,0,100\nadd 1,0,200\nadd 1,0,100\nadd 1,0,000<\/pre><\/div>\n\n\n\n<p>The arguments as following:<\/p>\n\n\n\n<p>add ID,channel,value (value from 0 to 255)<\/p>\n\n\n\n<p>you should get something similar:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"766\" src=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-33-36-1024x766.png\" alt=\"\" class=\"wp-image-1132\" srcset=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-33-36-1024x766.png 1024w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-33-36-300x224.png 300w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-33-36-768x575.png 768w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-33-36-1536x1149.png 1536w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-33-36-2048x1532.png 2048w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-33-36-1150x860.png 1150w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-33-36-750x561.png 750w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-33-36-400x299.png 400w, https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/2022-08-03_08-33-36-250x187.png 250w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Now, you can upload the code to the display using SD-card method as mentioned in part 2 of the series.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. STM32 Setup:<\/h2>\n\n\n\n<p>We start off by nextion plot graph declaration:<\/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;}\">void nextion_plot_graph(uint16_t id ,uint16_t channel, uint8_t value)<\/pre><\/div>\n\n\n\n<p>The function takes three arguments:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>id which the ID of the plot graph.<\/li><li>Channel of the graph.<\/li><li>Value to be drawn (from 0 to 255).<\/li><\/ul>\n\n\n\n<p>Inside the function, we declare a buffer that holds 50 characters 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;}\">char buff[50];<\/pre><\/div>\n\n\n\n<p>Then, we shall use sprintf to create the required string 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;C&quot;,&quot;language&quot;:&quot;C&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;c&quot;}\">sprintf(buff,&quot;add %d,%d,%d&quot;,id,channel,value);<\/pre><\/div>\n\n\n\n<p>Write the buffer:<\/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;}\">send_uart(buff);<\/pre><\/div>\n\n\n\n<p>Send the 3 0xFF to indicate the end of string:<\/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;}\">\tuart1_write(0xFF);\n\tuart1_write(0xFF);\n\tuart1_write(0xFF);<\/pre><\/div>\n\n\n\n<p>In main.c file:<\/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;delay.h&quot;\n#include &quot;string.h&quot;\n#include &quot;nextion_uart.h&quot;\n#include &quot;LED_PWM.h&quot;\n#include &quot;stdlib.h&quot;\n\/*Nextion Buffer size*\/\n\n\nchar data_send[10];\nuint8_t counter;\nint main(void)\n\t{\n\tSCB-&gt;CPACR |= ((3UL &lt;&lt; 10*2)|(3UL &lt;&lt; 11*2));\n\tLED_PWM_init();\n\tsystick_init_ms(16000000);\n\tnextion_uar_init(115200,16000000);\n\n\twhile(1)\n\t\t{\n\t\tnextion_plot_graph(1,0,random()%254);\n\t\tdelay(10);\n\t\t}\n\t}\n\n<\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">3. Code:<\/h2>\n\n\n\n<p>You may  download the code which includes all previous codes from here:<\/p>\n\n\n\n<div class=\"wp-block-file\"><a href=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/NEXTION_Display.zip\">NEXTION_Display<\/a><a href=\"https:\/\/blog.embeddedexpert.io\/wp-content\/uploads\/2022\/08\/NEXTION_Display.zip\" class=\"wp-block-file__button\" download>Download<\/a><\/div>\n\n\n\n<p><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">4. Demo:<\/h2>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Graphs on Nextion display with STM32\" width=\"1170\" height=\"878\" src=\"https:\/\/www.youtube.com\/embed\/_HuJ3wgX-M4?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>Happy coding \ud83d\ude42<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In the previous guide (here), we took a look how to control the LED brightness using sliders. In this guide, we shall see how to plot some graphs using nextion display and STM32. In this guide, we shall cover the following: Nextion Display setup. STM32 Setup. Code. Demo. 1. Nextion Display Setup: We start off [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,19,11,17],"tags":[],"class_list":["post-1129","post","type-post","status-publish","format-standard","hentry","category-embedded-systems","category-lcd","category-peripheral-drivers","category-tm4c123"],"_links":{"self":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/1129"}],"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=1129"}],"version-history":[{"count":2,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/1129\/revisions"}],"predecessor-version":[{"id":1136,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=\/wp\/v2\/posts\/1129\/revisions\/1136"}],"wp:attachment":[{"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1129"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1129"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.embeddedexpert.io\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1129"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}