[STM32U599J-DK] TouchGFX ScroolWheel (scroll wheel) detailed tutorial

lugl4313820

[STM32U599J-DK] TouchGFX ScroolWheel (scroll wheel) detailed tutorial [Copy link]

【Foreword】

As the time setting of the watch, you can use text box + button, secondly, keyboard + text box, and thirdly, scroll wheel control. Compared with the three options, the scroll wheel has fewer controls, is intuitive, easy to operate, and does not require verification of input. So it is the preferred option. I searched for tutorials on how to implement the scroll wheel, and the official gave a sample document. After several studies, it still felt not very intuitive. I saw that several big guys on CSDN also wrote detailed tutorials, but the version was too old. So after studying the official documents and the articles of various big guys, I also learned how to use the scroll wheel. I would like to share with you as follows. If there is anything wrong, I hope you can give me some advice.

【Official learning example】

https://support.touchgfx.com/4.19/zh-CN/docs/development/ui-development/ui-components/containers/scroll-wheel.

This tutorial is quite detailed, with Chinese and English documents, but some of the Chinese descriptions are not very accurate. If you are good at English, it is better to read the English documents directly.

【Implementation steps】

1. Create two custom containers. The size of the container is set according to the proportion of the container placed on the screen. One is in the unselected state and the other is in the selected state. This is used to determine the selection result.
   
2. Create a scroll wheel control in our screen:

3. Modify the property values of scroolWheel as shown below, mainly to configure the position, number, selected and unselected status of the text, etc.

At this point, our interface design is complete, and next we need to initialize it in the project.

4. After touchGFX Designer generates the code, open the project with the compiler:

5. In the project, there are textCenterContainerselect.cpp and textCenterContainerunselect.cpp. These are cpp files that implement custom controls. We need to add code to initialize them:

The code is:

void textCenterContainerselect::updateText (int16_t value)

{

Unicode:: snprintf (textBuffer, TEXT_SIZE , "%02d", value);

text.invalidate ( );

}

6. Also add the updateText implementation to another file:

7. Finally, we implement the functions for selecting and changing the scrollWheel in the display:
First, we define two virtual functions in MainView.hpp:
virtual void scrollWheelHourUpdateItem (textCenterContainerunselect& item, int16_t itemIndex);
virtual void scrollWheelHourUpdateCenterItem (textCenterContainerselect& item, int16_t itemIndex);

8. Finally, implement these two functions in mainview.cpp:

code show as below:

void MainView::scrollWheelHourUpdateItem (textCenterContainerunselect& item, int16_t itemIndex)

{

item.updateText(itemIndex);

}

void MainView::scrollWheelHourUpdateCenterItem (textCenterContainerselect& item, int16_t itemIndex)

{

item.updateText(itemIndex);

}

At this point, our interface design and code are complete. The effect of running on the virtual machine is as follows:

The effect of downloading to the development board:

【Summarize】

So far, we have come to the end of the use of the scrollWheel control. It seems like a few steps, but I spent a weekend reading a lot of information and videos, trying N times, and finally realized that there are only a few steps. The learning cost is very high. For this reason, I have recorded all the processes and codes in detail and shared them with you, hoping that it will be useful to you.

wangerxian

There don't seem to be many TouchGFX tutorials on the Internet.

lugl4313820

wangerxian posted on 2023-12-11 14:39 There don’t seem to be many TouchGFX tutorials online.

Yes, it has relatively high requirements for hardware. Recently, ST chips may be used less by domestic users, and the user group is not large. Compared with other stm32 tutorials, there are quite few.

wangerxian

lugl4313820 Published on 2023-12-11 14:53 Yes, he has higher requirements for hardware. Recently, domestic users may use less ST chips, and the user group is not large. Compared with other stm32 teaching...

I remember that Zhengdian Atom has that tutorial, but it is charged.

lugl4313820

wangerxian posted on 2023-12-11 16:59 I remember that Zhengdian Atom has that tutorial, but it is charged.

Yes, the charge seems to be several hundred yuan, but now the version is upgraded once a month, and the original one can only be used for reference, and some changes are very big.

wangerxian

lugl4313820 posted on 2023-12-11 18:21 Yes, the fee seems to be several hundred yuan, but now the version is upgraded once a month, the original version can only be used for reference, some changes are very big.

Yes, I remember that by the time our project was completed, within a year, TouchGFX had updated four or five versions.