Scale image proportionally on resizestack

LiveCode is the premier environment for creating multi-platform solutions for all major operating systems - Windows, Mac OS X, Linux, the Web, Server environments and Mobile platforms. Brand new to LiveCode? Welcome!

Moderators: FourthWorld, heatherlaine, Klaus, kevinmiller, robinmiller

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

Re: Scale image proportionally on resizestack

Post by MaxV » Thu Jan 04, 2018 1:32 pm

[-hh] wrote:
Thu Jan 04, 2018 8:06 am
[MaxV resizes relative to the height change of the stack.]
No, on both sizes works.
Livecode Wiki: http://livecode.wikia.com
My blog: https://livecode-blogger.blogspot.com
To post code use this: http://tinyurl.com/ogp6d5w

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

Re: Scale image proportionally on resizestack

Post by jacque » Fri Jan 05, 2018 1:43 am

You can use either of these, depending on whether you want to scale the image to fit an existing object, or you want to pass a rectangle's dimensions.

Code: Select all

-- using an object as target rect:

on scaleToFit pImg,pObj -- the image name, the target object
  put the formattedheight of img pImg into theFHt
  put the formattedwidth of img pImg into theFWd
  put max(the height of pObj/theFHt, the width of pObj/theFWd) into theRatio
  set the height of img pImg to theFHt*theRatio
  set the width of img pImg to theFWd*theRatio
  set the loc of img pImg to the loc of pObj
end scaleToFit

-- passing a rect instead:

on scaleToRect pImg,pRect -- the image name, the target rect
  put the formattedheight of img pImg into theFHt
  put the formattedwidth of img pImg into theFWd
  put max((item 4 of pRect - item 2 of pRect)/theFHt, (item 3 of pRect - item 1 of pRect)/theFWd) into theRatio
  set the height of img pImg to theFHt*theRatio
  set the width of img pImg to theFWd*theRatio
  set the topleft of img pImg to item 1 of pRect,item 2 of pRect
end scaleToRect
The second version could use the card rect if the image should be the full size of the card. You can also change the last line of the second version to set the loc of the image rather than the topleft if you want. In the app this was for, we needed the topleft to remain stable.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

windowsLC
Posts: 26
Joined: Sat Dec 16, 2017 5:58 am

Re: Scale image proportionally on resizestack

Post by windowsLC » Fri Jan 05, 2018 5:53 am

Got it thanks much.

I got it working but ended up not liking with stack resize effect for this UI so I went with using a slider set with ratios to resize the image contained with some similar code.

Seriously thanks to everyone that posted, this forum has been so helpful I'm nearly finished with the inner workings of my project.

cowtrax3
Posts: 5
Joined: Mon Sep 24, 2018 1:34 am

Re: Scale image proportionally on resizestack

Post by cowtrax3 » Thu Sep 27, 2018 1:39 am

I am new to LC and am having problems resizing the screens to fit correctly. I have put the following code into my stact script:

on preOpenStack
if the environment is "mobile" then
mobileSetAllowedOrientations "landscape left,landscape right"
set the fullscreenMode of this stack to "noBorder"
end if
end preOpenstack

it still does not scale correctly. Is this the correct syntax and location to place the code? Any help would be appreciated. I just want everything to expand and shrink appropriately to use on various size devices.
thanks. Mike

ClipArtGuy
Posts: 253
Joined: Wed Aug 19, 2015 4:29 pm

Re: Scale image proportionally on resizestack

Post by ClipArtGuy » Thu Sep 27, 2018 1:53 am

It's been a while since I did anything on the mobile side of things, but have you tried using "exactfit" instead of "noborder"?

Code: Select all

set the fullscreenMode of this stack to "exactfit"

cowtrax3
Posts: 5
Joined: Mon Sep 24, 2018 1:34 am

Re: Scale image proportionally on resizestack

Post by cowtrax3 » Thu Sep 27, 2018 4:29 am

that worked, sot of, but when put into portrait mode, it cuts of the right side of controls which dont fit. it does not scale down to the narrower size. show it not shrink it down when in the portrait mode?

thanks.
Mike

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

Re: Scale image proportionally on resizestack

Post by jacque » Thu Sep 27, 2018 8:58 pm

Your script handlers are in the right place, but "exactFit" isn't usually the best choice on mobile. If your stack is in landscape mode, "noBorder" usually works well, and for portrait, "showAll" is best. NoBorder scales the stack so the content height is completely shown, and ShowAll scales the stack to show the complete width of the content. In either case, some edges may be cropped or have empty borders if the screen ratio is different than the stack size ratio.

You can set the correct fullscreenMode on orientationChanged, which is sent before the card redraws.

Code: Select all

on orientationChanged
  if the fullscreenMode of this stack = "noBorder" then
    set the fullscreenMode of this stack to "showAll"
  else
    set the fullscreenMode of this stack to "noBorder"
  end if
end orientationChanged
If you set the stack's backgroundColor or backgroundPattern, the borders won't be too noticable.

The other way of doing it is to avoid fullscreenMode and just calculate new positions for every object on the card and reset their rectangles in a resizeStack handler.
Jacqueline Landman Gay | jacque at hyperactivesw dot com
HyperActive Software | http://www.hyperactivesw.com

bwmilby
Posts: 438
Joined: Wed Jun 07, 2017 5:37 am
Location: Henrico, VA
Contact:

Re: Scale image proportionally on resizestack

Post by bwmilby » Fri Sep 28, 2018 2:46 am

If you want to put a test stack on your device to see how size/orientation changes are impacted by different fullscreenmodes, I've posted a demo:

https://milby.us/lc/MobileDemo2.livecode

Here's a thread on the list that discusses it:

https://www.mail-archive.com/use-liveco ... 97462.html
Brian Milby

Script Tracker https://github.com/bwmilby/scriptTracker

Post Reply

Return to “Getting Started with LiveCode - Experienced Developers”