Start a new topic

How to design with Nextion Editor

I'm new to Nextion displays.  I was impressed with the description and with the price and delighted the idea of designing with a WISIWIG editor.  On first sight, I was somewhat underwhelmed with the Nextion Editor. On its own, it is very difficult to design displays that look anything more than rudimentary.  It was obvious that I needed a graphical editor to create a background picture with good looking graphics, buttons, gauges, etc.

Thanks Peter Oakes on YouTube (search for "Peter Oakes Nextion"), I discovered that Microsoft PowerPoint is a great design tool for the graphics I need.

For my 3.5" display, I create a PowerPoint slide 6 inches by 4 inches (the correct aspect ratio) with all the background graphics and images that I need for a page on the Nextion display and save it as a .png file. Then I use Microsoft Paint to resize the .png image to 480x320 pixels.  After that I can load the .png image as a picture into the Nextion Editor and use it as background for a page, which I then overlay with the Nextion controls that I want.  To get the controls to appear transparently over the image, I specify "sta" attribute as "crop image" and the "pic" attribute to the underlying .png image that I imported from PowerPoint.  I do this for each Nextion object on the page, and voila! I have a professional looking GUI.

Many of you will think me a simpleton for not seeing a solution like this immediately.  But I am not a graphical artist and this was all new to me.  I pass it along for folks like me that can use the help.

Finally, I highly recommend Peter Oakes Nextion presentations on YouTube.  They go a lot further than just doing the graphical design and show some nice style for Arduino-Nextion programming.

Michael Wheatley

Login or Signup to post a comment