Re: Image Offset in Frame

[Sannyasin Brahmanathaswami via use-livecode]

@ Alejandro:

Thanks.. very clear… 

@paul hibbert

Thanks for the reminder on Scott's masking stack.. .that's what was sticking my 
mind that I could not find… I downloaded hist stack again.

but it seems we don't even need a graphic on top of the image or have to 
concern ourselves with these inkEffects, at least in this use case…as just 
grouping the image itself works with the clipstoRect.

I just tested using Alejandro's  "mini manual/method" with multiple images 

USE CASE: these will be images on the left of a vertical scrolling group…. 
thumbs for books, album covers of audio etc.) 

Very typical UI for vertical scrolling groups with rows of image left and text 
right… 

-- create one image, grouped, 
-- resize the group, position the book cover thumbnail in the top left (crops 
the right and bottom) 
-- zero out border and margin (a nuisance default for groups, IMHO). 
-- comment out the grab me script (we don't want users to inadvertently move 
these.)
-- Option copy seven of these into a column down…with 10 px in between them
-- group all those. 

 # in actual app run time the above two steps would be done dynamically 
 # copy a "row" group template…  place it below the last one… and then 
group them
 # Perhaps DataGrid2 will be the preferred tool for this if runtime 
generation of rows is fast.

-- group is now colum of  8 coverhumbs 830 px  tall. 
-- set height of this group to 500, 
-- test from msg box: set the scroll of this group to say… 200… works 
beautifully. 
-- vertical scroll bar works also but not wanted in this scenario.

Since we will create these dynamically run time.. I also tried "set the 
filename over img cover-thm-2 to url "….."  and it worked.. the image was 
imported and placed as it was saved in the group rect… in it's "cropped" 
position. his worked even with the image with negatiive x-y offsets inside the 
group  i.e. I was worried the x,y position would default to the 0,0 (topleft) 
of the clipped rect… but it did not, it was imported and kept it's negative 
offsets inside the group.

Awesome!

So should work on Mobile too and, should one want to create a UI/UX to emulate 
some layout program to operate like InDesign or Sketch for WSIWIG design etc. 
for this it would be very easy to do… 

BR…

On 11/16/17, 12:39 PM, "use-livecode on behalf of Alejandro Tejada via 
use-livecode"  wrote:

I was wrong. There is at least 3 (maybe more)
different ways to clip an image using a group:

Method 1 using lockLocation:
Method 2 using clipstorect
Method 3 using boundingRect

The following detailed description is useful mostly
for newcomers in this platform...

1) create a new stack
2) import an image
3) set the script of this image to:

on mousedown
grab me
end mousedown
-
4) group this imported image
5) reduce the size of this group and
6) Choose one of these options:

Option 1) - set the locklocation of this group to true or
Option 2) - set the clipstorect of this group to true or
Option 3) - set the boundingRect of this group to the rect of this group

If you select the group with the "Edit" tool, paste the previous script in
the message box, change the phrase "this group" for "selobj" (without
quotes)
and press enter:

set the locklocation of selobj to true

set the clipstorect of selobj to true

set the boundingRect of selobj to the rect of selobj

Each option have it's own advantages. Test them and choose
one that works for your purpose.

By the way, Where could I find the boolean property "clipstorect"
within the Property Inspector?

Al
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your 
subscription preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode


___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Image Offset in Frame

[J. Landman Gay via use-livecode]

On 11/16/17 6:22 PM, Alejandro Tejada via use-livecode wrote:

In the Position pane, at least in LC 9.

Which one? Do you set clipstorect property using the
checkbox labeled "Resize when setting rect property"?



In the Position pane, directly under the lockLoc checkbox, is a checkbox 
for clipsToRect. The tooltip says "Clip child controls to rect". It was 
recently added at some point in LC 9.


--
Jacqueline Landman Gay | jac...@hyperactivesw.com
HyperActive Software   | http://www.hyperactivesw.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Image Offset in Frame

[Alejandro Tejada via use-livecode]

Hi Jacque,

> In the Position pane, at least in LC 9.

Which one? Do you set clipstorect property using the
checkbox labeled "Resize when setting rect property"?

> I've wondered why we need clipsToRect when we have boundingRect.
> The only difference I can see is that boundingRect works with a
> non-locked group. If the group's lockLoc is true,
> I don't see any difference.

clipsToRect works without locking the group position too.

Groups with it's boundingRect property set always have the size
specified in this property. If a script changes the group width (or height)
and you leave the card, then return to this same card, this group with the
boundingRect property will recover their size specified in that property.

This does not happen with locked groups or group that have their
clipsToRect property set.

Al
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Image Offset in Frame

[J. Landman Gay via use-livecode]

On 11/16/17 4:38 PM, Alejandro Tejada via use-livecode wrote:

Option 1) - set the locklocation of this group to true or
Option 2) - set the clipstorect of this group to true or
Option 3) - set the boundingRect of this group to the rect of this group



I've wondered why we need clipsToRect when we have boundingRect. The 
only difference I can see is that boundingRect works with a non-locked 
group. If the group's lockLoc is true, I don't see any difference.




By the way, Where could I find the boolean property "clipstorect"
within the Property Inspector?


In the Position pane, at least in LC 9.

--
Jacqueline Landman Gay | jac...@hyperactivesw.com
HyperActive Software   | http://www.hyperactivesw.com

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Image Offset in Frame

[Alejandro Tejada via use-livecode]

I was wrong. There is at least 3 (maybe more)
different ways to clip an image using a group:

Method 1 using lockLocation:
Method 2 using clipstorect
Method 3 using boundingRect

The following detailed description is useful mostly
for newcomers in this platform...

1) create a new stack
2) import an image
3) set the script of this image to:

on mousedown
grab me
end mousedown
-
4) group this imported image
5) reduce the size of this group and
6) Choose one of these options:

Option 1) - set the locklocation of this group to true or
Option 2) - set the clipstorect of this group to true or
Option 3) - set the boundingRect of this group to the rect of this group

If you select the group with the "Edit" tool, paste the previous script in
the message box, change the phrase "this group" for "selobj" (without
quotes)
and press enter:

set the locklocation of selobj to true

set the clipstorect of selobj to true

set the boundingRect of selobj to the rect of selobj

Each option have it's own advantages. Test them and choose
one that works for your purpose.

By the way, Where could I find the boolean property "clipstorect"
within the Property Inspector?

Al
___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Image Offset in Frame

[Alejandro Tejada via use-livecode]

Looks like there are two different ways to
clip an image using a group:

Method 1 using lockLocation:

1) create a new stack
2) import an image
3) set the script of this image to:

on mousedown
grab me
end mousedown
-
4) group this imported image
5) reduce the size of this group and
6) set the locklocation of this group to true

Method 2 using clipstorect

1) create a new stack
2) import an image
3) set the script of this image to:

on mousedown
grab me
end mousedown
-
4) group this imported image
5) reduce the size of this group and
6) set the clipstorect of this group to true

By the way, Where could I find the boolean property "clipstorect"
within the Property Inspector?

Al

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Re: Image Offset in Frame

[Paul Hibbert via use-livecode]

For a simple rectangular crop you can just group the image and set the group 
bounds to the desired frame area, make sure you lock the location of the group 
and image, but ultimately I think the best person to answer your question would 
be Scott Rossi, so I’ll hand over to him…

http://tactilemedia.com/blog/2015/11/04/livecode-basics-masking-objects/

Paul

> On 15 Nov 2017, at 20:37, Sannyasin Brahmanathaswami via use-livecode 
>  wrote:
> 
> His is probably covered somewhere, but I can't find it.
> 
> In CSS we can position in image in frame with an offset like -20,-20
> 
> In most layout programs you can move the image around inside the frame.
> 
> How can we do that with an image in LiveCode?
> 
> I can use crop, but this is permanent
> 
> BR
> 
> ___
> use-livecode mailing list
> use-livecode@lists.runrev.com
> Please visit this url to subscribe, unsubscribe and manage your subscription 
> preferences:
> http://lists.runrev.com/mailman/listinfo/use-livecode


___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Image Offset in Frame

[Alejandro Tejada via use-livecode]

Hi Sannyasin,

> This is probably covered somewhere, but I can't find it.
> In CSS we can position in image in frame with an offset like -20,-20
> In most layout programs you can move the image around inside the
> frame. How can we do that with an image in LiveCode?
> I can use crop, but this is permanent

There are many options, but I just remember these
techniques in this moment:

1) A group could mask an image within it's boundaries.

2) Ink effects to mask an image:
http://tactilemedia.com/blog/2015/11/04/livecode-basics-masking-objects/

3) Hidden point technique:
http://use-livecode.runrev.narkive.com/ojZ8ao1Z/would-like-to-show-a-photo-through-a-polygon-shape

Al

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode

Image Offset in Frame

[Sannyasin Brahmanathaswami via use-livecode]

His is probably covered somewhere, but I can't find it.

In CSS we can position in image in frame with an offset like -20,-20

In most layout programs you can move the image around inside the frame.

How can we do that with an image in LiveCode?

I can use crop, but this is permanent

BR

___
use-livecode mailing list
use-livecode@lists.runrev.com
Please visit this url to subscribe, unsubscribe and manage your subscription 
preferences:
http://lists.runrev.com/mailman/listinfo/use-livecode