Large number of images in a data grid
Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller
-
- VIP Livecode Opensource Backer
- Posts: 7214
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Large number of images in a data grid
Datagrids natively page their contents as they scroll, so you don't need to script that. The problem is likely the number and size of the images. Have you saved the thumbnails at their smallest size and resolution, or are you using full-sized images that are just scaled down in the IDE? A lot of work goes on to expand, scale, and draw images to screen, so smaller is faster.
Smaller refers primarily to the number of pixels in the image rather than the actual dimensions. Color depth matters too, if you are saving the images with millions of colors the actual file will be a magnitude larger than the same image saved at 8 or 16 bits. 8-bit color isn't usually great but 16 might do for such small images.
You could also save the image in an uncompressed format like BMP which would eliminate the need for the engine to decompress the file. The files would be larger on disk but would load faster.
Smaller refers primarily to the number of pixels in the image rather than the actual dimensions. Color depth matters too, if you are saving the images with millions of colors the actual file will be a magnitude larger than the same image saved at 8 or 16 bits. 8-bit color isn't usually great but 16 might do for such small images.
You could also save the image in an uncompressed format like BMP which would eliminate the need for the engine to decompress the file. The files would be larger on disk but would load faster.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
Re: Large number of images in a data grid
Thanks. I tried setting the paintCompression global setting to PICT before saving the thumbnails, and it seems to make the display a little quicker.
-
- VIP Livecode Opensource Backer
- Posts: 7214
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Large number of images in a data grid
How large are the images in bytes? That's the main thing. Is the width of the image the same size as the formattedWidth?
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
Re: Large number of images in a data grid
The images are 150x150 and are not resized in the data grid. They are roughly 30 to 50 Kb each. That corresponds to 75MB for 1500 pictures at 50kb.
I made some tests, and the size can be halved by saving them as 256 color BMP, or to about 5Kb in JPEG, without losing quality, it seems.
How would I go about transforming the format and number of colors within LiveCode ? EDIT: maybe use "export with palette" to copy it to another image with a specific number of colors ? seems to have been done here: https://forums.livecode.com/viewtopic.php?t=22080
Got it to work. Will play around with various formats. Thanks for the inputs.
I made some tests, and the size can be halved by saving them as 256 color BMP, or to about 5Kb in JPEG, without losing quality, it seems.
How would I go about transforming the format and number of colors within LiveCode ? EDIT: maybe use "export with palette" to copy it to another image with a specific number of colors ? seems to have been done here: https://forums.livecode.com/viewtopic.php?t=22080
Got it to work. Will play around with various formats. Thanks for the inputs.
-
- VIP Livecode Opensource Backer
- Posts: 7214
- Joined: Sat Apr 08, 2006 8:31 pm
- Location: Minneapolis MN
- Contact:
Re: Large number of images in a data grid
Glad you found that, I wasn't aware of the "with palette" parameter. If you use JPG format then each image will have to go through the decompresion process which adds a slight overhead, so if you you can get it work with an uncompressed image format you'll save a bit of time.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com
HyperActive Software | http://www.hyperactivesw.com
Re: Large number of images in a data grid
The performance of data grids is really disapppointing. I am testing instead a browser widget with generated html code containing the url of the images, and it seems to work well. I will confirm...
Re: Large number of images in a data grid
It is "lightning" fast with a widget !
-
- VIP Livecode Opensource Backer
- Posts: 1005
- Joined: Sat Apr 08, 2006 3:06 pm
- Location: Overland Park, Kansas
- Contact:
Re: Large number of images in a data grid
For your needs a browser may give you the best results. I just skimmed through this thread and wanted to mention a couple of things though -
1. For a large data set that is displaying lots of images do not turn caching on. There is an initial slowdown when loading the data and it won't scale well if your data set increases.
2. Rather than converting the SQL cursor to an array and assigning it to the dgData it would be much more efficient use the GetDataForLine callback to feed data to the DataGrid on an as-needed basis. Here is a brief article on it:
http://lessons.livecode.com/m/datagrid/ ... ts-of-data
When using a database connection the approach would be as follows:
1. Open a database cursor using revQueryDatabase() and store the cursor id in a script local variable that you can pass to revdb handlers.
2. Set the dgNumberOfRecords of the DataGrid to revNumberOfRecords().
3. In the GetDataForLine command that you define pass pLine to revMoveToRecord() in order to move the cursor to the correct record.
4. Use revDatabaseColumnNamed() or revDatabaseColumnNamed() or revDatabaseColumnNumbered() to extract columns from the current row in the cursor and populate the @pDataA parameter passed to GetDataForLine.
This will be the most efficient way to streaming data from the database cursor into the DataGrid.
1. For a large data set that is displaying lots of images do not turn caching on. There is an initial slowdown when loading the data and it won't scale well if your data set increases.
2. Rather than converting the SQL cursor to an array and assigning it to the dgData it would be much more efficient use the GetDataForLine callback to feed data to the DataGrid on an as-needed basis. Here is a brief article on it:
http://lessons.livecode.com/m/datagrid/ ... ts-of-data
When using a database connection the approach would be as follows:
1. Open a database cursor using revQueryDatabase() and store the cursor id in a script local variable that you can pass to revdb handlers.
2. Set the dgNumberOfRecords of the DataGrid to revNumberOfRecords().
3. In the GetDataForLine command that you define pass pLine to revMoveToRecord() in order to move the cursor to the correct record.
4. Use revDatabaseColumnNamed() or revDatabaseColumnNamed() or revDatabaseColumnNumbered() to extract columns from the current row in the cursor and populate the @pDataA parameter passed to GetDataForLine.
This will be the most efficient way to streaming data from the database cursor into the DataGrid.
Trevor DeVore
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
Re: Large number of images in a data grid
Thanks. I have another data grid which I use to display album tracks, which is also seems slow when there are a large number of tracks (> 100), and I will optimize it as you indicated.
-
- VIP Livecode Opensource Backer
- Posts: 1005
- Joined: Sat Apr 08, 2006 3:06 pm
- Location: Overland Park, Kansas
- Contact:
Re: Large number of images in a data grid
After I responded to you last night I decided to write a database cursor behavior for the DataView control I recently made available. You can read about it in this thread:
viewtopic.php?f=108&t=31987
A DataView is a more modern DataGrid and is more efficient. It is also easy to add behaviors to it in order to provide an interface to a specific type of data source. There is an interface for arrays, tree nodes, and now a database cursor.
If you want to take a look you can find the demo project here:
https://github.com/trevordevore/dataview_demo
The actual code that feeds a cursor to the DataView can be found here:
https://github.com/trevordevore/levureh ... codescript
You could do something similar for your DataGrids. Look at the `DataForRow` command which is similar to `GetDataForLine` in a DataGrid.
viewtopic.php?f=108&t=31987
A DataView is a more modern DataGrid and is more efficient. It is also easy to add behaviors to it in order to provide an interface to a specific type of data source. There is an interface for arrays, tree nodes, and now a database cursor.
If you want to take a look you can find the demo project here:
https://github.com/trevordevore/dataview_demo
The actual code that feeds a cursor to the DataView can be found here:
https://github.com/trevordevore/levureh ... codescript
You could do something similar for your DataGrids. Look at the `DataForRow` command which is similar to `GetDataForLine` in a DataGrid.
Trevor DeVore
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
Re: Large number of images in a data grid
Excellent, thank you, will definitely look into it. I just happened to be working also on a way to display folders & files, and I see you worked on that as well.
Re: Large number of images in a data grid
I started out by downloading the example stack from LiveCode (Data Grid and Databases.rev). While the initial load of the database is fast, there are issues when scrolling through the grid, especially when clicking in the vertical bar.
-
- VIP Livecode Opensource Backer
- Posts: 1005
- Joined: Sat Apr 08, 2006 3:06 pm
- Location: Overland Park, Kansas
- Contact:
Re: Large number of images in a data grid
Where did you find the example stack? I'm not seeing it in my searches.
Trevor DeVore
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
-
- VIP Livecode Opensource Backer
- Posts: 1005
- Joined: Sat Apr 08, 2006 3:06 pm
- Location: Overland Park, Kansas
- Contact:
Re: Large number of images in a data grid
@hopkins - do you have the Project Browser open when you are testing the Data Grid? If so, try closing it. The Project Browser will slow things down as the Data Grid is creating/deleting/showing controls.
Trevor DeVore
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
ScreenSteps - https://www.screensteps.com
LiveCode Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode
LiveCode Builder Repos - https://github.com/search?q=user%3Atrevordevore+topic:livecode-builder
Re: Large number of images in a data grid
No I do not have it open.
I found the example stack (livecode's) in the link you gave a few posts up: http://lessons.livecode.com/m/datagrid/ ... ts-of-data
I found the example stack (livecode's) in the link you gave a few posts up: http://lessons.livecode.com/m/datagrid/ ... ts-of-data