Skip to main content
Renesas Electronics America - Knowledgebase

How do I create vertical scroll animation for a list using GUIX within SSP, without touch inputs?

Last Updated:03/29/2017


How do I create vertical scroll animation for a list using GUIX within SSP?


GUIX is able to scroll the list without further application code, when there is a direct touch event on the list. It can be an issue when the application requires the list to scroll in response to user-inputs that are not on the list itself i.e. pressing a button (GUI button, or a physical button). 

However, your application may require a vertical list to scroll, in response to a user pressing an up/down button. This can be achieved by using GUIX Studio, GUIX event GX_EVENT_VERTICAL_SCROLL and GUIX API gx_vertical_list_event_process (GX_VERTICAL_LIST *list, GX_EVENT *event_ptr). Just follow these steps.

1. Add a vertical list to the desired display window in your GUIX Studio project.


2. The list can then be populated with the appropriate items. In this example, text prompts were inserted into the vertical list.


3. In the Properties View of the vertical list, the Total Rows (the last entry in the below table) can be filled out to specify how many items are in this list. The number of visible rows, is determined by how many rows is visible in the display shown in GUIX Studio.


4. After creating your list, in the handler from the user input, enable the scrolling using the GX_EVENT_VERTICAL_SCROLL and gx_vertical_list_event_process API, as illustrated below.



gxe.gx_event_type                   = GX_EVENT_VERTICAL_SCROLL;

gxe.gx_event_sender               = GX_ID_NONE;

gxe.gx_event_target                 = 0;

gxe.gx_event_display_handle  = 0;


gxe.gx_event_payload.gx_event_intdata[1] = 0; // Difference between [1] and [0] is amount to be moved.

gxe.gx_event_payload.gx_event_intdata[0] = 1;


for (j = 1; j<MOVE_POSITION; j++)


gx_vertical_list_event_process (&main_screen.main_screen_vertical_list, &gxe);



  1. The gx_vertical_list_event_process (GX_VERTICAL_LIST *list, GX_EVENT *event_ptr) is an API provided by GUIX to process events related to vertical lists.

    The first input should be a pointer to the vertical list that is to be controlled. The declaration for the list can be found in the control block for the display that the list was inserted into. This is defined in the hmi_specifications.h file.
  2. To implement the scrolling, use the GX_EVENT_VERTICAL_SCROLL event. This event has to be passed into the GX_EVENT *event_ptr parameter, and is used in the following way:

a) GX Event: gxe.gx_event_type should be GX_EVENT_VERTICAL_SCROLL.

The API also processes the following events:



b) Amount to be scrolled: gxe.gx_event_payload.gx_event_intdata[1] and gxe.gx_event_payload.gx_event_intdata[0].

        The difference between gx_event_intdata[1] and gx_event_intdata[0] will give the amount to be scrolled on each call of the API.

A positive difference will cause the list to scroll down, while a negative difference will cause the list to scroll up.

The absolute difference will affect the speed of scroll animation. The greater the difference, the faster the speed.


  1. Using the above code snippet, the total amount to be scrolled and speed of movement with each user input can be controlled.

In the above code snippet, the vertical list will move by 1 pixel, for MOVE_POSITION times. Thus, if MOVE_POSITION was set to 40 pixels, the vertical list will scroll by a total of 40 px, at a slow speed.

If the application requires for the scrolling to be at a faster speed, the difference between gx_event_intdata[1] and gx_event_intdata[0] can be set to a greater amount. The vertical list will move by a greater difference with each API call, resulting in a faster scroll animation.


Suitable Products