How to make a stack with a window shape
This lesson will show you how to create a stack with a window shape. All you will need for this is a png image with transparent sections. In this case I am going to use a large application icon to create a great looking little desktop widget.
Start by creating a stack and importing your png image
Start by downloading the image for this lesson, which you can do here:
1) Create a new stack by going to 'File' and then 'New Stack - Default size'
2) Again go to 'File'
3) Choose Import As Control
4) Image FIle...
5) choose the file you downloaded.
This will bring up an image chooser dialog allowing you to browse to your file. 'Import As Control' does exactly what it says, it create a new control on your stack with the data of your image in it.
You should have something like this
Set the windowShape property
Using the message box, type and execute the following line of code:
set the windowShape of the mousestack to the ID of image 1
Move your mouse over the stack you are working with, and press Enter. "The mousestack" returns the stack that your mouse is currently hovering over and is a great command to use when working with the message box.
Note: Be careful not to click enter while the mouse is still over the message box. If you do this, your message box will be the mousestack, and the result will be not what you were expecting. Should this happen to you, create a new stack, add a button, and put this code in the button script:
on mouseUp set the windowShape of stack "message box" to empty end mouseUp
If you've now successfully set your windowshape, you will notice that the result doesn't quite look right. That is because the window shape is applied from the top left of the stack. The image the window shape is based on needs to be moved to line up with the new window shape. Run these two lines of code in your message box:
set the left of image 1 of this stack to 0 set the top of image 1 of this stack to 0
1) Click on the 'message box' icon on the menu bar to launch the message box
2) Enter your code into the input box on the message box and hit return to execute
Remove the Shadow
You'll notice that your window also still has an outline. To remove that, open the Stack Inspector from the Object menu (1), and uncheck "shadow" (2).
Add script to move your new stack
A window shape removes all window controls from your stack. You are presented with a key problem: How do I move my stack now that the title bar is gone? Select your window, then click on the Code editor icon in the toolbar.
Copy and paste this script into the code editor:
local sgDragging, sgLeftOffset, sgTopOffset on mouseDown put item 1 of the mouseLoc into sgLeftOffset put item 2 of the mouseLoc into sgTopOffset put true into sgDragging end mouseDown on mouseMove lock screen if sgDragging is true then set the left of this stack to item 1 of globalloc(the mouseLoc) - sgLeftOffset set the top of this stack to item 2 of globalloc(the mouseLoc) - sgTopOffset end if unlock screen end mouseMove on mouseRelease put false into sgDragging end mouseRelease on mouseUp put false into sgDragging end mouseUp
Click Apply. Now switch to run mode, and you should be able to drag your window around the screen using your mouse.
I don't seem to have an image file that contains the image shown in this demo. I have looked in the Rev file and can not locate any such file. Can you please advise where I might look.
I have attached an example image file to the lesson.
I hope that helps.
Yeah.... you might warn the newbie to not have his mouse cursor over the message box when you press Enter on that first command string: set the windowShape of the mousestack to the ID of image 1
It's a little disconcerting.
However, one then discovers the windowShape property explained in the dictionary. :)
I had to close LiveCode and restart it. No worries.
yes you can get unexpected result if the mouse cursor is not exactly over the stack you are trying to change.
Thanks for posting this.
Thanks for this. This is great stuff!
when I run the move script my window shoots off somewhere and I can't get it back. Any ideas why this is happening?
that is an interesting one. I can only assume there is a bug in your code.
I would suggest putting some logging information into your mouseMove handler, rather than letting it move your application. Maybe you can make some sense of the information that is coming in there first. The application should follow the move of the mouse and not have a mind of its own.
Why can't I use this simpler code?
set the loc of this stack to globalloc(the mouseLoc)
You could use that code, and it would work, but the movement of stack will appear jerkier and does not keep up with with the position of the mouse as well. The mouseStillDown messages is sent periodically so, usually, it is easier and more efficient to use the mouseMove message to track the movement of the mouse while the mouse button is being held down.
I hope that helps.