Nextion Gesture Tips & Tricks

Software Development
1

Over the past few months I’ve been working on a Nextion project integrating a Sonoff NSPanel into Home Assistant. The discussions on this forum have provided a lot of really useful information as I’ve learned my way around the Nextion Instruction set (for a ‘Discovery’ class device).

There are some parts of this project that might be of wider interest to other Nextion users. So I’ve made a folder in my GitHub project to share some of these tips, tricks, and traps with a demo HMI file and some documents explaining them. This includes:

  • Gestures: simple and more advanced ways of getting swipe and press gestures to work reliably (especially dealing with some of the unexpected touch behaviours and interactions);
  • Dynamic Round/circular sliders: a demonstration of some of the more advanced things that can be done with realtime processing of touch events (while duplicating the circular slider that comes on the original NSPanel firmware);
  • Geometric functions: arctan and square root approximation subroutines needed for interpreting touch events for some custom UI components.

Round Slider demo

4 Likes
2

Thank you very much for sharing your knowledge.

3

Thank you very much for sharing your knowledge.

4

I’ve added some tips and information now on the graphcial side of designing UIs for small (and imperfect) HMI displays. As with most things on Nextion displays it seems you can create some fantastic results, but only after jumping through a few hoops to identify and work around some issues.

The :large_blue_circle: UI_Design section covers what some of limitations of Nextion displays are (particularly for the NSPanels that I’m using), some ways to address these in your UI designs, and some very detailed design rules (including template SVG components) for an adaption of the Minimalist UI style that has been become popular in Home Assistant (tben’s :sunflower: Lovelace UI • Minimalist and piitaya’s :mushroom: Mushroom Cards ).

With a little patience anyone who is prepared to work methodically in following and adapting the guidelines can create really polished UIs for their HMI projects. The UI components are designed so that they can be adapted and snapped together in a modular way.

Take a look if you want to put a smart new coat of paint on your own UI.

Screenshot working with a template in Inkscape (excellent free SVG editor).

InkScape_Object-Grouping-Hierarchy
InkScape_Object-Grouping-Hierarchy1430×828 137 KB

5

Hi,

Thanks @krizkontrolz for sharing your experience. As a newbie, I’m currently teaching myself on the way to create custom components with nextion, and despite of many hours studying your HMI there is something I could not figure out. I can see some xpic instructions used to redraw the slider, but what kind of magic does the white circle use to appear? And the “right” part of the slider which turns black? It’s could be a serie of slider images to crop but I could not find this serie anywhere. Any help in understanding that magic would be greatly appreciated!

Thanks and best regards,

Olivier