Start a new topic

gauge image


I have a small (I hope) problem.

I have a background image in my page 0 and I want to use another image for my gauge (let's say p0).

When I compile it and load (through the SD card) to the nextion the image is heavily distorted.

I enclose both the HMI and arduino sketch.

These 2 files may be useful to someone because there are the base elements, and nothing else (I've still to complete), that can be used by a beginner.

In this moment I've written it in italian but can be easily translated.

Thanks for any help 



Your sketch appears to be running a test routine in loop().

If the behaviour you describe, is occurring while you are running the sketch connected to your Nextion, then you need to slow things down. Loop will execute your instructions as fast as possible. Then it will repeat those instructions as fast as possible, over and over. Could be many thousands of time a second.

This call is likely causing a problem.  

 // scelgo l'immagine con indice index (vedi image library del Nextion editor)

 To test, add a delay of 500ms to the loop(). If that works, then you will need to restructure your sketch to only call the image change when necessary. The other instructions need slowing down too for similar reasons.


Other performance improvements....

Increase the baud rate to 115200.

@ line 53 in NexHardware.h set the timeout to 0. 

bool recvRetCommandFinished(uint32_t timeout = 0);


Thanks for the answer but the problem still persist.

I modified the sketch in order to operate only once in the loop but without result. Do you think of a conflict between the background and the gauge image?

I enclose :

- a photo of the screen (taken with my phone)

- the image for the gauge

- the background

- the arduino sketch modified at the end

- the hmi file with the image of the gauge

(32.3 KB)


I've not played with gauges in Nextion Editor before, but from what I can determine with the little information available on the subject. Gauge background images need to be a part of the main page background image. It doesn't seem possible to crop through to a smaller image behind the gauge component.

So recompose the 2 as a single image would appear to be the answer. I may be wrong on this however :-)

That's why I was thinking about a conflict between the 2 images.

Thanks for your time.

Looking at your HMI file

You have your gauge set as a crop image - this means that it will take

  the 70 x 70 region from your picc 7 starting at 350,133  to 419,202

When we look at picture #7 it is only 70x35

Had picture 0 had the picture 7 gauge embedded at the coordinates above there would have been no issue in using crop image

The distortion is caused from read data past the defined coordinate points trying to get to the non existent part of picc 7, reading data past pictures and past the font range - picking up other data and convert this data into pixel colours.

Login or Signup to post a comment