constraining stack's aspect ratio while resizing

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

Post Reply
Martin Koob
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 256
Joined: Sun May 27, 2007 8:19 pm

constraining stack's aspect ratio while resizing

Post by Martin Koob » Thu May 30, 2019 5:47 am

I want to have a stack window that has an graphic at a specific aspect ratio and that will maintain the aspect ratio of the image as the stack is being resized. In addition the stack window aspect ratio (with some adjustments) is maintained while the stack is being resized.

I can get the image to resize maintaining its aspect ratio and the stack maintaining its size proportional to the graphic in one dimension or the other using the following script. In this case the stack and image height resize in tandem but the width is not contained and can vary.

What I want is to have the stack's aspect ration constrained to the graphic's aspect ratio but it looks like using the resizeStack message won't allow me to do that. See the following line in the code below:

Code: Select all

   set the width of this stack to the width of graphic "cameraDisplay"
It does not work.

Code: Select all


Local sCameraName, sCameraAspectRatio
# sCameraName and sCameraAspectRatio are set elsewhere in the script when camera opens

on resizeStack pNewStackWidth, pNewStackHeight, pOldWidth, pOldHeight
   put item 1 of sCameraAspectRatio into tScreenWidthFactor
   put item 2 of sCameraAspectRatio into tScreenHeightFactor
   # Width of stack proportional with graphic width -- stack height varies
   -- set the width of graphic "cameraDisplay" to pNewStackWidth
   -- set the height of graphic "cameraDisplay" to Round(pNewStackWidth/tScreenWidthFactor*tScreenHeightFactor)
   
   # Height of stack proportional with graphic Height -- stack width varies
   set the height of graphic "cameraDisplay" to pNewStackHeight - 40 # Leave 40 pixels at bottom of stack for controls.
   set the width of graphic "cameraDisplay" to Round(the height of graphic "cameraDisplay"/tScreenHeightFactor*tScreenWidthFactor)
   
   # Try to constrain stack width to image width but it does not work  Stack width follows cursor position, image maintains aspect ratio.
   set the width of this stack to the width of graphic "cameraDisplay"
   
   # adjust postion of graphic "cameraDisplay"
   set the topleft of graphic "cameraDisplay" to "0,0"
   # adjust position of other controls on card to be in bottom 40 pixel area
   set the bottom of button "open camera" to the bottom of this card - 10
   set the bottom of button "record" to the bottom of this card - 10
   set the bottom of button "close" to the bottom of this card - 10
   set the bottom of Field "presets" to the bottom of this card - 10
   resizeCameraDisplay
end resizeStack

on resizeCameraDisplay
   cameracontrolset sCameraName, "rect", the rect of graphic "cameraDisplay"
end resizeCameraDisplay

Is there a way to use the resizeStack message to get the results I want?
I the resizeStack message can't handle this then what other techniques I want?

I tried using a button with mouseUp and and mouseMove handler to resize the stack and the image as the button is being dragged but that did not work at all. The stack was jumping between two sizes and locations and eventually hit a recursion limit.

Any suggestions as to how to handle this?

Thanks

Martin

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

Re: constraining stack's aspect ratio while resizing

Post by [-hh] » Thu May 30, 2019 10:15 am

Block the resizeStack message when resizing by script. For example:
Use the following script with a resize button at botRight.

Code: Select all

local L,T
-- resizes stack (based on height or width) according to fraction pF
on resizeMe wh,pF
  lock messages
  if the mouse is up then exit resizeMe
  if wh begins with "H" then -- adjust height
    put (L,T,L+the mouseH,T+pF*the mouseH) into r
  else -- adjust width
    put (L,T,L+pF*the mouseV,T+the mouseV) into r
  end if
  set rect of this stack to r
  set botRight of me to the botright of this card
  send "resizeMe wh,pF" to me in 48 millisecs
end resizeMe

on mouseDown
  lock messages
  put the left of this stack into L
  put the top of this stack into T
  put the width of this stack into w
  put the height of this stack into h
  --set the liveResizing of this stack to false --> remove this, see the bug described below.
  set the resizable of this stack to false
  -- put 4/3 into frac
  -- put 16/9 into frac
  put w/h into frac
  -- put your custom fraction into frac #<-------
  resizeMe "W",frac -- or resizeMe "H", frac #<-------
end mouseDown

on mouseUp
end mouseUp

on mouseRelease
end mouseRelease
Last edited by [-hh] on Thu May 30, 2019 9:13 pm, edited 1 time in total.
shiftLock happens

Martin Koob
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 256
Joined: Sun May 27, 2007 8:19 pm

Re: constraining stack's aspect ratio while resizing

Post by Martin Koob » Thu May 30, 2019 6:30 pm

Thanks [-hh] that does what I want.

One thing though is that if I resize once by dragging the 'resize' button on the bottom right and then try to click that button again to resize it, it does not receive the mouseDown message so I can't resize the stack again on that first attempt. The 'resize' button appears unresponsive. If I try a few more times or try clicking on other parts of the stack the button will become responsive again.

While dragging the 'resize' button at the bottom right of the stack the mouse pointer is lower and more to the right of the bottom right of the stack so I thought perhaps it does not get the mouseUp message as it occurs outside of the 'resize' button. I tried to make sure the button moves so that the mouse pointer remains within the button by subtracting 10 from the mouseV and the mouseH. That made the mouse pointer track for the most part within the 'resize' button but that did not help resolve the issue of the button then being unresponsive.

Any ideas on how to overcome this?

Thanks for any suggestions.

Martin

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

Re: constraining stack's aspect ratio while resizing

Post by [-hh] » Thu May 30, 2019 8:56 pm

Martin.

Sorry, I wrote this right out of my head. Now the following works here:

Please remove the line

Code: Select all

set the liveResizing of this stack to false
from the mouseDown handler.
Setting the liveResizing is the culprit though its value has currently no effect due to the dictionary!?!? It causes unresposiveness when set ... A bug.

You could also set the resizable of this stack to false only once elsewhere (on preopenstack or in the property inspector).
[p.s. My button is transparent and has nothing true on the first tab of the property inspector but the visible.]
shiftLock happens

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9802
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: constraining stack's aspect ratio while resizing

Post by FourthWorld » Thu May 30, 2019 9:41 pm

The best way to override the resizing behavior users are accustomed to is to hook into the OS APIs for the window definition via LC Builder.

LC Script is set up to handle most common behavior well, but this sort of edge case will prove difficult to handle smoothly in script.

Another option would be to not bother with attempting to alter normal window resizing at all. Let the user remain in control of this window as they would any other, and resize the image within it to remain proportionally maximized.

As a bonus you could provide a way to snap the window to the image size for those users who really want that.

But with so many apps having moved to single window designs, if you were in a position to do A/B testing I'd wager the more common free-resizing behavior would score higher. I've been surprised by how many prefer to work with windows maximized, esp. with the most common screen size being just 1366x768.
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

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

Re: constraining stack's aspect ratio while resizing

Post by [-hh] » Thu May 30, 2019 9:49 pm

Fourthworld wrote:The best way to override the resizing behavior users are accustomed to is to hook into the OS APIs for the window definition via LC Builder.
Could you please explain this? Give an example? And how it relates to the given problem?
Currently it isn't even possible to resize a widget within LCB but only by script access...
shiftLock happens

Martin Koob
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 256
Joined: Sun May 27, 2007 8:19 pm

Re: constraining stack's aspect ratio while resizing

Post by Martin Koob » Thu May 30, 2019 10:19 pm

Thanks [-hh]

Your suggestion to remove the two lines from mouseDown works

Code: Select all

  --set the liveResizing of this stack to false --> remove this, see the bug described below.
  --set the resizable of this stack to false --> moved this to a preopenstack handler
 
With just a graphic that is resized in proportion to the stack on the card as well as some buttons that are kept that the same distance from the bottom the resizing works smoothly.

However when I create a camera control on the stack to view the input from a videocamera using the rect of the graphic to outline the rect of the video Image the resizing of the stack becomes jerky.

If I use the resizestack message I can get smooth stack resizing and smooth video display scaling. In that case I can contstrain the aspect ratio of the video display I can't do that for the stack so one of the stack edges will not follow the edge of the video display.

Using the button that [-hh] suggested gets the result I want visually but not smoothly unless there is something I can do with lock screen or send in time or something like that.

Martin

FourthWorld
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 9802
Joined: Sat Apr 08, 2006 7:05 am
Location: Los Angeles
Contact:

Re: constraining stack's aspect ratio while resizing

Post by FourthWorld » Fri May 31, 2019 1:02 am

[-hh] wrote:
Thu May 30, 2019 9:49 pm
Fourthworld wrote:The best way to override the resizing behavior users are accustomed to is to hook into the OS APIs for the window definition via LC Builder.
Could you please explain this? Give an example? And how it relates to the given problem?
Currently it isn't even possible to resize a widget within LCB but only by script access...
LCB offers interfaces to OS APIs. Window definitions are part of OS APIs. To create a custom method overriding the standard resizing behavior would seem to use those APIs, which LCB could offer, no?
Richard Gaskin
LiveCode development, training, and consulting services: Fourth World Systems
LiveCode Group on Facebook
LiveCode Group on LinkedIn

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

Re: constraining stack's aspect ratio while resizing

Post by [-hh] » Fri May 31, 2019 8:26 am

Martin,

you could, as below,
= set the send rate to a lower value,
= use a variable instead of polling the mouse.
If this is still jerky (depends strongly on user's computer hardware)
= moreover hide the cameracontrol and show a placeholder while resizing.
The placeholder may be a svg widget not preserving its aspect ratio.

Code: Select all

local L,T,iMove=false

-- for setting the camerarect relative to the stack rect
-- (or use the card rect instead of localLoc)
function camerarect
  put the rect of this stack into r
  return localLoc((80+item 1 of r,45+item 2 of r)), \
        localLoc((-80+item 3 of r,-45+item 4 of r))
end camerarect

-- resizes stack (based on height or width) according to fraction pF
on resizeMe wh,pF
  if resizeMe is in the pendingMessages then exit resizeMe
  if not iMove then exit resizeMe
  lock messages; lock screen
  if wh begins with "H" then -- adjust height
    put (L,T,10+L+the mouseH,10+T+pF*the mouseH) into r
  else -- adjust width
    put (L,T,10+L+pF*the mouseV,10+T+the mouseV) into r
  end if
  set rect of this stack to r
  -- cameraControlSet "myCamera", "rect", camerarect()
  set rect of widget "camera" to camerarect() -- a placeholder
  set botRight of me to the botright of this card
  send "resizeMe wh,pF" to me in 32 millisecs
end resizeMe

on mouseDown
  cameraControlSet "myCamera", "visible", "false"
  put true into iMove
  put the left of this stack into L
  put the top of this stack into T
  -- put the width of this stack / the height of this stack into frac
  -- or 4/3 or 16/9 or your custom fraction
  put 16/9 into frac
  resizeMe "W",frac -- or resizeMe "H", frac
end mouseDown

on mouseUp
  put false into iMove
  cameraControlSet "myCamera", "rect", camerarect()
  cameraControlSet "myCamera", "visible", "true"
end mouseUp

on mouseRelease
  mouseUp
end mouseRelease

shiftLock happens

Martin Koob
VIP Livecode Opensource Backer
VIP Livecode Opensource Backer
Posts: 256
Joined: Sun May 27, 2007 8:19 pm

Re: constraining stack's aspect ratio while resizing

Post by Martin Koob » Thu Jun 06, 2019 4:00 pm

Thanks Hermann.

I will try the placeholder. I was thinking of trying to take a snapshot of the rect of the camera display and put it in an image to use as the placeholder. Not sure if that will work. Will see.

Martin

Post Reply

Return to “Getting Started with LiveCode - Experienced Developers”