Hi Stam,
The folder of images is 1.2Gbytes and comprises full size jpegs and smaller but still quite large thumbnails that are 500 pixels on their longest sides. The image in my datagrid is 300 x 300 pixels and the images are being resized in the handler "LayOutControl". This is where I suspect the initial pause is occurring. Once fully built the datagrid scrolls quickly which suggests that the reduced images are being cached in memory.
An additional bug has become apparent : when scrolling top to bottom and back to top the images move a few pixels to the left.

- When first populated

- After several scrolls
It seems that LayOutControl is recalled every time a row comes into view which means that the rescale code is called. This code uses rounding which I suspect causes the images to edge to the left.
The main script parses a given folder and builds a list of jpeg images. This list is converted into an array which is passed into the datagrid :
Code: Select all
On ProcessTSVData pTSVData
local tProgressCount
put the number of lines of pTSVData into tRowCount
put 0 into tProgressCount
set itemdel to tab
put the right of me into tRightMargin
put the top of me into tMyTop
put the files into tFileList
put empty into tImageDataA
put empty into tCounter
repeat for each line tRec in pTSVData
add one to tCounter
put item 1 of tRec into tFileName
put item 2 of tRec into tTitle
put item 3 of tRec into tCaption
put the directory & "/" & tFileName into tFullImageFileName
put NameOfThumbnail(tFileName) into tThumbNail
put tFullImageFileName into tImageDataA[tCounter]["ImageURL"]
put tThumbnail into tImageDataA[tCounter]["ThumbURL"]
put tTitle into tImageDataA[tCounter]["Title"]
put tCaption into tImageDataA[tCounter]["Caption"]
end repeat
set the dgdata of group "dgImages" of card id 1002 of me to tImageDataA
put "Complete" into field "debug"
end ProcessTSVData
(I start with TSV because the initial sort order is being set by my image catalog application PhotoMechanic which outputs the initial TSV file).
FillInData is straight forward:
Code: Select all
on FillInData pDataArray
-- This message is sent when the Data Grid needs to populate
-- this template with the data from a record. pDataArray is an
-- an array containing the records data.
-- You do not need to resize any of your template's controls in
-- this message. All resizing should be handled in resizeControl.
if the length of pDataArray["Title"] >0 then
set the text of field "Title" of me to pDataArray["Title"]
end if
set the filename of image "thumbnail" of me to pDataArray["ThumbURL"]
end FillInData
LayOutControl is where the issues start:
Code: Select all
on LayoutControl pControlRect, pWorkingRect
-- left top right bottom
## Read the size of the image object then scale the image bitmap to size
# Read the size of the image object, so that we can scale the image.
--Put the width of image "thumbnail" of me into tMaxWidth
--Put the height of image "thumbnail" of me into tMaxHt
put 300 into tMaxWidth
put 300 into tMaxHt
put pControlRect into tControlRectOld
set the resizeQuality of image "thumbnail" of me to "Good" //normal/good/best
## read the pixel dimensions of image (data)
put the FormattedWidth of image "thumbnail" of me into tFormattedWidth
put the FormattedHeight of image "thumbnail" of me into tFormattedHeight
## Call handler to calculate the scale factor required to rezize the image data to the size of image control
put ScaledImageSize (tMaxWidth, tMaxHt , tFormattedWidth, tFormattedHeight) into tNewImageSize
set the width of image "thumbnail" of me to item 1 of tNewImageSize
set the height of image "thumbnail" of me to item 2 of tNewImageSize
## Now reposition the controls and resize the row
## - image control
put item 2 of pControlRect into tCellTop
set the top of image "thumbnail" of me to tCellTop+4
put the height of image "thumbnail" of me into tNewCellHt
put tCellTop + 4 + tNewCellHt+4 into item 4 of pControlRect
## - Now the text field
put the rect of field "Title" of me into tTitleRect
put item 3 of pControlRect into tRightEdge
put tRightEdge-5 into item 3 of tTitleRect
set the rect of field "Title" of me to tTitleRect
## - background
set the rect of graphic "Background" of me to pControlRect
end LayoutControl
Function ScaledImageSize pMaxWidth, pMaxHt , pFormattedWidth, pFormattedHt
##############################################################
#
# pMaxWidth and pMaxHt are the maximum sizes wanted in pixels.
# pFormatted wideth and height are the actual size of the image in pixels .
# Handler returns a scaling factor that when applied by the calling routine
# results in the longest edge of the image being set to the values of Maxwith/Maxheight
# without any distortion.
#
# thanks to Klaus for the forum post
# S.Knight May 2018
##############################################################
local tScaleFactor
put min (pMaxWidth/pFormattedWidth,pMaxHt/pFormattedHt) into tScaleFactor
return round(pFormattedWidth * tscaleFactor) & comma & round(pFormattedHt * tscaleFactor)
end ScaledImageSize
The background to this experiment is an older application that was written to help me manage a small camera club's website. The members would send me images to publish on the site but a number of them were unable to reliably reduce the size of their images or to populate useful iptc fields such as Headline and Copyright. This original application was distributed and provided a simple interface to add a caption to each image plus it produced a CSV file that was used by the web site to match thumbnail images with their respective larger sized version, determine the display order and list the captions.
This original application uses a group control that is populated with smaller image groups, known as polaroids based on a template control. It works well but has a limitation in that each so called polaroid is placed below the first in a long list/line. It turns out that a group control does have a maximum size limit of 32768 pixels (2 pwr 15 or 16 bits if you will). This limit equates to 148 copies of the polaroid at its present default size meaning that no more than 148 images may be processed in one sitting. In reality this is more than enough as most web galleries are no more than ten or twenty images per gallery.
I decided to give the new datagrid version 2 a try especially as it now allows the drag and drop reordering of rows. Well it does but it has to be switched on and off and all my attempts to get rid of the icons by following the instructions in the tutorial have failed. In the present version the edit mode has now stopped working for unknown reasons.
All my prejudice against the datagrid have been re-enforced, the principle one being that the normal debugging tools become unreliable with the message path getting complex and eventually lost. Its not possible to always step through code or to get break points to work reliably. I do wonder if I should just extend my present custom control possibly storing polaroids in a pair of "piles" or "decks" and deal the polaroids as necessary.
I have attached a zip file that contains the two stacks. Both applications work on a folder of jpeg images which contain large and thumbnail versions named like this "Any Old Image.jpg" and "Any Old Image_Thumb.jpg".