Example for Scroll Wheel with Text-Group Strings?

[Exit0815]

Hello,

i try to create a scroll wheel with some texts as items.

So i created the container and the highlighted container.

Then i created a Group in the Texts "Scrollwheelgroup" with 6 Resources inside.

FristResource, SecondResource, ......

I want to show these Resources in my Scroll Wheel.

Does anyone have an example not using numbers like in the example of TouchGFX?

If the language is changed it will also change the contect of the scroll wheel, thats why i want to do it this way.

Thank you very much.

[Yoann KLEIN]

Hello @Exit0815​ ,

I will attach an example to this post.

To explain quickly what I did to make it work :

In TouchGFXDesigner :

• Add a ScrollWheel to your project.
• Create a CustomContainer and fill it with a TextArea which implements wildcards (do not forget to check the "Use wildcard buffer" in the settings).
• Populate your ScrollWheel with those CustomContainer elements.

In the code :

• In Screen1View.cpp, override the scrollWheel1UpdateItem() method, in order to update the items on the list, every time the user scrolls the wheel (do not forget to declare it also in the header file).

void Screen1View::scrollWheel1UpdateItem(CustomContainer1& item, int16_t itemIndex)
{
    item.updateText(itemIndex);
}

• In CustomContainer.cpp, declare a method which will enable you to access and modify the wildcard values of the TextArea elements in your list, depending on a integer value. Please note here that I am calling TEXTS(value), which refers to an enum of the texts ressources declared in your project. For example, if you wanna display "value1" when you pass "1", and "value2" when you pass "2", the text references in TouchGFXDesigner have to be in the right order.

void CustomContainer1::updateText(int16_t value)
{
	Unicode::snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%s", touchgfx::TypedText(TEXTS(value)).getText()); //Find the correct TEXT_ID based on is position in the TEXTS enum.
	textArea1.invalidate();
}

• Finally, in Screen1View.cpp again, add the following lines to the bottom of the setupScreen() method. It will populate the ScrollWheel elements TextAreas, at the project startup.

void Screen1View::setupScreen()
{
    Screen1ViewBase::setupScreen();
 
    for (int i = 0; i < scrollWheel1ListItems.getNumberOfDrawables(); i++)
    {
        scrollWheel1.itemChanged(i);
        scrollWheel1ListItems[i].updateText(i);
    }
}

Let me know if you have some other questions,

/Yoann

[Exit0815]

Thanks a lot, i finaly got it.

But there is another big question, also related to the scroll wheel.

To use a scroll wheel as a menu, i need to get a callback from the highlighted (selected) item.

I mean, i want to scroll until the item i want is in the highlighted area, and when i then press on it it should call a virtual function for i.e. change the page.

I tried with "scrollWheel1ItemSelectedHandler(int16_t itemSelected)"

And then a switch case, but this is always called, and not only if the highlighted / selected item is clicked.

What is the best way to handle?

Thanks a lot.

[Exit0815]

Thank you very much @Yoann KLEIN​ 

Your solution is much better than mine was. If i sort the texts it works easy, and is very good if some new values will be added.

The problem i was working on (try & error due to missing knowledge) is the callback when i scroll the wheel that the item is in the Selected Item Template and whant to touch on it.

I.e. i want to change the screen to Screen2 when ResourceId3 is in the Selected item and press on it.

What would be the solution for this?

Attached your example with added "Selected Item Template" container.

I hope you can help me. My other idea was that i use a flexButton at the Container2 with Alpha 0 and decide in my Screen1View which item is actually shown in Container2 and the flexButton does whatever ResourceIDX needs.

But i can not get access to the flexButton of the Container.

Maybe there is a very simple solution.

[Yoann KLEIN · Accepted solution]

Hello @Exit0815​ ,

I already provided an example some weeks ago on another post, to achieve screen transitions based on clicks on items of a ScrollList.

In this example, the user can switch, for instance, from Screen1 to Screen2 when he click the second item in the ScrollList. Same for items 3, 4 and 5.

I don´t know if that is exactly what you want to do, but it will surely help you.

Also, I strongly advise you to not implement buttons in the container, because they will gather all click events and then it will become very complicated to scroll the wheel.

Let me know if it helped you and solved your issue !

Thanks,

/Yoann

[Exit0815]

Hello @Yoann KLEIN​ ,

thank you very much. The support is great.

No i found the problem. I am using ScrollWheel and not ScollList.

I was already using a similar function to change the screens but i was confused why it always change the page when i just want to scroll.

Means, if you change the List in your example to a Wheel, scrolling is not possible. As soon as you release the Scroll (mousebutton) the function will be called and change the page.

I will go and try to prevent this by using something like "isInAnimation" to not go into the switchcase.

Maybe you have a better Idea?

ScollList would be an option, but i like the "Selected Template" option in ScrollWheel.

[Exit0815]

That`s it.

Thanks to @Yoann KLEIN​ 

When using a scroll Wheel instead of a scroll List just use the function "isAnimating()" to prevent the Handler doing it's job when release the touch after scrolling.