HOWTO |make and drag custom windows
1
Going further
This windowShape trick is cool, but since you’ve trimmed off the regular window title bar, there’s no way to drag this around your screen. You need to write some instructions that watch for the mouse being moved (a mouseMove event) while the mouse button is down, and move the window with it under script control. We use: clickLoc , which is the horizontal and vertical location of the click relative to its window; screenMouseLoc , which is the pixel location of the mouse relative to the left and top of the screen; and the mouseDown, mouseUp and mouseMove events .
2
Global variables
First, when the mouse is clicked, we make a note of the clickLoc: the distances in pixels from the left and top edges of the window. We do this in a variable, as in previous tutorials, but with a difference. Normally a variable only exists while the handler (the on/end script) runs. Once finished, the variable and any data it holds is forgotten. To keep track of it for later use, you must set up the variable beforehand. The simplest way is to declare it as a ‘global’ variable before using them in a line at the start, separate from the rest of your scripts. To help show that a variable is global we normally start the name with the letter g, so here the line is global gLeft, gTop .
3
mouseDown and mouseUp
Now we use a mouseDown handler – triggered when the mouse is clicked down – and put the two items of data (distance from left, distance from top) into the two different global variables. If you clicked at 100 pixels from the left and 35 pixels in from the top of the window, the clickLoc would contain ‘100,35’. The comma separates one ‘item’ of data from the next; in LiveCode terms it is the ‘item delimiter’, so we can use it to pick out items from combined bits of data. on mouseDown put item 1 of the clickLoc into gLeft put item 2 of the clickLoc into gTop end mouseDown Those are used later in the mouseMove handler as part of some calculations. In the mouseUp handler, add a line that says put empty into gLeft . Use this in the next part as one simple way of checking whether or not the mouse is down while it’s being moved.
4
Dragging
For the script that deals with dragging the window around, we do this in a mouseMove handler, which runs repeatedly whenever the mouse is moved. In it, we first check to see if the gLeft variable is not empty, meaning the mouse is down. (Because when the mouse is up that variable is emptied, remember?) Then we put the two items of data from the screenMouseLoc into two ordinary variables – no need to worry about making these persistent. Finally, we set the left edge of the stack to a specific pixel location: the distance of the mouse from the screen edge, minus the distance of the mouse from the window edge. That stops the window jumping sideways to put the edge where we clicked. And of course, we do the same with the top of the stack. on mouseMove if gLeft is not empty then put item 1 of the screenMouseLoc into screenLeft put item 2 of the screenMouseLoc into screenTop set the left of this stack to screenLeft - gLeft set the top of this stack to screenTop - gTop end if
5
Testing
Apply your changes in the Code Editor window, switch to the Run tool and drag the window around. Each time you release the mouse a random image is downloaded and used for the windowShape. This isn’t perfect, but fine-tuning scripts is the essential guts of LiveCode. Have fun!