Today I read a developer comment on the LiveCode mail list about the inability to resize a window that has a custom mask (windowShape) applied. In fact, this has always been possible since the windowShape property was first added to LiveCode. But the end result was rarely usable due to the number of hoops you had to jump through to pull it off: resize a graphic or group of objects that acts the window mask shape, export a snapshot of the graphic or group to an image, and set the the windowShape of the stack to the id of image. That’s a lot of steps to do while dragging, and if the image got larger than say 400 pixels, performance really started to degrade.
Systems have gotten more powerful over the years, and so has LiveCode. You still need to jump through a few hoops to make a resizable masked window, but with introduction of the centerRect property, responsiveness while resizing should now be acceptable. LiveCode has a limitation (bug?) that makes the process harder than it needs to be (more on this later), but the end result should be usable. I posted a “pictureframe” demo stack (built in LiveCode 7) here as an example. To get the stack, execute the following line in your LiveCode message box:
When you load the stack, the first thing to try is dragging the resize control in the bottom right — you should be able to scale the stack to the entire size of your monitor without distortion. Keep in mind that the object acting as the mask for the stack is an image, and when an image gets that large, LiveCode is going to respond slower. But for most “reasonable” dimensions, the window should perform adequately. Note that you can also drag the stack by clicking/dragging anywhere at the top.
By the way, the demo works using a behavior script that lives in a substack, and the behavior is applied to the card of the main stack. The stack doesn’t need to be set up this way, but I like this arrangement since it keeps the card and stack scripts available for the main logic and actions that would be added in a finished stack.
At the bottom left of the window, you’ll see a couple of additional settings have been provided: an option to make the stack rounded, and another to make the stack translucent. The Round Mask option replaces the text (imageData) of the source mask image with a rounded bitmap that is stored in a custom property of the image. The Translucent option sets the blendLevel of the mask to 50, causing everything in the window to be displayed at 50% opacity (or transparency, depending on whether you’re a glass half-full or half-empty type of dude).
Upon seeing the translucent effect, the most often asked question is, how can I get opaque controls in a translucent window? The answer is, you can’t, unless your mask image is specifically built to accommodate them. You need to include 100% opaque regions in your mask image placed precisely where the controls will live, and this can become especially problematic if you have irregularly shaped controls, such as a slider. And these challenges are compounded if your stack resizes, which is the whole point of this demo. So for the moment, we’re stuck with one translucency setting for the entire stack and its contents.
One final comment: I mentioned above that the process of applying the window mask is harder than it should be, and this is because the windowShape property currently doesn’t respect the alphaData of an image that has its centerRect property applied. We SHOULD be able to plunk down an image in a window, apply 4 centerRect integers to the image, and boom, the window should be able to use that image as its mask. Unfortunately, this doesn’t work, so the demo script works by exporting the scaled source image to a separate mask image.
At any rate, you can now go off and create cool framed stacks to impress your developer friends!