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

[Alexandre RENOUX]

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]

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

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

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]

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

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

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

[Karan 123]

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

[Alexandre RENOUX]

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