Custom windows in LiveCode
Ditch rectangles and design LiveCode windows to any shape for your app
LiveCode is an easy software-creation tool that can create apps to do, well, practically anything. In this part of our on-going series, we explore making a window into randomly selected custom shapes – no more boring rectangles for us! – and moving it around the screen at will. Begin by choosing File > New Mainstack to create a new LiveCode project to work with.
To start, let’s look at creating the custom window shape. This is controlled, logically enough, by a LiveCode property called ‘windowShape’. Traditional windows (or stacks) have a windowShape setting of 0, which means it follows the normal operating systemcontrolled appearance. But if you have an image in your stack that has some kind of transparency mask, you can set the windowShape to the ID number of that image. The result: it’s clipped to the visible parts of the image, whatever that might be. If the image mask is 1-bit then the window has a sharp cut-out edge. If the mask is an 8-bit ‘alpha channel’ one – something you might make as a Photoshop layer mask before exporting as a 24-bit PNG, for example – the window and its contents take on the transparency of the graphic.
The image we’ll use as our test is going to be sourced directly from an online location: thehelpful.com/ livecode/windowshape/1.png, although you can use any other. First, drag an image object from the Tools palette onto your card and then use the Inspector palette to name this ‘logo’. Next, open the Message Box (click its icon in the main toolbar), type the following single line: put URL "http://thehelpful.com/livecode/ windowshape/1.png" into image "logo" and hit the Return key to run it . This gets the image from the online location and stores it in that image object.
Select the image object and look in the Inspector palette to find its ID number, which is 1006, in our case. In
Use any transparent PNG to control the transparency and shape of your window
the Message Box type set the windowShape of this stack to 1006 (or whatever ID number you got) and hit Return, and the window is cut out using the transparent area of the imported image.
You’ll probably spot an immediate quirk, though: the window cutout effect happens from the top-left corner of the window, as if that’s where the image is, even if it isn’t. If you want the image to appear properly cut out you need to move it so its ‘topLeft’ corner is positioned at 0 pixels from the left and from the top edges.
Let’s add a script to this entire card so that when you click anywhere it runs. Choose Object > Card Script, and type on mouseUp . When you hit Return, the matching end mouseUp is added, so type the following lines between them: get the random of 10 put "http://thehelpful.com/ livecode/windowshape/" & it & ".png" into theImage
put URL theImage into image "logo"
set the topLeft of image "logo" to "0,0"
set the windowShape of this stack to 1006
This first picks a random number from one to 10, then uses it to build the URL to the (randomly) chosen image, puts the referenced PNG graphic into the image object, and moves it so its topleft (or ‘topLeft’ in LiveCode) corner is snug into the corner of the window. Finally, it sets the windowShape of the stack to the visible parts of the image, whichever random one happened to be grabbed this time. Not the behaviour someone is likely to expect, which makes this fun for confusing friends and colleagues! Keith Martin