List widget that can read the SD file list and select a list item for use.
I tried the Roller but it didn’t work.
Do you mean drop down?
I have used drop down on SquareLine Studio. Very useful. It is a built in widget in SLS.
I want a non-dropdown menu.
The task:
In the given area of the screen (panel), list the file names on the card one below the other. If the list does not fit in the area, it should be scrollable. You can select one from the list for further use.
Check out the the latest example 3D printer interface, 3d_Printer_2, now available in Squareline Studio version v1.3.0.
In the updated 3d_Printer_2.spj project file, you’ll find an enhanced settings menu featuring a scrollable list. This list allows you to navigate through various preference categories, similar to the Settings app on iOS.
To get a visual preview, take a look at the image below:
Please note that the scrollable list is a component within Squareline Studio (SLS) and not a pre-built widget. However, you have the flexibility to copy this component into your own project for seamless implementation.
I have the same problem. I want to list files from an sd card where music can be stored. The files can be uploaded or deleted via a webinterface. Hence the length of the list is variable during run time.
The example from the 3D printer demo seems to be a static solution which can not adapt to the number of files to list but has to be defined in advance.
a bit off topic, but did you succeed to upload a project to that board? im trying to upload a project but the screen stays black. is there any special things i need to mark in the setup.h file?
I also came across the same issue.
Squareline Studio is currently missing List (lv_list).
I need to achieve something just as in these two examples:
Is lv_list on the roadmap for future support?
It’s not on the ROADMAP and actually I was considering to remove it fro LVGL as well. It’s because a list can be created very easily using the flex layout.
The floating button can be created jsut by enabling the FLOATING flag on a normal button.
Thanks for the reply. I’ll check out flex layout. Haven’t used this feature yet.
Sorry, but the use of list_view in other programming languages is for memory management, of course, it can be done with flex layout.
As an example, if you are an Android developer and create a listview using flex layout, it’s a big mistake.
If you think that your implementation of listview inside LVGL should be removed, that is because it was poorly written.
So, it’s mandatory to have it in LGVL and Squareline as well.
It’s a basic widget in any modern language.
@christine The implementation of the list view in this 3d Printer 2 demo is the worst thing that I have seen in my life as a developer.
It’s just a copy and paste of multiple widgets, the memory management of this is awful.
Right now, the lv_list widget is really just a wrapper for convenience. In a more complex case, we could trade off the flexibility and simplicity for memory efficiency by rendering elements from an array of list-item-information. This table example does something like that by using LVGL’s draw events.
I let the SquareLine team comment on that.
@kisvegabor You know that tableview also has a different behavior than a listview.
I just don’t think that we need to reinvent the wheel, just take a look at Android and iOS, both of them have listview and tableview and there are tons of arguments why both are needed.
We are a very small community but we should learn from mature languages like those to avoid code refactoring in the future.
I perfectly agree. That’s why we have used a lot of CSS concepts in LVGL. However, the basic web tech (HTML + CSS + JS) lacks the complex widgets, such as a list view, so we need to look somewhere else. I haven’t immersed myself in Android/iOS yet, so any feedback/idea is very welcome. If you have time and interest please open a new LVGL issue to kick off the discussion.
The list in the 3d printer demo 2 is just an example of how you can create a list on a single scrollable panel with flex layout, by adding list elements to it that are created from components. This gives you freedom/flexibility to make list elements in different ways, not just in hardwired fashion. These list elements can be added/removed by code dynamically later.
