STM32 and Nextion Display Part 5: Graph display

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 by adding a new graph as following:

Resize the graph as your need and from attribute, check the ID (ID1 in my case):

Now, debug the LCD code:

In string area, enter those command:

add 1,0,100
add 1,0,200
add 1,0,100
add 1,0,000
add 1,0,100
add 1,0,200
add 1,0,100
add 1,0,000

The arguments as following:

add ID,channel,value (value from 0 to 255)

you should get something similar:

Now, you can upload the code to the display using SD-card method as mentioned in part 2 of the series.

2. STM32 Setup:

We start off by nextion plot graph declaration:

void nextion_plot_graph(uint16_t id ,uint16_t channel, uint8_t value)

The function takes three arguments:

  • id which the ID of the plot graph.
  • Channel of the graph.
  • Value to be drawn (from 0 to 255).

Inside the function, we declare a buffer that holds 50 characters as following:

char buff[50];

Then, we shall use sprintf to create the required string as following:

sprintf(buff,"add %d,%d,%d",id,channel,value);

Write the buffer:


Send the 3 0xFF to indicate the end of string:


In main.c file:

#include "delay.h"
#include "string.h"
#include "nextion_uart.h"
#include "LED_PWM.h"
#include "stdlib.h"
/*Nextion Buffer size*/

char data_send[10];
uint8_t counter;
int main(void)
	SCB->CPACR |= ((3UL << 10*2)|(3UL << 11*2));


3. Code:

You may download the code which includes all previous codes from here:

4. Demo:

Happy coding 🙂

Add Comment

Your email address will not be published. Required fields are marked *