Hue Slider Script
Just something I picked up
Friday, September 15, 2006 by sViz | Discussion: DesktopX
The scripts are based on the DesktopX Developer’s Guide tutorial for "Scrolling Content". I’ve made some moderations.
First we want to create 3 objects.
1. test_object- this is the object of which we will be changing the hue
2. slider_bar- self-explanitory, I think.
3. slider_button- where we will be putting the script
Now, we need to make the slider_bar object… well ….a bar! So use a solid colored image and set that as the object’s image.
Next, we need to make the slider_bar object a rectangle. Not just any rectangle, because the width is very important. Set the object’s height to 30 and the width to 260.
Now, we make the slider_button. It’s no biggy what you use as an image; I’m cheap so I’m using the default image.
The slider_button object needs to be at maximum the same height as the slider_bar (30) and it needs to be 5 pixels in width.
Set the slider_button parent to the slider_bar, (I bet you already knew that), and set top position and left position to 0.
Look out! I’m about to throw a script at ya’!
Dim left_pos
Dim right_pos
Sub Object_OnScriptEnter
left_pos=0
right_pos=255
desktopx.object("test_object").hue= object.Left
End Sub
Sub Object_OnDrag(mousex,mousey,newposx,newposy)
Object.top = Object.top
If newposx (<) left_pos Then Object.left=left_pos '--Take out the parenthesis from the less than sign
If newposx>right_pos Then Object.left=right_pos
desktopx.object("test_object").hue= object.Left
End Sub
Put that script into your slider_button object and you’re good to go.
Now you can go have fun with your hue slider!
BUT WAIT THERE’S MORE!
If you’re like me and don’t have room for a 260 wide object. You’ll want your slider a little smaller. A little division and multiplication can solve this.
First, to get the new length of the slider_bar I divide the total hue shift by 3 and then add the width of the slider_button.
255/3 = 85 + 5 =90
Our new slider_bar width is 90
Now we insert this newly adjusted script…..
Dim left_pos
Dim right_pos
Sub Object_OnScriptEnter
left_pos=0
right_pos=85
desktopx.object("test_object").hue= object.Left*3
End Sub
Sub Object_OnDrag(mousex,mousey,newposx,newposy)
Object.top = Object.top
If newposx (<) left_pos Then Object.left=left_pos '--Take out the parenthesis from the less than sign
If newposx>right_pos Then Object.left=right_pos
desktopx.object("test_object").hue= object.Left*3
End Sub
You’ll notice that the right_pos has changed and we multiply object.left times 3 to get the correct hue shift amount.
HOLD ON WE’RE NOT DONE YET!!
You can make this slider even smaller. Again you can divide the total hue shift down so long as the sum is a whole number (i.e. no decimal numbers).
Dividing 255 by 5 will get you a slider_bar 51 in width. All you have to do is add the width of the slider_button to the width of the slider_bar, adjust the right_pos, and multiply object.left by 5.
That’s it! Thanks for reading. Let me know what you think.
***For some reason the post would not accept the 'less than' sign so I put them in parenthesis. Make sure you remove the parenthesis form the less than sign when you insert the script.***
First we want to create 3 objects.
1. test_object- this is the object of which we will be changing the hue
2. slider_bar- self-explanitory, I think.
3. slider_button- where we will be putting the script
Now, we need to make the slider_bar object… well ….a bar! So use a solid colored image and set that as the object’s image.
Next, we need to make the slider_bar object a rectangle. Not just any rectangle, because the width is very important. Set the object’s height to 30 and the width to 260.
Now, we make the slider_button. It’s no biggy what you use as an image; I’m cheap so I’m using the default image.
The slider_button object needs to be at maximum the same height as the slider_bar (30) and it needs to be 5 pixels in width.
Set the slider_button parent to the slider_bar, (I bet you already knew that), and set top position and left position to 0.
Look out! I’m about to throw a script at ya’!
Dim left_pos
Dim right_pos
Sub Object_OnScriptEnter
left_pos=0
right_pos=255
desktopx.object("test_object").hue= object.Left
End Sub
Sub Object_OnDrag(mousex,mousey,newposx,newposy)
Object.top = Object.top
If newposx (<) left_pos Then Object.left=left_pos '--Take out the parenthesis from the less than sign
If newposx>right_pos Then Object.left=right_pos
desktopx.object("test_object").hue= object.Left
End Sub
Put that script into your slider_button object and you’re good to go.
Now you can go have fun with your hue slider!
BUT WAIT THERE’S MORE!
If you’re like me and don’t have room for a 260 wide object. You’ll want your slider a little smaller. A little division and multiplication can solve this.
First, to get the new length of the slider_bar I divide the total hue shift by 3 and then add the width of the slider_button.
255/3 = 85 + 5 =90
Our new slider_bar width is 90
Now we insert this newly adjusted script…..
Dim left_pos
Dim right_pos
Sub Object_OnScriptEnter
left_pos=0
right_pos=85
desktopx.object("test_object").hue= object.Left*3
End Sub
Sub Object_OnDrag(mousex,mousey,newposx,newposy)
Object.top = Object.top
If newposx (<) left_pos Then Object.left=left_pos '--Take out the parenthesis from the less than sign
If newposx>right_pos Then Object.left=right_pos
desktopx.object("test_object").hue= object.Left*3
End Sub
You’ll notice that the right_pos has changed and we multiply object.left times 3 to get the correct hue shift amount.
HOLD ON WE’RE NOT DONE YET!!
You can make this slider even smaller. Again you can divide the total hue shift down so long as the sum is a whole number (i.e. no decimal numbers).
Dividing 255 by 5 will get you a slider_bar 51 in width. All you have to do is add the width of the slider_button to the width of the slider_bar, adjust the right_pos, and multiply object.left by 5.
That’s it! Thanks for reading. Let me know what you think.
***For some reason the post would not accept the 'less than' sign so I put them in parenthesis. Make sure you remove the parenthesis form the less than sign when you insert the script.***
rabidrobot
Reply #2 Friday, September 15, 2006 6:28 PM
Reply #2 Friday, September 15, 2006 6:28 PM
Great tutorial, and thanks for sharing. I was contemplating putting something together about sliders myself, but you covered most of the important stuff, and with pictures no less!
I would like to share a more generalized script, though. Which I also refined and pieced together from the documentiation and samples! This script has an advantage in being able to return negative numbers as output values, and I think keeps the math as simple as possible. So, here goes, hope it is OK:
Option Explicit
' Brightness Slider Sample
Dim originx, lower, upper, span, range
' originX is the lowest x (leftmost) value, it will be relative to DX-object set as containing parent
' originX can be non-zero to align the slider gfx as you wish
originX = 0
lower = -255 ' Min value - the lowest usable result from slider
upper = 255 ' Max value - the highest usable result from slider
' Span is how far the slider can move in pixels. If the slider
' cannot move as many pixels as there are values
' not all values will be available from slider (eg only even values or odd here)
span = 255
' Range is used in calculations. It is the range of acceptable results
range = upper-lower
Sub Object_OnScriptEnter
' The OrientSlider Sub will position the slider
' to reflect and represent the current value
Call OrientSlider()
End Sub
Sub Object_OnDrag(x1, y1, x2, y2)
Dim tempValue, percent, valueScaled
' Negate Vertical movement
Object.Top = Object.Top
' If dragged past Left, set at Left
If x2 < originX Then Object.Left = originX
' If dragged past Right, set at Right
If x2 > originX + span Then Object.Left = originX + span
' find out how many pixels from origin the slider has been moved
tempValue = Object.Left - originX
' and express as a percentage of total allowed movement
percent = tempValue / span
' Find the same percentage of the range of accepted results
' then add the lowest acceptable result for final number
valueScaled = CInt(percent * range + lower)
Call SetValues(valueScaled)
End Sub
Sub SetValues(newValue)
DesktopX.Object("SampleTextObject").Text = newValue
DesktopX.Object("SampleTextObject").Brightness = newValue
End Sub
' This sub places the slider in position to represent a value
Public Sub OrientSlider()
Dim curVal, xScaled
' Find out current value to represent
curVal = DesktopX.Object("SampleTextObject").Brightness
' Translate that into number of pixels from origin
xScaled = CInt(span*(curVal-lower)/(upper-lower))
Object.Left = originX + xScaled
End Sub
' Called when the script is terminated
Sub Object_OnScriptExit
End Sub
I have found this to be a very useful script in various incarnations. Sliders can be very handy. I imagine, but have never experiemented, that interesting things could be done if instead of simply negating vertical movement, the vertical position was defined as a funcction of x. Sliders could move in a sine path, or possibly even in a circular, knob like fashion.
sViz
Reply #3 Friday, September 15, 2006 7:37 PM
Reply #3 Friday, September 15, 2006 7:37 PM
Thanks for the comment SirS. I finally decided to try making some simple tutorials for a while. Just to share anything useful I learn.
Very impressive script, rabidrobot. Also very well commented. Very cool that I only have to change the span variable when dealing with different sized slider bars. Works great!
Very impressive script, rabidrobot. Also very well commented. Very cool that I only have to change the span variable when dealing with different sized slider bars. Works great!
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!
Reply #1 Friday, September 15, 2006 3:22 PM