Image Resizing, Repositioning with dynamic anchor point

[sameer valva]

Hi

I'm working on a big project that i shared before and i had a lot of questions for some parts, BioHazard advised me to dissect the project to make it easy to solve the problems.

One of the part is to load an image and resize it and reposition it inside the Green Box .

What i didn't figure how to do it are the followings :

1- How to keep the original aspect ratio of the imported image discarding the ration of image object in the project. ( like the option in slideshow -resize proportional )
2- How to make the scaling anchor point always being the center of the image object (center of the grid)

[sameer valva]

3- When Clicking on the buttons of re-positioning it gives one order per click, is there anyway to make actions continue while pressing until user release the press?

[BioHazard]

... When Clicking on the buttons of re-positioning it gives one order per click, is there anyway to make actions continue while pressing until user release the press?

The only way that comes to mind would be to move the button re-positioning code over to the Page On Timer event, and place a Page.StartTimer command in its place. As there is no "mouse up" event, the Page.StopTimer command would have to go in the button's On Leave (or On Right-Click) event. It's not ideal but unless someone can figure out a workaround to simulate a "mouse up" event, it's the closest I can think of. So, your code would go something like this:

-- Page On Timer
Image_Pos = Image.GetPos("Image1");
Image.SetPos("Image1", Image_Pos.X-5, Image_Pos.Y);

-- Button On Click
Page.StartTimer(100, 10);

-- Button On Leave (or Button On Right-Click)
Page.StopTimer(10);

How to keep the original aspect ratio of the imported image discarding the ration of image object in the project.

I think you'd have to run an Image.SetSize command to reset the dimensions of the Image Object itself (which you'd run immediately after Image.Load). Unless someone else knows any neat tricks, I think you might otherwise be out of luck.

[BioHazard]

Edit,

Wait a minute. In regard to ...

is there anyway to make actions continue while pressing until user release the press?

... it just occurred to me that you should be able to use the Button.GetState() action to do this. Have a look into that. Will see what I can figure out in the meantime.

[BioHazard]

Okay, scratch that last suggestion. Button.GetState only works for toggle-buttons and your buttons are actually images anyway. You can however, catch the mouse-down/mouse-up events (for both left & right mouse buttons) via e_Key event variables. So you'd be looking at something along the lines of:

-- Image On Click 
Page.StartTimer(100, 10);

-- Page On Timer
Image_Pos = Image.GetPos("Image1");
Image.SetPos("Image1", Image_Pos.X-5, Image_Pos.Y);

-- Page On Mouse Button
if e_Type == LEFT_BUTTON_UP then
    Page.StopTimer(10);
end

However this won't actually work because the Page.StartTimer() command won't activate until you release the mouse-button. Am going to have give this one some further thought. Maybe someone else will step in during the meantime.

[BioHazard]

Here's a thought!

If you move the Page.StartTimer() command (in the above code), over to the Page On Mouse Button event, it will trigger the Timer without the mouse-button needing to be released first. This will be enough to start/stop the image-scroll effect wherever you click on the page.

The trick from there however, will be to limit the clickable-area to within your arrow buttons (images) only. To do that, you'd have to track mouse-movement and integrate it with the Page.StartTimer() command, as an if/then statement. That'll take a bit of work because you need to track X/Y coordinates of the mouse using the System.GetMousePosition() command.

I provided a demo for tracking mouse movement in this thread, here And you can download my demo apz (Track Mouse Movement) from: here

If you'd like to have a go at putting this concept into action yourself, I'll provide help if you get stuck. But I think you should make a determined effort on your own, first. Best way to learn. There may be another easier way to do this - but I can't think of any other way at the moment. So, see how you go with this concept. If someone else comes up with a better way in the meantime, well then, nothing lost and some knowledge gained.

[sameer valva]

Hi BioHazard , as usual the first to show up, True Hero

You gave a good hints , ill try to use them in different way and come back to you for the results, i used image buttons just for making a quick sample, and i tried other button but got the same thing.

So lets find how to do it starting from your hints and wait somebody to step in and give another solution.

Regarding anchor point , i think this is related to math and i think we need an equation or some calculations to figure how to make the position adjust to the center of the box while scaling.

[sameer valva]

I thing using a slideshow will solve the aspect ration issue, and the transformations will be applied to it.

[BioHazard]

@sameer
To get you started (and thinking), here are the co-ordinates of each of your arrow image-buttons. When applying the above concept, you need to track mouse position and limit the "clickable area" to within the area of these image-buttons.

xLeft = 130; -- (+48)
yLeft = 450; -- (+48)

xRight = 130; -- (+48)
yRight = 530; -- (+48)

xUP = 91; -- (+48)
yUP = 490; -- (+48)

xDown = 171; -- (+48)
yDown = 490; -- (+48)

[BioHazard]

Example,

Attached is a partial solution to your question re.

is there anyway to make actions continue while pressing until user release the press?

Download the partial-solution apz and test it by clicking and holding down the mouse-button anywhere on the page. You'll see the image-scroll effect in motion. Release the mouse-button and the scroll-effect stops.

Now, use the above co-ordinates (together with the System.GetMousePosition() command) to limit the clickable area to the image-buttons. Understand?

[sameer valva]

Ill test it now

[sameer valva]

Now that's a good start, but as u said we need to track the mouse positions to trigger each button actions.

[BioHazard]

.. but as u said we need to track the mouse positions to trigger each button actions.

So track it, dude. Use my old demo-apz on tracking mouse-movement as an example: here

[sameer valva]

Sure im doing that right now, but im thinking also to track which button is clicked rather than tracking the mouse movement. I'll return back with the results

[sameer valva]

I tried Some simple calculations for a auto reposition during Scaling and it gave a close results. I used a slideshow just for the proportion issue.

After some measurements i found that if you scale 100 pixels then you need half the number to reposition the slide in a way to appear as if its scaling from the center of the grid.
I know its not the exact number and calculations buts its very close, hope someone step and give as the exact equation.

newX = (Slide_Size.Width*0.05)/2;
newY = (Slide_Size.Height*0.05)/2;

Slide_Pos = SlideShow.GetPos("SlideShow1");
SlideShow.SetPos("SlideShow1", Slide_Pos.X-newX, Slide_Pos.Y-newY);

Still working on the command while pressing on button.