cancel
Showing results for 
Search instead for 
Did you mean: 

Visible items in ScrollList

bitlischieber
Associate III

Hello

Is there a way to determine which items in a ScrollList are visible at the moment (item index)?

Because the user will control the GUI by buttons i like highlight the currently selected item in the list (similar behaviour like a list on a PC program which is scrolled by the up and down keys).

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?

To know which items are visible would facilitate the implementation of my desired behaviour.

Unfortunately https://touchgfx.zendesk.com/hc/en-us/articles/360018095032-Scroll-List did not help me very much.

Thanks!

1 REPLY 1
bitlischieber
Associate III

Hello void

I figured out a workaround: By consecutively remembering the index of the top entry of the list, I am able to calculate the position of item to be highlighted.

I duno if there is a more appropriate way to do this.

Further

scrollListMenu.animateToItem(...);

seems to do the trick to scroll in the upper and lower not visible items. It the item index if above the visible ones, the list scrolls down and vice versa.

Button up, scroll upwards:

int16_t selectedMenuItem = 0;   // Currently selecte index
uint16_t topMenuItem = 0;	// Index of the item at the top of the list
 
void Screen1View::MainWindowBtnUp()
{
	if(selectedMenuItem > 0)
	{
		// update the index of the selected entry
		selectedMenuItem--;
		if(selectedMenuItem < topMenuItem)
		{
			// highlighter is now at the top
			scrollListMenu.animateToItem(selectedMenuItem,5);
			// Update the index of the top most item in the list
			topMenuItem--;
		}
	}
	scrollListMenu.initialize();
}

Button down, scroll downwards:

void Screen1View::MainWindowBtnDwn()
{
	// increment the highlight position and selected item, we will correct them just afterwards
	selectedMenuItem++;
 	if(selectedMenuItem < scrollListMenu.getNumberOfItems()-1)
	{
		if(selectedMenuItem > scrollmaxpos)
		{
			// highlight the last entry
			// scroll list up
			scrollListMenu.animateToItem(selectedMenuItem,5);
			// Update the index of the top most item in the list
			topMenuItem++;
		}
	}
	else if(selectedMenuItem >= scrollListMenu.getNumberOfItems()-1)
	{
		// End of the list
		selectedMenuItem = scrollListMenu.getNumberOfItems()-1;
		scrollListMenu.animateToItem(selectedMenuItem,5);
		// Update the index of the top most item in the list
		if(topMenuItem < (selectedMenuItem-scrollmaxpos))
		{
			topMenuItem++;
		}
	}
	scrollListMenu.initialize();
}

The highlighting is done it the overridden update method:

void Screen1View::scrollListMenuUpdateItem(lstEntry& item, int16_t itemIndex)
{
	// setHighlighted(...) will change the background of the item black and the text white or contrary
	if(itemIndex == selectedMenuItem)
	{
		item.setHighlighted(true);
	}
	else
	{
		item.setHighlighted(false);
	}
	:
}

Maybe it will help someone else...otherwise i filled the void and made the forum at least looking more alive 😊