LiveCode Forums.

Posted: **Fri Jun 14, 2013 8:13 am**

Greetings

I'm developing an application where I'll have a group where the user can place several objects. There objects will be graphics (like a rectangle or an oval) or images.

In this area, users will be able to move these objects around, inside the group, however, sometimes the group area may be too small for all the objects inside so, what I'm trying to do is to script a way to zoom in and out the content inside the group.

The first thing that it came to my mind was "OK, the zoom thing is not more than changing the size of the items inside the group according the needs".

Is this the correct way to do it? is there any easy/efficient way to do this?
How can I access the objects inside a group (so that I can go one-by-one and change it size)?

Thanks in advance for any help.

- Miguel

Posted: **Fri Jun 14, 2013 8:46 am**

Hi Miguel,

There is a little stack you can see here:
http://forums.runrev.com/viewtopic.php?t=12429
Best regards
Jean-Marc

Posted: **Mon Jun 17, 2013 10:12 pm**

Greetings,

The scrip helped, however, I'm having a problem that you may be able to help with.

I'm trying to resize several controls like graphics, images, buttons, etc...

when my script does the "put the MesDim of control tControl into tDim" where tControl = "graphic "play_area_bg", the result is nothing. the tDim stays empty.

I'm having difficult to find information about the "MesDim"

Can you help in any way ?

here's my script

Code: Select all

----- SCRIPT ON SLIDER -----
on scrollbarDrag
     put the thumbPosition of me into field "zoomValue"
     put the thumbPosition of scrollbar "zoomSlider" / 100 into zfactor
     resizeGroupContentByFactor "game_content_area", zfactor
end scrollbarDrag


----- SCRIPT ON STACK -----

-- resize play area components
on resizeGroupContentByFactor cGroup, zFactor
     lock screen
     put getGroupElements (cGroup) into eList
     put the number of lines of eList into nrElems
     
     repeat with i = 1 to nrElems
          put line i of  eList into tControl
          put the MesDim of control tControl into tDim
          put round(item 1 of tDim * zFactor) into tW2
          put round(item 2 of tDim * zFactor) into tH2
          set the width of control tControl to tW2
          set the height of control tControl to tH2
     end repeat 
     
end resizeGroupContentByFactor

-- Get all Elementos of a Group
function getGroupElements cGroup
     put the number of controls of group cGroup into nrElems
     put empty into tList
     
     repeat with i = 1 to nrElems
          put the name of control i of group cGroup into line i of tList
     end repeat
     
     return tList
end getGroupElements

Posted: **Mon Jun 17, 2013 10:26 pm**

Hi Niguel,

"put the MesDim of control tControl into tDim" where tControl = "graphic "play_area_bg", the result is nothing

Yes, MesDim is a customproperty which store the original Width and Height of each concerned control

Kind regards
Jean-Marc

Posted: **Tue Jun 18, 2013 9:35 am**

hi Jean-Marc

The script is now working

Thanks a lot

I just have one more problem that you may know how to deal with.

Inside the group, I have an image that works as a background (kinda like Photoshop canvas area or Illustrator artboard).

When I zoom, I was expecting for the controls inside the group to maintain their positions in relation to each other, but they don't.

Here's an illustration for better understanding:
(on the image bellow, where it says "zoom-in" it should read "zoom-out"...)

Uploaded with ImageShack.us

Do you have any idea why this is happening and how could correct this?

Many thanks
- Miguel

Posted: **Tue Jun 18, 2013 9:59 am**

Hi Miguel,

just a wild guess.

Could you try to set the boundingRect of the group to the rect of the group before zooming out.

Code: Select all

set the boundingRect of group "myZoom" to the rect of group "myZoom"

I assume that the lockLoc of your group is true.

and tell us if it works.

Kind regards
Bernd

Posted: **Tue Jun 18, 2013 10:06 pm**

Hi Bernd

That code doesn't work. it does nothing on my script (I have pace it just before the loop to change the itens size and changed the "myzoom" to the name of my group container.

I think I know what the problem is, but I dont know how to resolve it.

the problem is that I'm changing the item size (H,W) and nor his measure coordinates (boundingRect???)

I presume that each control have a top left + bottom right coordinates (or something like that) that define the size of the control right?
If I apply the factor to those coordinates, the controls will resize correctly.

the problem is... how do I access/change those coordinates?

many thanks

Posted: **Tue Jun 18, 2013 10:15 pm**

Hi palanolho,

could you upload a small sample stack just like in the image. It gets too confusing otherwise.

You should be able to upload since you have more than 10 posts.

To upload a stack zip it first. Then you when you compose your message in a reply you have a tab "Upload attachment" below the text field at the left.
First choose the zipped version of your stack and then don't forget to "Add the File".
If you preview your post it should show an attached stack.

Kind regards
Bernd

Posted: **Tue Jun 18, 2013 11:25 pm**

I managed to do it

YEY!!

I found out that the function I was looking for is "rectangle"

Code: Select all

get the rectangle of control "XPTO"

this will give the coordinates or the control area

I have attached the example so that can see.

HOWEVER ... (there's always a but ....)

It's not working perfectly.

In order for this to work properly I need to store the original coordinates of the rectangle og the control, when it was placed inside the group.
I simulated this by adding a MedDim custom property

The problem (as I found out) is that the coordinates of the rectangle change when i scroll on the group. I think it's because of this that when you zoom the first time,the controls inside the group change place and stay there.

Also, if you notice, the zoom is always made to the top left corner and not to the centre of the group.

So, what I will try do do now (and have no Idea yet) is to:
1- find a way so that the "original" rectangle coordinates are the correct ones so that the control stay on the original place when the user zooms
2- find a way to zoom the controls to the centre of the group so that the controls are always in the centre of the workarea (the group)

Any ideas ? :S

Many Thanks
- Miguel

Posted: **Wed Jun 19, 2013 6:28 pm**

Hi Miguel,
In your stack the MesDim = the rect of the control. I think it is better to store width and heighi instead and adjust the loc after resizing

Kind regards
Jean-Marc

Posted: **Wed Jun 19, 2013 8:31 pm**

Hi Miguel,

I changed your stack to zoom smoothly.

But there are some tricks to that and the way it is now is not what I would do, it was just the fastest way to integrate this into your existing stack.

One thing is that you reduce the objects by reducing their rect. This is ok for width and height but it will not change their location to where you want them.
you have to have a reference points towards which you can calculate the appropriate new location of the objects. (see new button)
In your case I chose the loc of group "game_content_area" as a reference point.
Then I added a customproperty to each control that is the location of the object at 100 percent zoom, i.e. at normal size.
From then I use your rect calculation and then the x and y difference at a given zoom level from the reference point, i.e. the location of said group. (all in the stack script in handler resizeGroupContentByFactor)

This gives a zoom. There are some rounding errors in the placement of the objects but it basically works.

Now the ugly part of the story. To make it short: I added a button "grcFake" in the top left corner of group game_content_area. The only function of this button is to hack around a bug in Livecode that you can not reliably set the location of objects in a group if the scrollbars are visible. That was the reason in your image that the green thing was always in the top left corner.
An alternative is to set the boundingRect of the group. That obviates the need for the fake graphic in the top left corner BUT I never figured out an appropriate value for the boundingRect.
Now there is no boundingRect set.

If you care for the discussion of the LiveCode bug:
http://forums.runrev.com/phpBB2/viewtop ... =7&t=15450

With all that weirdness I admire how far you got. I also admired Jean-Marc when he did his zoomable group. It pretty soon gets confusing.

Kind regards
Bernd

Posted: **Wed Jun 19, 2013 9:27 pm**

Thanks alot

I'll give it a look

Cheers!!
- Miguel

Posted: **Fri Jun 21, 2013 4:40 pm**

@Bernd,

What would be different/simpler IF i had no scrollbars on the group?
Would it be possible to make it work correctly?

Because I can take the scrolls out and implement some custom-made ones.

many thanks

Posted: **Wed Jun 26, 2013 12:19 am**

Hi Miguel,

it took me a while to change the stack to have independent scrollbars. Yes it is possible, but there are a lot of things you have to do in code that should be handled by the group natively.
It gets quite convoluted and complicated.

Actually I would revise my interface to a simpler one. This zooming stuff gets very complicated very soon.

that said
If you do this and want the central zoom you have to set the unboundedScroll of the group to true. This is because you will want to scroll to negative numbers, which is not usually possible. Also on a scrollbar you can not use negative numbers. You could on a slider though.

The stack I append is to a certain extend commented and uses the same basic resisze handler of the previous stacks. It is not a polished stack, it just shows one way of doing this.
Actually I think when the refactoring of Livecode is done and we get resolution independing graphics this type of stuff should be a lot smoother and easier. (the fix of the bug with groups that have scrollbars on would certainly also help)

Have a look.

Kind regards
Bernd

Posted: **Wed Jul 03, 2013 8:51 pm**

Hi Miguel,

would you mind to tell me what you thought of the latest stack I posted.

Thank you in advance

Kind regards
Bernd

LiveCode Forums.

How to Zoom in/out group content

How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content

Re: How to Zoom in/out group content