DX Tutorial #5: Slip Sliding Away

RomanDA's DX Tutorial Series

Sunday, August 13, 2006 by RomanDA | Discussion: DesktopX Tutorials

RomanDA's DesktopX Tutorials:
My goal is to make a set of tutorials for DesktopX. If you have ideas on what you would like to see, please email me at DXTutorials@RomanDA.org

Slip Sliding Away
After working on the GalCivII Widget Bar [ LINK ], I was using a lot of code that kept the "sliders" locked to the left side of the screen.

I was challenged to make it so they could "slide" to the top or bottom, or even to the other side of the screen.
After spending most of my Saturday afternoon trying to work this out, and its not 100% perfect, there are some issues, I was able to make it work.

The actual code was not really that bad, but it was a little convoluted.

DOWNLOAD THE
TEST WIDGET HERE

STEP 1: Setup DRAG
First lets setup the sub "ON_DRAG" so that we can pull the x/y & cursor positions.
'--- Function to handle the DRAG

Sub Object_OnDrag(x, y, newX, newY)

'--- Store the Currrent X/Y location of the object BEFORE its moved (or NOT MOVED!)
OrigL = object.Left
OrigT = object.Top

'--- Set this to False so that it will move the item's x/y by default
nomove = False

'--- Set the text in the interior object (its only so we can see what is going on,
'--- you would NOT use this in a REAL widget.
'--- This shows the x/y pos and the newx/newy pos so you can watch it change as you drag things
'--- Just for testing
desktopx.Object("Test").Text = "x,y: " & x & "," & y & VBCrLf & "NewX,NewY: " & newX & "," & newY

STEP 2: Determine the Edges of the Screen
It took me a long time to work out the following SIMPLE code.
If this is your normal screen in my case ill use 1600x1200
just to have something to use for reference.
In this case I'm using the width of the Widget and height of the Widget for this "border".

oTop is the Height of the object
oLeft is the Width of the object
oBot is the Height of the screen minus the object height
oRight is the Width of the screen minus the object width

'--- Set the Top/Left/Bot/Right margins for us to be able to tell
oTop = object.Height
oLeft = object.Width
oBot = system.ScreenHeight-(oTop)
oRight = system.ScreenWidth-(oLeft)
STEP 3: Setting the Screen Position
Now that we have the height/width areas designated, we need to setup a "test" to see where the cursor is.

In this case I used TOP/BOT/LEFT/RIGHT, you could re-arrange these to change what supersedes things.
What I mean is if you drag the object near the TOP it would override the LEFT border, as the cursor can only be in 1 "area" at a time.
Im sure there is a way to make this work a little better, but this works for now.

'--- By using these "areas" we set the current POSITION of the object on the screen
If System.CursorY <= oTop Then ScreenPoz = "TOP"
If System.CursorY => oBot Then ScreenPoz = "BOT"
If System.CursorX <= oLeft Then ScreenPoz = "LEFT"
If System.CursorX => oRight Then ScreenPoz = "RIGHT"

'--- We add the Position to the test text string, again just to show what area of the screen your in.
'--- again this is just for testing purposes.
desktopx.Object("Test").Text = desktopx.Object("Test").Text & VBCrLf & ScreenPoz


STEP 4: Dragging things around
We now have our 4 screen "areas"; TOP/LEFT/BOT/RIGHT
We can now use a SELECT CASE in order to handle the 4 states and an "ELSE".

In order to keep the "LOOK" of this widget, we will ROTATE the object to keep the "rail" aimed at the edge of the screen.

'--- Select CASE on the ScreenPosition

Select Case ScreenPoz
'--- LEFT Position process
Case "LEFT"

'--- Set the Rotation for the object to 0 (in this case 0 is left)
object.Rotation = 0

'--- FORCE the LEFT position to 0
'--- this keeps the object's LEFT POSITION LOCKED to 0
Object.Left =0

'--- if the Y (up and down) position is less then 0
'--- it will stop the top at 0
'--- this keeps you from scrolling the object up past the top of the screen.
'--- It sets the noMove to True (stops the script from moving the position)
If newY <= 0 Then
Object.Top = 0
nomove = True
End If

'--- set TEMP to the screen height minus the object height
'--- This sets the MAX Y position to stop you from
'--- moving the object OFF the screen
'--- It also sets the noMove to True
temp = system.ScreenHeight-object.Height
If newY => temp Then
Object.Top = temp
nomove = True
End If

'--- if noMove <> True then go ahead and move the object's top to the newY position.
If nomove = False Then Object.Top = newY


STEP 5/6/7: Things keep dragging on and on.
We now have our 4 screen "areas"; TOP/LEFT/BOT/RIGHT
We can now use a SELECT CASE in order to handle the 4 states and an "ELSE".

In order to keep the "LOOK" of this widget, we will ROTATE the object to keep the "rail" aimed at the edge of the screen.

'--- RIGHT Position process
Case "RIGHT"

'--- Set the Rotation for the object to 180 (in this case 180 is right)
object.Rotation = 180

'--- FORCE the LEFT position to Screenwidth - object.width
'--- this makes the object LOCK to the right side of the screen
Object.Left =system.ScreenWidth-object.Width

'--- Move the inside text to a position to keep it from being
'--- off the edge of the object.
'--- This would also be used to move things you had inside the widget.
desktopx.Object("Test").top = 25
desktopx.Object("Test").left = 22

'--- if the Y (up and down) position is less then 0
'--- it will stop the top at 0
'--- this keeps you from scrolling the object up past the top of the screen.
'--- It sets the noMove to True (stops the script from moving the position)
If newY <= 0 Then
Object.Top = 0
nomove = True
End If

'--- set TEMP to the screen height minus the object height
'--- This sets the MAX Y position to stop you from
'--- moving the object OFF the screen
'--- It also sets the noMove to True
temp = system.ScreenHeight-object.Height
If newY => temp Then
Object.Top = temp
nomove = True
End If

'--- if noMove <> True then go ahead and move the object's top to the newY position.
If nomove = False Then Object.Top = newY

'--- TOP Position process
Case "TOP"

'--- Set the Rotation for the object to 90 (in this case 90 is DOWN)
object.Rotation = 90

'--- FORCE the TOP position to 9 (this could change on your widget)
'--- the 9 is because its being Rotated and its not a perfect square
'--- this makes the object LOCK to the top of the screen
object.top = 9

'--- Move the inside text to a position to keep it from being
'--- off the edge of the object.
'--- This would also be used to move things you had inside the widget.
desktopx.Object("Test").top = 20
desktopx.Object("Test").left = 28

'--- if the X (left/right) position is less then 0
'--- it will stop the left at 0
'--- this keeps you from scrolling the object left past the edge of the screen.
'--- It sets the noMove to True (stops the script from moving the position)
If newX <= 0 Then
Object.Left = 0
nomove = True
End If

'--- set TEMP to the screen width minus the object width
'--- This sets the MAX X position to stop you from
'--- moving the object OFF the screen
'--- It also sets the noMove to True
temp = system.ScreenWidth-object.Width
If newX => temp Then
Object.Left = temp
nomove = True
End If
'--- if noMove <> True then go ahead and move the object's top to the newY position.
If nomove = False Then Object.Left = newX

'--- BOTTOM Position process
Case "BOT"

'--- Set the Rotation for the object to -90 (in this case -90 is UP)
object.Rotation = -90

'--- FORCE the TOP position to the screen height minus the object height minus 9 (this could change on your widget)
'--- the 9 is because its being Rotated and its not a perfect square
'--- this makes the object LOCK to the bottom of the screen
object.top = system.ScreenHeight-object.Height-9

'--- Move the inside text to a position to keep it from being
'--- off the edge of the object.
'--- This would also be used to move things you had inside the widget.
desktopx.Object("Test").top = 20
desktopx.Object("Test").left = 22

'--- if the X (left/right) position is less then 0
'--- it will stop the left at 0
'--- this keeps you from scrolling the object left past the edge of the screen.
'--- It sets the noMove to True (stops the script from moving the position)
If newX <= 0 Then
Object.Left = 0
nomove = True
End If

'--- set TEMP to the screen width minus the object width
'--- This sets the MAX X position to stop you from
'--- moving the object OFF the screen
'--- It also sets the noMove to True
temp = system.ScreenWidth-object.Width
If newX => temp Then
Object.Left = temp
nomove = True
End If
'--- if noMove <> True then go ahead and move the object's top to the newY position.
If nomove = False Then Object.Left = newX

'--- If the cursor is outside of the Top/Left/Bot/Right areas
'--- DON'T MOVE IT!!
'--- This uses the original top/left that we saved at the beginning of the sub.
'--- If you don't use this the object can move all over.
Case Else
object.Left = OrigL
object.Top = OrigT

'--- End the CASE Select
End Select

'--- End the Sub
End Sub

This is just PART of what would be needed to be able to move an entire widget around the screen.

You would also want to setup some sort of code to save the position, also you would want to setup something to store the default top/left/right/bot position.

Also, if you have items inside the widget (IE A CLOCK or a CALENDAR or a WEATHER OBJECT) you would have to have code for every object in there to move it around.

Good Luck, and happy DXing,

Enjoy,
RomanDA
AKA: David A. Roman
http://romanda.wincustomize.com
http://www.romanda.org
DXTutorials@RomanDA.org
5 Reply 19 Referrals
ZubaZ
Reply #1 Sunday, August 13, 2006 8:40 PM
Wow.
Thanks for sharing all of your hard work RomanDA.

Things like this make this community what it is. You and your widgets are an asset.   

SirSmiley
Reply #2 Sunday, August 13, 2006 11:22 PM
Not only are your widgets an asset. These tutorials are excellent and have opened my eyes to uses that never occured to me.


Island Dog
Reply #3 Monday, August 14, 2006 9:37 AM
Great job.

seoanalystindia
Reply #4 Tuesday, August 15, 2006 10:19 AM
Great Work man also check out this article blog

Link


RomanDA
Reply #5 Tuesday, August 15, 2006 10:22 AM
Great Work man also check out this article blog

What was i looking for?

and Thanks!

Please login to comment and/or vote for this skin.

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

  • Richer content, access to many features that are disabled for guests like commenting on the forums and downloading skins.
  • Access to a great community, with a massive database of many, many areas of interest.
  • Access to contests & subscription offers like exclusive emails.
  • It's simple, and FREE!
Login

Home | About | Privacy | Upload Guidelines | Terms of Service | Help
Copyright © Stardock Corporation. All Rights Reserved.


web-wc01