Help needed, Gradients on the nextion screen

Nextion Editor
#1

Hi there,

I have been making a beautiful layout for my next Nextion project using a gradient as the background.
Like stated on the Nextion website, the screen uses a 16 bit color space. When I respect these export rules the Nextion editor and screen give me terrible banding on the gradient.

(When exporting from Nextion to an image file the banding is not present, so my guess is that it is not due to software compression?)

This banding problem is so bad that I don’t think it could be the limited color space of the screen either.
Also, I have seen other people use gradients as well with far better results.

I use a Nextion 7" NX8048P070_011 INTELLIGENT. (Should be official)

NextionGradient
NextionGradient1600×480 57 KB

Does anyone know how I can get a smooth/decent gradient for my background?
(I have tried .jpg, .png, I could not figure out how the .xi file works)

Thank you in advance!

#2

JPG and PNG are both compressed formats, the first lossy, the second lossless (in theory). But the Nextion has to expand these to a bitmap for displaying. Better feed directly a bitmap (bmp) in RGB565 encoding, so that the Nextion can display it 1:1 and doesn’t need to do decoding.

1 Like
#3

SOLVED:

Thank you @Fjodor for the help,

I did my designs in PS/AI and exported it as a 16bit PNG. Next I was able to convert this to a RGB565 BMP(Dithered) using the imagemagick command lines. As a result a nice gradient without banding (bmp style).

(Conclusion: Nextion decoder isn’t the best :grin:)

final
final1302×812 60.7 KB

1 Like
#4

This is exactly the same problem that I’m getting.
I have done gradient in AI and then moved it into PS. I have saved it as a 16bit png.

I have also downloaded imagemagick software and installed it. But now I’m lost.
Would you be able to share what you have done to convert it?

Thank you.

#5

Is there any one who will explain the exact solution to this problem?

#6

RBG565 doesn’t support enough colors and thus dithering is the solution.
Find a tool like imagemagick and convert the color range and apply dithering.

image

image
image954×546 23.2 KB

Halftone 4x4 (angled) 100% and 300%

Example using imagemagick:

convert input.bmp -ordered-dither h4x4a,32,64,32 color_565.bmp
convert input.bmp -ordered-dither o2x2,32,64,32 color_565.bmp

Halftone or Ordered produce good results

2 Likes