Rendering Selective Portions of an Image

Got a LiveCode personal license? Are you a beginner, hobbyist or educator that's new to LiveCode? This forum is the place to go for help getting started. Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller

Post Reply
Gage
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 224
Joined: Tue Mar 26, 2013 8:59 pm

Rendering Selective Portions of an Image

Post by Gage » Wed Jun 25, 2014 4:01 am

Hello all!

Assume I have a movable image as the front layer on my card. Behind it lies a larger rectangle image, whose rect should confine the loc of the movable image.

I want to figure out a way to only render the portion of the movable image that lies within the rect of the larger rectangular image behind it.

In other words, since it would be possible to move the loc of the moving image right to the edge of the background rectangle, there are a bunch of viable locations where the smaller movable image is both inside of and outside of the bounds of the rectangle, and I want only the parts where the two images overlap to be shown, preferably without having a whole gang of different images drawn that are called in place of the original as the image approaches an edge.

Hope that's clear! It would seem to be a simple enough function, perhaps contained somewhere in all of the Blending/BlendLevel stuff (the secrets of which are pretty foreign to me).

Thanks for the support!
Phil E.

Simon
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 3901
Joined: Sat Mar 24, 2007 2:54 am

Re: Rendering Selective Portions of an Image

Post by Simon » Wed Jun 25, 2014 7:43 am

Hi Phil,
Why wouldn't the larger rect be in front of the image?
Work with the border size and make it big, or use a png with it's center at 0 opacity.

Simon
I used to be a newbie but then I learned how to spell teh correctly and now I'm a noob!

[-hh]
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 2262
Joined: Thu Feb 28, 2013 11:52 pm

Re: Rendering Selective Portions of an Image

Post by [-hh] » Wed Jun 25, 2014 8:19 am

..........
Last edited by [-hh] on Wed Aug 13, 2014 3:16 pm, edited 1 time in total.
shiftLock happens

Gage
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 224
Joined: Tue Mar 26, 2013 8:59 pm

Re: Rendering Selective Portions of an Image

Post by Gage » Wed Jun 25, 2014 8:28 pm

Simon wrote:Hi Phil,
Why wouldn't the larger rect be in front of the image?
Work with the border size and make it big, or use a png with it's center at 0 opacity.

Simon
Simon,
The larger rect is a map, and I am moving a circular image around on it, so the circular image must be in front. I want it to be able to be placed anywhere on the map, including up to the edges, but IF it is placed where the circle extends beyond the edges of the map, I want only that part of the circle not to be visible. The circle was likely just created during runtime, so it will be the foremost layer.

Not sure what you're suggesting... what does it mean to have a .png with its center at 0 opacity?

Thanks for helping!
Phil E

Gage
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 224
Joined: Tue Mar 26, 2013 8:59 pm

Re: Rendering Selective Portions of an Image

Post by Gage » Wed Jun 25, 2014 8:34 pm

[-hh] wrote:A different approach may be the following.

What you are looking for is part of this stack (imageZoomAndFit)
http://forums.livecode.com/viewtopic.ph ... 71#p102966

Load an image (with button "set file name"), zoom it in (with button "-") and controlClick it in order to drag it inside its frame. This move can certainly also be scripted and then controlled by a button.
The technique used is to group an image and setting the rect of the group as 'frame' (= the image is 'clipped' by the rect of the group).
[-hh],
I will take a look at this. I should mention that the "image" I want to move around is *actually* a group containing 2 graphics. It's custom scripted as a circular timer, and I want to be able to drag it around by touch in the mobile environment after the timer group is created.

Hopefully that would still work with the stack.

Thanks for your help!
Phil E.

Gage
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 224
Joined: Tue Mar 26, 2013 8:59 pm

Re: Rendering Selective Portions of an Image

Post by Gage » Wed Jun 25, 2014 8:45 pm

[-hh],
That is a really cool stack! I'm impressed.

I'm trying to figure out how I can use it to clip some parts of the group of graphics if the group is moved to the edge of my existing image. I have no external image whose filename I can import, and no Ctrl-Click function on mobile touch (though I could probably just re-script that to respond to mouseDown/mouseMove).

Regards,
Phil E.

bn
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 4174
Joined: Sun Jan 07, 2007 9:12 pm

Re: Rendering Selective Portions of an Image

Post by bn » Wed Jun 25, 2014 9:04 pm

Hi Phil,

Scott Rossi did a stack "Spotlight". You find it at
http://www.tactilemedia.com/
go "software" then "all tutorials.

I made variant of Scott's stack that also lists the inks

it is too large to upload here:

http://berndniggemann.on-rev.com/twohol ... k.livecode

Maybe this is getting close to what you want. If this is anywhere near one could tweak the stack.

Kind regards
Bernd

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7393
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: Rendering Selective Portions of an Image

Post by jacque » Thu Jun 26, 2014 4:48 pm

I may not understand correctly, but it seems pretty easy:

1. Group the map and set the lockloc of the group to true
2. Create (or copy) the circular group inside the map group

That's it. Whatever part of the circular group is beyond the edges of the map will not draw. The important part is to be sure that the draggable group is inside the map group.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Gage
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 224
Joined: Tue Mar 26, 2013 8:59 pm

Re: Rendering Selective Portions of an Image

Post by Gage » Tue Jul 01, 2014 8:06 pm

Bernd,

Thank you!


Jacque,

That sounds very simple; I think it will work. How would I create the group inside of another group? Right now I am using:

clone group pGroup of this card

Seems like I would just add something after that, such as '...into group "My Map" of this card'
...or something like that?

Thanks all for your input!
Phil E.

jacque
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 7393
Joined: Sat Apr 08, 2006 8:31 pm
Contact:

Re: Rendering Selective Portions of an Image

Post by jacque » Tue Jul 01, 2014 9:14 pm

Close. Use this:

copy group pGroup to group "myMap"
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Gage
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 224
Joined: Tue Mar 26, 2013 8:59 pm

Re: Rendering Selective Portions of an Image

Post by Gage » Tue Jul 01, 2014 9:16 pm

Jacque,

You're a star! Thanks so much. I think this will do it; I knew it was something simple!

Many thanks to all,
Phil E.

Gage
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 224
Joined: Tue Mar 26, 2013 8:59 pm

Re: Rendering Selective Portions of an Image

Post by Gage » Tue Jul 01, 2014 11:34 pm

Well, it looks as though the copied object must be an object and not a group if the target destination of the copy command is a group.

I got that from the Copy command documentation.

Any ideas about how to get a group into another group via code?

Phil E.

Gage
Livecode Opensource Backer
Livecode Opensource Backer
Posts: 224
Joined: Tue Mar 26, 2013 8:59 pm

Re: Rendering Selective Portions of an Image

Post by Gage » Tue Jul 01, 2014 11:36 pm

Never mind... the ghost in the machine is playing tricks on me.

That's working perfectly!!

Phil E.

Post Reply