Using a Group to display images

Anything beyond the basics in using the LiveCode language. Share your handlers, functions and magic here.

Moderators: heatherlaine, Klaus, FourthWorld, robinmiller, kevinmiller

Post Reply
Simon Knight
Posts: 407
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Using a Group to display images

Post by Simon Knight » Wed Jun 13, 2018 7:35 am

Hi,

I am trying to extend my knowledge of livecode from my baseline of grey utility applications. So I am playing with a simple concept experimenting with different design strategies. My present project is an application that displays thumbnails of images in a folder and allows the user to add titles and captions as well as moving the thumbnails into the desired display order. The app also creates copies of the images at different sizes as well as a CSV file that describes each image. The out puts will be used to control a web site.

This is the third version and is based on some code that Ben Beaumont used in RunRev09. In this version I am attempting to improve the UI. Versions one and two used lists but now I am using a custom control that displays the thumbnail, two fields and some other information. The application creates a copy of the custom control for each image in the selected folder and adds it to the card. I have attached a screen shot for clarity.
Screen Shot 2018-06-13 at 07.33.52.png


The next stage and the reason for this post is that I wish to be able to scroll the image display area. From what I have read I believe that I need to create a group and add my image viewer controls to it and by using a group I will be able to use the inbuilt scroll bars. I wonder if this is a sensible approach? If so then I also need to create a group to be populated when the code is run. I understand that a group has to contain at least one control is is the way forward to create a group with an unwanted field as part of the design or should I make the group when the images are added? Any thoughts?
best wishes
Skids

Klaus
Posts: 10327
Joined: Sat Apr 08, 2006 8:41 am
Location: Germany
Contact:

Re: Using a Group to display images

Post by Klaus » Wed Jun 13, 2018 10:39 am

Hi Simon,

you could create a "template" group, where its only image object is already grouped (with scrollbars) and part of your actual "image viewer" group. Know what I mean?

This way, no need to mess around with creating a new group, just load an image into the "image group" and resize it as neccessary.

Hope I understood you correctly!


Best

Klaus

Simon Knight
Posts: 407
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a Group to display images

Post by Simon Knight » Wed Jun 13, 2018 5:00 pm

Hi Klaus,

I've taken a different approach and added a single fixed group that initially holds some text. At present I am having problems with resizing the group and having the scroll bars appear. I need to read the dictionary but I think I need a true size which overflows the card and a "portal" size that is linked to the size of the card.
best wishes
Skids

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4619
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Using a Group to display images

Post by jacque » Thu Jun 14, 2018 4:46 pm

That's right, the group's content must overflow the borders of the group. Groups are elastic and will resize themselves to accommodate new content unless you set their lockLoc to true, so be sure to do that.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

jmburnod
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2225
Joined: Sat Dec 22, 2007 5:35 pm
Location: Genève
Contact:

Re: Using a Group to display images

Post by jmburnod » Thu Jun 14, 2018 5:05 pm

Hi Simon,
I have forgotten there is one stack I made in sample stack collection :roll:
"StResizeAndMoveGroupH" is its name.
It should be useful
Best regards
Jean-Marc

Simon Knight
Posts: 407
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a Group to display images

Post by Simon Knight » Fri Jun 15, 2018 7:06 am

Jean-Marc, I will have a look at your sample stack - thanks.

Jacque, your statement is correct however what they do not do is adjust, for want of a better term, the scroll bar show point when children are moved within the group (scroll bars auto hide/display on a mac). It seems it has been a bug for many years. I will try to submit an entry to update the dictionary as I doubt its going to be fixed anytime soon. I submitted a new bug report : https://quality.livecode.com/show_bug.cgi?id=21359 and Bernd has two 13806 and 13807 which are similar.

The work around is to use the line

Code: Select all

set the clipsToRect of group "Photoviewer" to true
after moving a child followed by resizing the group.
best wishes
Skids

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4619
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Using a Group to display images

Post by jacque » Fri Jun 15, 2018 7:47 pm

Have you tried playing with the boundingRect property?
If a group's boundingRect is not empty and its lockLocation is false, when you drag an object toward the boundary of the group, the group does not automatically resize to fit its objects. Instead, the object is clipped at the boundingRect. (In group-editing mode, the entire control is shown, but when you exit group-editing mode, controls outside the boundingRect are clipped.)

If the group is a scrolling group, dragging an object in it automatically scrolls the group. When you drag beyond the scrollable area, the object is clipped.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Simon Knight
Posts: 407
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a Group to display images

Post by Simon Knight » Fri Jun 15, 2018 8:27 pm

No its new command to me and I have just added my own scrolling handlers as well. I will have a look at boundingrect tomorrow. Thanks.
best wishes
Skids

Simon Knight
Posts: 407
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a Group to display images

Post by Simon Knight » Sat Jun 16, 2018 8:29 am

Well, I have had a go at setting the bounding rectangle and it does not seem to do anything. From reading the dictionary entry I expected it to enable the auto scrolling of the group when members are grabbed and moved to an edge. I have probably misunderstood the dictionary entry. My test stack is attached but I don't think the group knows about a grab and drop move of a child control.
If the group is a scrolling group, dragging an object in it automatically scrolls the group. When you drag beyond the scrollable area, the object is clipped.
No auto scrolling here !
BoundingRectangle.livecode.zip
A simple experiment with a group
(1.52 KiB) Downloaded 20 times
best wishes
Skids

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4619
Joined: Sat Apr 08, 2006 8:31 pm
Location: Minneapolis MN
Contact:

Re: Using a Group to display images

Post by jacque » Sun Jun 17, 2018 12:32 am

I played with your example a bit. You're right, the boundingRect isn't the answer, so set that back to empty. The yellow graphic needs to be much taller than the group itself, and both the graphic and the group have lockLoc set to true.

I put this into one of the buttons. It only handles vertical dragging but you can duplicate and adjust a couple of lines in the mouseMove handler to manage horizontal drags too if you need that:

Code: Select all

local sDrag

on mouseDown
  put true into sDrag
  set the relayerGroupedControls to true
  put the number of controls of grp "test" into tNumControls
  set the layer of me to (the layer of grp "test")+tNumControls
end mouseDown

on mouseUp
  put false into sDrag
end mouseUp

on mouseenter
  put false into sDrag
end mouseenter

on mouseMove
  if sDrag = true then
    put the rect of grc "box" into tRect
    put (the height of me div 2)+4 into tOffset
    put max(item 2 of tRect + tOffset,min(item 4 of tRect - tOffset,the mousev)) into tV
    set the loc of me to the mouseH,tV
    set the vscroll of grp "test" to tV - item 2 of tRect - tOffset
  end if
end mouseMove
This needs to be generalized into a card script and the target should be checked in each handler to ensure that it will only trigger if the target is one of the buttons in the group. It also needs a delta adjustment so the target button doesn't jump to the location of the mouse. But maybe this will get you started.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Simon Knight
Posts: 407
Joined: Wed Nov 04, 2009 11:41 am
Location: Gunthorpe, North Lincs, UK

Re: Using a Group to display images

Post by Simon Knight » Tue Jun 19, 2018 8:29 am

Hi Jacqueline,

Thanks for looking and your code snip. I tried using in and the whole group scrolled off the screen but it shows the principles involved.
best wishes
Skids

Post Reply

Return to “Talking LiveCode”