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

[Karan 123]

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

[Karan 123]

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 123]

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 RENOUX]

Hello,

I corrected the code below (missing one initialization) and add some comments.

#include <gui/screen1_screen/Screen1View.hpp>
Screen1View::Screen1View() :
	    scrollList1ItemSelectedCallback(this, &Screen1View::scrollList1ItemSelectedHandler)
{
 
}
void Screen1View::setupScreen()
 {
	  Screen1ViewBase::setupScreen();
        // Is the a right  ? Yes
       scrollList1.setItemSelectedCallback(scrollList1ItemSelectedCallback);
 
}
void Screen1View::scrollList1ItemSelectedHandler(int16_t itemSelected)
{
	touchgfx_printf("Item Selected = %d \r\n" ,itemSelected) ;
        /* You need to do the changes in the custom container you created for this scroll List. 
           Then you call the function that changes the color and that is implemented in your customContainer */
}

You can change the color like as follows:

scrollList1ListItems[itemSelected].setColor();

ScrollList1ListItems should be declared in Screen1ViewBase.hpp

/Alexandre

[Karan 123]

Hi @Alexandre RENOUX (ST Employee),

Thanks for your update ...

I am doing as below as your suggestion .. Able to send "Selected File name" of touchgfx_printf

But still not able to change the color of selected item ..

Please check and update ..

Thanks for your concern ..

--

Karan

[Alexandre RENOUX]

Hello,

Your function setColor won't do anything. If you look at the code for getColorFrom24BitRGB(), this only returns the color with the amount of Red, Green and Blue that you set as parameters.

To set the color you should call a function like:

box.setColor(touchgfx::Color::getColorFrom24BitRGB(255,0,0));

/Alexandre

[Alexandre RENOUX · Accepted solution]

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

[Karan 123]

Thanks for that....

[Karan 123]

Here is the output video..

[ChintanParmar]

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 123]

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