Buddy Colourwheel

Introduction

For a project I am working on, I needed a colourwheel. I looked around and found some on the web, including Colortriangle (Using Canvas) and this colorwheel. Since those guys coud not spell colour and I was in a SVG mood I decided to build my own.

It is pretty basic, but it works with some recent browser. Old browser need not apply. If you can see it at the top of this page, your browser is OK. There are no dependencies.

It is working on recent versions of Chrome and Firefox. On IE and Safari, the triangular colour gradient shows up black, but,for the rest it works

Usage

Usage is pretty straighforward:

colourwheel(elt, size, prefix)

To create a colourwheel.

• elt: the parent DOM element,
• size: the size of the colourwheel. Only one dimension is needed since we use a square.
• prefix: a string. By using a different prefix you can have more than one colourwheel. It is optional and default to bu- when not set

set_colour(colour)

To set the colour of the colourwheel. the colour argumentis an array with 3 values

• hue; 0-360
• saturation: 0-100
• value: 0-100

in that order.

get_colour()

Get the current colour. Returns an array [hue,saturation.value]

val()

Same as get_colour()

get_hsl_colour()

Get the current colour as an array with 3 values

• hue; 0-360
• saturation: 0-100
• lightness: 0-100

in that order.

onchange()

Register a callback function. The parameter to that callback function is an array [hue,saturation,value]

Notes

Currently, the way the triangular gradient is built is probably not the best way. We create 100 small rectangles and apply to each of them a different linear gradient from black to colour to white. We then apply a triangular clip path. I am new to this SVG thing, any better way to create that gradient?

The lightbulb icon was lifted from Font Awesome and modified to be able to fill it.