3D Color Picker
I got a lot of work done today on my particle lab in SecondLife. I’m working on a portion of it that allows me to change the color of each particle. To make things more visual, I created some objects to allow the end-user to adjust the color with HSB. (Hue, Saturation, Brightness). I personally feel that this is an easier way for non-technical people to choose a color, because they don’t have to remember how light is mixed to get colors by adjusting RGB (Red, Green, Blue) values.
I have a ring representing 360 degrees of hue that will rotate when you press arrows in the direction to move. The Saturation and Brightness are represented as a gradient in the center. When the hue is changed, the gradient changes to reflect that hue. Saturation is changed by pressing the left or right arrows to the side of the gradient. Brightness is changed by pressing the arrows above and below the gradient. I have a small ring to let the end-user see what the end color will look like.
Second Life only understands RGB values. This would have taken a long time for me to do the conversion between HSB and RGB values, but I had done something similar in the the past in JavaScript. I Simply changed the code from JavaScript to LSL (Linden Scripting Language).
The colors appear to be accurate so far. I need to add some more functionality as it is still a work in progress. There are transparency effects that I need to put in. I also need to get it synchronized with the particle emitter that my Particle Lab communicates with.
August 12th, 2006 at 1:41 am
I absolutely LOVE your color picker! It’s the best one I’ve ever found.
The last few releases of Firefox have caused some weirdness in it, though. When you move your mouse over the vertical HSB slider the value changes without having to click.
Any chance of an update?
Thanks,
Brian
August 12th, 2006 at 2:50 am
OK, it’s probably a hack, but I managed to fix the Firefox problem.
In NS7.1/ColorPicker.js make the following changes:
Add this at the top:
var heldDown = 0;
// Then down below change these
function pnlVertical_Top_MouseMove(e)
{
// if(e.which != 1) return; // Commented out
if(heldDown != 1) return; // Added
SetVerticalPosition(e, e.pageY - 5);
e.cancelBubble = true;
}
function pnlVertical_Top_MouseDown(e)
{
heldDown = 1; // Added
SetVerticalPosition(e, e.pageY - 5);
e.cancelBubble = true;
}
function pnlVertical_Top_MouseUp(e)
{
heldDown = 0; // Added
SetVerticalPosition(e, e.pageY - 5);
e.cancelBubble = true;
}
Thanks,
Brian