Scroll list with 3 columns

[I_ve_got_a_problem]

So I need to have a screen with a scroll list in which different elements will appear depending on the amount of elements stored in the local database.

I want each line to have 3 elements, so my question is, how is this ment to be in touchGFX? I have designed a custom container that has one element but I dont get how this expands downwards, 

I mean, I have set the list to expand to the right, but i want it to grow another line when an elemnt doesnt fit in the same line. And i want it to be scrollable vertically not horizontally

I don't get how this is supposed to be done, the only thing i can think of is creating a clone of the same container under the current container but I think this is a bad solution.

[GaetanGodart]

Hello @I_ve_got_a_problem ,

So you want to be able to have multiple elements inside a container that will be 3 elements wide and infinite elements height. You want to be able to scroll up and down, not left and right.

In that case, a scrollable container would be the best option.

If you set your scrollable container's width to be 3 time your element's width then you can add 3 elements per line and then add 3 more on each new line.

To do so, insert a scrollable container to your design and disable "Enable horizontal scroll" on the right properties:

You can either add your elements manually by inserting one of your custom container and dragging and dropping it to your preferred location.

You can also do it dynamically if you have a lot of elements by using the method setXY such as :
myNewElement.setXY(theXposition, theYposition);
And then adding the element to the container such as :
scrollableContainer.add(myNewElement);
(Don't forget to invalidate 😉)

For a 200 width by 300 height custom container it would like this :
myNewElement.setXY(200 * (elementNumber%3), 300 * (elementNumber/3));
Note that I use an index variable (elementNumber) to know where to place the following element.

I have made an example that adds the elements dynamically (up to 10) by clicking a button.
In my example, I have to take in consideration the amount of scroll that was already applied to the scrollable container so my setXY method looks like this :
myElement.setXY(200 * (elementNumber%3), 300 * (elementNumber/3) + scrollableContainer.getScrolledY());

If that solved your issue, I invite you to select this message as solution to allow people with the same issue to find the solution quickly.

If that did not help you, I invite you to give me more details so I can help you accordingly.

Regards,

[I_ve_got_a_problem]

First of all ty for the reply.

I've tried your approach and I think this can be a solution, but in this case the amount of containers has to be declared before the application starts, what I'd like (if viable) is to have the amount of container that the user has stored, so that when it starts up it checks the db and loads up all the elements.

If the only way to do this is pre-declaring the containers then i guess we will have to set a maximun ammount of elements in the list.

Btw the idea of using a scrollable container and placing them by code was helpful so far.

✌️

[GaetanGodart]

Hello @I_ve_got_a_problem ,

It is not recommended to add widgets at runtime in TouchGFX because we allocate static memory which could lead to crashes.

If you know the maximum of elements you DB would store you can create that amount of elements (as you explain).

Another solution that I have not tired is to reserve memory on your chip for dynamically added elements but in the end you would have to block as much memory as if you pre-created the elements.

Regards,

[I_ve_got_a_problem]

Sry if I'm being naive here, but thinking about this again today, I have remenbered that we also want the app to have a record of things that the user has done, so that he can keep track of the actions he has made, e.g. I have used the machine 5 times today, for maintenance purposes.

But in this case the list of records can go up to a lot, and I don't think that having a defined amount of elements is viable in this case. Because we want the data log elements to be clickable to see more details like the time that the machine was active on that use and more stuff, so they have to be customContainers

I don't know if I am missing something here or what, but I guess this is a problem a big amount of people may have run into, as data logs are quite common.

[GaetanGodart · Accepted solution]

Hello @I_ve_got_a_problem ,

No problem, there is no stup1d question.

Is the scroll list with 3 columns used to display the history of actions that you are talking about?
Or it is something completely different?

Unfortunately, in the embedded world, where memory is very limited, it is not possible to add as many elements as we want to our microcontroller's memory.

It is indeed asked quite often to add elements during runtime. I will raise the issue during our next meeting.

I have made an example that dynamically adds elements to the scrollable container and puts them at the right position. I ran it on a STM32F469 discovery board and the UI freeze (probably crash due to memory overflow) after 1022 elements (also the UI is bugged after about 700 elements)

If you want to test it on your board, create a new project, then at the top, click on "Edit -> Import -> GUI -> Browse" then select the touchgfx file with the GUI.

Something you could do is to limit the history to, for instance, the last 100 actions.
This could be done by creating 100 elements and adding them normally. However, when reaching the 101st history request, remove the 1st history and either put the new history at the first position then reposition everything or shift every history by -1 and add the new history at the 100th place.

Regards,

[GaetanGodart]

Hello @I_ve_got_a_problem ,

Were you able to resolve your issue?

To clarify, you need 2 things : the 3 columns scroll and the history of actions?

I have thought of using a logfile to store the history if the user doesn't need to access it at runtime.
You could write the history in a text file.
Here is an example of writing to a text file in as SD card : write to text file on STM32 

Keep me updated on your progress!

Regards,

[I_ve_got_a_problem]

We will deal with they history problem later on, and we are gonna add the containers at runtime and try to see how much ram we are consumin, and play with the visibility of the elements out of sight in the list for saving ram space.

We'll see how this works!

[GaetanGodart]

Hello @I_ve_got_a_problem ,

Yes, you could have a limited amount of containers (3 * (max you can see in height +1) ) and just move and update the containers that get outside of the visible area.

This would be the right approach as it has known memory space but require to keep track of the position and reposition + redraw the elements based on the information stored in a text file or something similar which will be a bit of work.

Regards,