The Sunday Blog: Understanding and Customizing HMI components

Part 4: The picture component and animations

Today, we’ll have a closer look to the picture component, first, and then see, how we can use it for animations without using too many resources or eating up too much of the precious RAM, even on the NEXTION Basic (T) series.

The picture component

The picture component is, you can see this when browsing its attributes list, nothing more than a hotspot which can at the same time display a previously imported picture resource. It can handle Touch Press and Touch Release events which allows a use similar to a graphical button. It can also, like the hotspot, act as a code container for subroutines which are then triggered by other components with click object,1 for the touch press event, or click object,0 for the touch release event. In today’s project, we’ll use the latter functionality, but let’s look into a few more things, before.

Animation basics

What is an animation? It’s displaying a series of pictures. If the pictures change rapidly enough to make the changes quicker than the inertia of the human vision system, you’ll perceive a continuous movement instead of a series of individual pictures. It’s similar to human audition. When you hear 1 click each second, this will sound like… one click each second. But if the clicks come more close one to another on the time axis, let’s say twenty clicks per second, you’ll not longer distinguish individual clicks, but you’ll hear a low tone. The click or picture frequency threshold is a bit individual for each human to perceive a continuous tone or movement, so there is no general rule. While most people will go through a flip book at a rate of 6 or 8 frames per second (fps) and perceive a clumsy and flickery but continuous movement, others will go to the (analog) movies and tell you that even their 24 fps were flickery and created them a headache. This are clients who’ll prefer the digital movies at 60fps. I’d say that most people will find higher frame rates more convenient, but if you have grown up like me in the 1960s or 1970s, you had probably to look at your Dad’s self shot 8mm home movies which ran at 18fps and you were already amazed.

Animation on the NEXTION HMI

How to display a series of pictures on our NEXTION HMIs? The easiest way is to emulate a flip book (or “thumb cinema” as it was called in Germany and Austria). For our project, we’ll take and import a series of 15 pictures in 208*136px format. Then we’ll add a vertical slider with a minval of 0 and a maximal of 14 on the right side to allow our thumb to browse through the picture series, always attributing the corresponding picture resource to our picture component with the one-liner p0.pic=h0.val, copied over to the slider’s Touch Press, Touch Release, and Touch Move events. But that’s a bad idea: Imagine that the slider is on position 0 and you click directly on the top. Then the picture will immediately jump from resource 0 to 14 without showing you the whole animation.

So, let’s do it in a more streamlined way: Each time the slider is pressed, released, or moved, let’s look which picture index is currently displayed and then let’s iterate forth or back step by step through the picture series until the picture index corresponds the slider’s value. If we try that, we won’t directly see a difference, because the NEXTION will change the .pic attribute several times without refreshing the picture component to save time. Thus, we’ll have to add a doevents after each .pic change to force a refresh. But even this might be to quick for our eyes, thus we’ll add a delay=120 to pull the handbrake and to force a frame rate of around 8fps:

while(h0.val>p0.pic)
{
  p0.pic++
  doevents
  delay=120
}
while(h0.val<p0.pic)
{
  p0.pic--
  doevents
  delay=120
}

Best practice

Best practice would be avoiding the use of delay because it would block everything else and use a timer component instead. But our little demo project is not intended to communicate with an external MCU while the animation runs, thus we’ll keep it simple. But as always, you might download the zipped hmi project from our forums and tweak or re-use it for your projects. What I did to optimize it, though, is not repeating the 12 lines of code 3 times (in the slider’s Touch Press, Touch Release, and Touch Move events), but I put it in the picture component’s Touch Press event as a container. The slider’s event code shows now only 3 times the