Scrolling and zooming an application

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
Hans-Helmut
Posts: 57
Joined: Sat Jan 14, 2017 6:44 pm

Scrolling and zooming an application

Post by Hans-Helmut » Mon Apr 03, 2017 6:05 pm

My new test application shall allow users to zoom into the application pane and allow users to use the mouse to scroll around just touching the background of the application pane.

This is often seen in applications, especially graphic applications to even zoom to the pixel level of a picture. But also users with impaired eyesight would like to make everything look bigger.

So, I tried with the scalefactor, putting the elements of the background pane into a group and have the group be scrollable using the mouse (which shall turn to a hand icon when the mouse is down). So, basically, the user is scrolling around the group.

The problem here is that I can not figure out a way of keeping the original window in the same size and location. I just want the content to zoom, not the whole window. A scaled-up/down window also changes the location on the screen. And the window shall stay on the screen where it is or where the user moved it and keep its rectangle.

One way, I am thinking, might be using two stacks, one as the outer frame and inside transparent, and the other one showing up and scaling inside. But to keep two windows (also not good for mobile) is not really my desire. And I am not sure if I could even place a secondary window with a changing scale factor inside the primary "frame" window.

Or, possibly, I am just lost a bit...

Any suggestions? :D

dunbarx
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9648
Joined: Wed May 06, 2009 2:28 pm
Location: New York, NY

Re: Scrolling and zooming an application

Post by dunbarx » Tue Apr 04, 2017 12:21 am

Didn't Jacque, back in the pleistocene, create a "magnifying glass" floating "window" that tracks the mouseLoc and does what Hans is asking for? I do not know if that gadget is scalable, or if it might be with a little work.

Jacque?

Craig

MaxV
Posts: 1579
Joined: Tue May 28, 2013 2:20 pm
Location: Italy
Contact:

Re: Scrolling and zooming an application

Post by MaxV » Tue Apr 04, 2017 12:14 pm

I would use:
########CODE to copy and paste#######
on scaleMe p
if p = "+" then
put the loc of me into tLoc
set the width of me to ((the width of me) * 1.25)
set the height of me to ((the height of me) * 1.25)
set the loc of me to tLoc
set textSize of me to ((the textSize of me) + 1)
else
put the loc of me into tLoc
set the width of me to ((the width of me) / 1.25)
set the height of me to ((the height of me) / 1.25)
set the loc of me to tLoc
set textSize of me to ((the textSize of me) - 1)
end if
end scaleMe
#####END OF CODE generated by http://tinyurl.com/j8xf3xq with livecode 9.0.0-dp-6#####

And for relative distance just use the geometry Manager, this way items don't overlap.
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

Hans-Helmut
Posts: 57
Joined: Sat Jan 14, 2017 6:44 pm

Re: Scrolling and zooming an application

Post by Hans-Helmut » Tue Apr 04, 2017 10:46 pm

Thank you vMax and all comments I really like.

I tested the example code and it works. But the effect is different. While I was using the scale factor for the whole stack which increases just all objects and everything, you are offering to increase the width and height of the stack itself as well as the text size. Well, then at least for buttons you also have to scale up the buttons and other objects if I am not mistaken. Because increasing all sizes by a factor then buttons would not be able to show the text even.

Using the scale factor, the stack window loc on the monitor screen is not the same any longer, even though it gives the same values (left, top, right, bottom). But visually, it sits somewhere else. But this probably has to do with the given resolution of the screen and the stacks own resolution.

Maybe I am not explicit enough in what I like to see.

Most of us know Photoshop for example. So, pressing the spacebar allows dragging the application pane (within the given window) to wherever you want.

Then using a zoom command (Crtl-Shift-+) will zoom into the application pane.

The idea of a separate stack window allowing such zoom effect is very nice. But that is also a bit of a different idea and I would like to explore it separately.

So, if I extend the proposal of vMax to what I like to achieve then I would have to increase the size of all objects within the stack window including all buttons, fields, text, graphics, etc. ? And actually, I would keep the stack window as it is.

And using the scroll effect I need a group pane with objects which is bigger than the stack window. But I would have to use separate scrollbars, since the built-in scrollbars sit on the right and bottom side always. Or?

Greetings, Hans-Helmut )

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

Re: Scrolling and zooming an application

Post by jacque » Wed Apr 05, 2017 6:29 am

I've uploaded the stack that Craig mentioned in the Sample Stacks online area. Maybe it will give you a starting point. Click Sample Stacks in the LC toolbar and search for "Image Magnification".
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

Post Reply

Return to “Getting Started with LiveCode - Complete Beginners”