Senior

Solved

Scroll List :Select (Highlight) on Click , Remove and Add Elements How to?

Forum|Forum|6 years ago
May 5, 2020
11 replies
6778 views

Hi,

I am working on STM32746-DISC Board . I am working with "container" feature of TouchGFX with Scroll List . I have successfully update array elements (Hard Coded) as List Elements as per below link.

https://support.touchgfx.com/docs/tutorials/tutorial-04

// In Screen1View.hpp
void Screen1View::scrollList1UpdateItem(MenuElement& item, int16_t itemIndex)
{
	touchgfx_printf("Update Item = %d\n" ,itemIndex ) ;
 	item.setNumber(itemIndex);
}

// In MenuElement.hpp
const char Rx_Buffer1[11][20] = { "LIST.txt", "HELLO.png", "TouchGFX.gif", "STM32F7.doc", "SCROLL.bmp","NEW.xlsx", "TRY.jpg", "GOOD.bmp", "ABC.png", "XYZ.bmp"								};
  void setNumber(int no)
 {
 		touchgfx_printf("setNumber = %d\n" ,no) ;
 Unicode::itoa(no, textArea3Buffer, TEXTAREA3_SIZE , 10);
 	Unicode::strncpy(textArea3Buffer ,( const char *) Rx_Buffer1[no] , TEXTAREA3_SIZE -1 );
 }

I want to know:

1) Is the right method ?

2) How to Select/Highlight File Name once item is clicked .

and send Selected item (File name) to touchgfx_print windows?

3) How to add/remove the Element (File Name) from List from some other button ?

Please see short video..

--

Karan

ListTouchGFX.rar

This topic has been closed for replies.

Best answer by Alexandre RENOUX

Hello,

I made a small scrollList example to show how to set the color of the item that you selected.

Hope it will be of help.

/Alexandre

Alexandre RENOUX

Visitor II

Hello Karan,

If you followed the Tutorial correctly, this should be correct. Plus, as I can see on the video, this works like it should.

To highlight a File Name, I would suggest you to use the Scroll List instead because you have this highlight feature already implemented.

Please look at the GUI Scroll Wheel and List Example available in TouchGFX Designer for reference.

As well as https://support.touchgfx.com/docs/development/ui-development/ui-components/containers/scroll-wheel

and https://support.touchgfx.com/docs/api/classes/classtouchgfx_1_1_scroll_list.

The feature of adding and removing items is implemented in the GUI ListLayout Example available in TouchGFX Designer.

https://support.touchgfx.com/docs/development/ui-development/ui-components/containers/list-layout

/Alexandre

JHarding

Senior

@Alexandre RENOUX Where exactly are you seeing the "Selected Style Template" option for a scroll list in TouchGFX Designer? When I have a scroll list in a view, these are the only options I have:

Alexandre RENOUX

Visitor II

I am talking about the Scroll Wheel not Scroll List. The Scroll List does not have such feature implemented.

Sorry for the spelling mistake...

And one link was also wrong as it was pointing to the Scroll List class description. Here is the correct link:

https://support.touchgfx.com/docs/api/classes/classtouchgfx_1_1_scroll_wheel

/Alexandre

Karan 123Author

Senior

Hi @Alexandre RENOUX (ST Employee),

Thanks for updates..

But I don't want to highlight item of center from the list as per your suggestion . I want to select/highlight (Outline/Color Change) any one file as below

which is render on Screen .

as In your TouchGFX Demo 1

I have to add/copy/delete file names from one List? USB Mass Storage to another SD Card List ?

So , which widget should I use to serve these purposes

i.e. Select/Add(Copy)/Remove(Delete) ?

Thanks..

--

Karan

Alexandre RENOUX

Visitor II

Hello,

As you mentioned, the code of TouchGFX Demo 1 is a good reference. There's no widget you can use to do that.

The list on the left on the EasingEquation screen was developed specifically for this demo. You can look at EasingEquationButton.hpp/.cpp, EasingEquationButton.hpp/.cpp and EasingEquationView.hpp/.cpp for reference.

EasingEquationButton is a class that represents a (radio) button with a text label and an optional text shadow.

EasingEquationSelector is a custom scrolling list of EasingEquationButtons.

/Alexandre

Karan 123Author

Senior

Hi,

Thanks for your update. I will check and update to you.

1)

But do I implement Add/Copy/delete in that (EasingEquation Case) ?

2)

Will it possible to fetch any (5,67,100) Number File Names from USB Mass Storage Device to Radio Button as in Demo?

--

Karan

Karan 123Author

Senior

Hi @Alexandre RENOUX (ST Employee),

I have go through the Demo (TouchGFX Demo 1 -> Easing Equation) . I have concluded as below:

EasingEquationButton

->For Add Buttons/buttonText/buttonTextShadow

EasingEquationSelector

->For Make Selection of Button

EasingEquationsEnum

-> Easing Equation Selection Enum

EasingEquationPresentor

-> From Model to view

EasingEquationView

-> For Display

1) The radio button(s) are not used from TouchGFX Designer ?

2) Also , No Widgets/Containers are used for from TouchGFX Designer (Such as Scroll List/ List Layout ) ?

3) Everything is coded by programming ..

4) Is there Application Note/Tutorial for that How to add files or something like that?

Will this can be Widget is next release of TouchGFX 4.3.0 ?

--

Karan

Alexandre RENOUX

Visitor II

Hello,

Radio buttons can indeed be created in TouchGFX Designer. But as you can see in the code, EasingEquationButton is not only a radio button but has other attributes so you'll have to code it yourself anyway. Plus, the EasingEquationSelector is also very much customized and has a ListLayout and a ScrollableContainer.

This demo is an old demo that was created way before TouchGFX Designer became what it is now so everything was mostly implemented by coding directly.

TouchGFX Designer provides the basic widgets to let the customer do whatever he wants. If it is basic, the Designer is enough. But as soon as it becomes more complex, it is expected from the customer to code his customized widgets/classes.

This widget won't be in the next release but we'll see if it is relevant to have in the future.

What do you mean by Application Note/Tutorial on How to add files ?

/Alexandre

Karan 123Author

Senior

Hi @Alexandre RENOUX (ST Employee),

Also... I have also explore the code of Scroll Wheel and List Example v1.0.0 .

In which selected file is redrawn at center under "Selected Icon" of Screen .

Is it possible highlight that particular Image (or Text In my Case ) with Changing It's color / Highlight that with Square rather then drawing that under "Selected Icon" ?

I think It should be ...

void Screen1View::scrollListSelected()
{
 selectText.setTypedText(TypedText(T_HEADLINE_SCROLLLIST));
 scrollList.setVisible(true);
 scrollWheel.setVisible(false);
 selectedIcon.setVisible(true);
 selectedVal.setVisible(false);
 scrollWheelFrame.setVisible(false);
 
 selectText.invalidate();
 scrollList.invalidate();
 scrollWheel.invalidate();
 selectedIcon.invalidate();
 selectedVal.invalidate();
 scrollWheelFrame.invalidate();
 
}

Thanks for your concern ..

--

Karan

Karan 123Author

Senior

Hi @Alexandre RENOUX (ST Employee),

Thanks for update and clarification about Easing Equation Button.

I think Scroll Wheel and List Example v1.0.0 . is more suitable and easy implementation for my requirement as I am quite close to that also .

I have tested on Simulator that item is select as well . Please check below screenshort.

https://community.st.com/s/question/0D50X0000Bed8tjSQA/scrolllist-item-selection

The video attached by member seems should work as my requirement also .

https://community.st.com/s/question/0D50X0000B09SiC/visible-items-in-scrolllist

Same by this member .

"I have implemented the highlight functionality by myself (set background of the item black and the text white) since I haven't found another solution.

Is it true that there is no "built in" functionality in TGX to implement such a behaviour?"

How to use Callback for this purpose?

How to implement setHighlighted for item.setHighlighted ?

Thanks for your concern..

--

Karan

Karan 123Author

Senior

Hi @Alexandre RENOUX (ST Employee),

I have also gone through this link .

https://community.st.com/s/question/0D50X0000At0kFM/scrolllistitemselectedhandler-call-back-function-improvement

#ifndef SCREEN1VIEW_HPP
#define SCREEN1VIEW_HPP
 
#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>
 
class Screen1View : public Screen1ViewBase
{
public:
 Screen1View();
 virtual ~Screen1View() {}
 virtual void setupScreen();
 virtual void tearDownScreen();
 
 
protected:
 // Callback which is executed when a item in the scroll list is selected.
 // The parameter itemSelected is the selected item.
 Callback < Screen1View, int16_t > scrollList1ItemSelectedCallback;
 void scrollList1ItemSelectedHandler(int16_t itemSelected);
 
};

But How I can ise setItemSelectedCallback to solve my purpose??

#include <gui/screen1_screen/Screen1View.hpp>
Screen1View::Screen1View() 	 
{
 
}
void Screen1View::setupScreen()
 {
	 Screen1ViewBase::setupScreen();
 // Is the a right ?
 scrollList1.setItemSelectedCallback(scrollList1ItemSelectedCallback);
 
}
void Screen1View::scrollList1ItemSelectedHandler(int16_t itemSelected)
{
 // How to?
	touchgfx_printf("Item Selected = %d \r\n" ,itemSelected) ;
	// Change Color of Clicked Item (High This).
	// and Send that to Name of touchgfx_printf
}
void Screen1View::scrollList1UpdateItem(MenuElement& item, int16_t itemIndex)
{
	touchgfx_printf("Update Item = %d\n" ,itemIndex ) ;
 	item.setNumber(itemIndex);
}

Please advice ..

--

Karan

Alexandre RENOUXBest answer

Visitor II

Hello,

I made a small scrollList example to show how to set the color of the item that you selected.

Hope it will be of help.

/Alexandre

ScrollList_Extended.rar

Karan 123Author

Senior

Thanks for that....

Karan 123Author

Senior

Here is the output video..

Scroll_Extended_vodeo.zip

ChintanParmar

Associate II

Hi @Community member ,

i want to implement same thing what you have done. But in my case, there is no touch screen available and I have a UP and DOWN keys for that functionalities.

If user pressed down key, then from list selection should also go down. In your case, if you select any item then it will be selected till you select another one.

If it is possible then can you please guide me for that? I think I can convert your up down keys functionality with external buttons (hardware keys).

Karan 123Author

Senior

Hi,

For Scroll item in list you can do like this.You can replace Touch Buttons to Hardware Keys

void Screen1View::MyUpButton()
{
	touchgfx_printf("MyUpButton(**) %d \r\n" , selectedMenuItem ) ;
	selectedMenuItem++;
	if(selectedMenuItem > 10 )
		selectedMenuItem = 0 ;
 
	scrollList1.animateToItem(selectedMenuItem,1);
	scrollList1.invalidate();
}
 
void Screen1View::MyDownButton()
{
 
	touchgfx_printf("MyUpButton(**) %d \r\n" , selectedMenuItem ) ;
	selectedMenuItem--;
	if(selectedMenuItem < 0 )
		selectedMenuItem = 10 ;
 
	scrollList1.animateToItem(selectedMenuItem,1);
	scrollList1.invalidate();
}

Item selected / un-selected can be done like below:

oid Screen1View::scrollList1ItemSelectedHandler(int16_t itemSelected)
{
	touchgfx_printf("Item Selected = %d \r\n" ,itemSelected) ;
	touchgfx_printf(Rx_Buffer1[itemSelected]) ;
 	touchgfx_printf(" \r\n" ) ;
	 // touchgfx_printf("Test %d\n", itemSelected);
 for (int i = 0; i < scrollList1ListItems.getNumberOfDrawables(); i++)
 {
 if(!(scrollList1ListItems[i].isSelected()) && itemSelected == scrollList1ListItems[i].getIndex())
 {
 for (int j = 0; j < scrollList1ListItems.getNumberOfDrawables(); j++)
 {
 if(scrollList1ListItems[j].isSelected())
 {
 scrollList1ListItems[j].setUnselected();
 }
 }
 // scrollListListItems[currentIndex].setUnselected();
 scrollList1ListItems[i].setSelected(); 
 currentIndex = itemSelected;
 }
 }
}
 
 
 
 
 
void Screen1View::scrollList1UpdateItem(MenuElement& item, int16_t itemIndex)
{
	touchgfx_printf("Update Item = %d\n" ,itemIndex ) ;
	 item.setIndex(itemIndex);
 // touchgfx_printf("test %d\n", itemIndex);
 
 for (int i = 0; i < scrollList1ListItems.getNumberOfDrawables(); i++)
 {
 if(item.getIndex() == currentIndex)
 {
 item.setSelected();
 }
 else
 {
 item.setUnselected();
 }
 
 }

Hope this helps to you..

--

Karan

ChintanParmar

Associate II

Hi @Community member ,

Thanks for your reply.

I have tried based on your inputs.

But in that box selection logic is not working.

I want to display 10 items in scroll list.

After pressing downkey, it will directly scroll to the last and same happens for upkey.

It should be incremented one by one.

Below is the screenView file.

#include <gui/status_screen/StatusView.hpp>
 
StatusView::StatusView():
scrollListItemSelectedCallback(this, &StatusView::scrollList_digitalInItemSelectedHandler),
previousIndex(100),
currentIndex(100)
{
 
}
 
void StatusView::setupScreen()
{
 StatusViewBase::setupScreen();
 scrollList_digitalIn.setItemSelectedCallback(scrollListItemSelectedCallback);
}
 
void StatusView::tearDownScreen()
{
 StatusViewBase::tearDownScreen();
}
 
void StatusView::DownKeyPressed()
{
	//TODO Write logic for down key for IO screen.
	//touchgfx_printf("MyUpButton(**) %d \r\n" , selectedMenuItem ) ;
	selectedMenuItem--;
	if(selectedMenuItem < 0 )
		selectedMenuItem = 15 ;
 
	scrollList_digitalIn.animateToItem(selectedMenuItem,0);
	scrollList_digitalIn.invalidate();
}
 
void StatusView::UpKeyPressed()
{
	//TODO Write logic for down key for IO screen.
	//touchgfx_printf("MyUpButton(**) %d \r\n" , selectedMenuItem ) ;
	selectedMenuItem++;
	if(selectedMenuItem > 15 )
		selectedMenuItem = 0 ;
 
	scrollList_digitalIn.animateToItem(selectedMenuItem,0);
	scrollList_digitalIn.invalidate();
}
 
 
void StatusView::scrollList_digitalInItemSelectedHandler(int16_t itemSelected)
{
	//touchgfx_printf("Item Selected = %d \r\n" ,itemSelected) ;
	//touchgfx_printf(Rx_Buffer1[itemSelected]) ;
 	//touchgfx_printf(" \r\n" ) ;
	 // touchgfx_printf("Test %d\n", itemSelected);
 for (int i = 0; i < scrollList_digitalInListItems.getNumberOfDrawables(); i++)
 {
 if(!(scrollList_digitalInListItems[i].isSelected()) && itemSelected == scrollList_digitalInListItems[i].getIndex())
 {
 for (int j = 0; j < scrollList_digitalInListItems.getNumberOfDrawables(); j++)
 {
 if(scrollList_digitalInListItems[j].isSelected())
 {
 	scrollList_digitalInListItems[j].setUnselected();
 }
 }
 // scrollListListItems[currentIndex].setUnselected();
 scrollList_digitalInListItems[i].setSelected();
 currentIndex = itemSelected;
 }
 }
}
 
void StatusView::scrollList_digitalInUpdateItem(CustomDIList& item, int16_t itemIndex)
{
	//touchgfx_printf("Update Item = %d\n" ,itemIndex ) ;
	 item.setIndex(itemIndex);
 // touchgfx_printf("test %d\n", itemIndex);
 
 for (int i = 0; i < scrollList_digitalInListItems.getNumberOfDrawables(); i++)
 {
 if(item.getIndex() == currentIndex)
 {
 item.setSelected();
 }
 else
 {
 item.setUnselected();
 }
 }
 
 switch (itemIndex)
 {
 case 0:
 item.UpdateList(T_DILIST_1);
 break;
 case 1:
 item.UpdateList(T_DILIST_2);
 break;
 case 2:
 item.UpdateList(T_DILIST_3);
 break;
 case 3:
 item.UpdateList(T_DILIST_4);
 break;
 case 4:
 item.UpdateList(T_DILIST_5);
 break;
 case 5:
 item.UpdateList(T_DILIST_6);
 break;
 case 6:
 item.UpdateList(T_DILIST_7);
 break;
 case 7:
 item.UpdateList(T_DILIST_8);
 break;
 case 8:
 item.UpdateList(T_DILIST_9);
 break;
 case 9:
 item.UpdateList(T_DILIST_10);
 break;
 case 10:
 item.UpdateList(T_DILIST_11);
 break;
 case 11:
 item.UpdateList(T_DILIST_12);
 break;
 case 12:
 item.UpdateList(T_DILIST_13);
 break;
 case 13:
 item.UpdateList(T_DILIST_14);
 break;
 case 14:
 item.UpdateList(T_DILIST_15);
 break;
 case 15:
 item.UpdateList(T_DILIST_16);
 break;
 }
}

And custom containers list file is as below

#include <gui/containers/CustomDIList.hpp>
 
CustomDIList::CustomDIList():
index(0),
selected(false)
{
 
}
 
void CustomDIList::initialize()
{
 CustomDIListBase::initialize();
}
 
void CustomDIList::UpdateList(TEXTS iconTextID)
{
 text.setTypedText(TypedText(iconTextID));
 text.resizeToCurrentText();
 invalidate();
}
 
void CustomDIList::setIndex(uint8_t ind)
{
 index = ind;
}
 
uint8_t CustomDIList::getIndex()
{
 return index;
}
 
void CustomDIList::setSelected()
{
 box1.setVisible(true);
 invalidate();
 selected = true;
}
 
void CustomDIList::setUnselected()
{
 box1.setVisible(false);
 invalidate();
 selected = false;
}
 
bool CustomDIList::isSelected()
{
 return selected;
}

I am trying to debug out what is happening but getting no positive outcome.

Can you help me for this?

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded