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 creating a stack and importing your png image

Start by downloading the image for this lesson, which you can do here:

https://tinyurl.com/ycxlf3lv

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

You should have something like this

Set the windowShape property

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

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.

The final result

The final result

9 Comments

Bill C

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.

Elanor Buchanan

Hi Bill

I have attached an example image file to the lesson.

I hope that helps.

Elanor

Kevin

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.

Hanson Schmidt-Cornelius

Hi Kevin,

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.

Kind Regards,

Hanson

John

Thanks for this. This is great stuff!

jasper500

when I run the move script my window shoots off somewhere and I can't get it back. Any ideas why this is happening?

Hanson Schmidt-Cornelius

Hi Jasper,

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.

Kind Regards,

Hanson

Max

Why can't I use this simpler code?
on mouseStillDown
set the loc of this stack to globalloc(the mouseLoc)
end mouseStillDown

Elanor Buchanan

Hi Max

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.

Kind regards

Elanor

Add your comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.