Donovan H main header graphic Art, Graphics, Development, and other things creative... Art, Graphics, Development, and other things creative...
left menu top

Catagories

#Actionscript #Art #Blender3D #Charity #Cooking #Design #Flash #Free! #Games #IT #Java #Javascript #Life #Music #PHP #Programming #Video #Web #Work

Posts

CSS/JS 3D Cube

FeedMeComics Beta Launch

Shadowrun: The Anarchy Wars

J-B Weld a Bicycle Peddle to the Crank Arm

Introducing PolySure

Cyber Monkey 3D

Famous Artists in Modern America: Raphael

Arts Shows and Photography

Controling the Google Map Iframe

The Dark Lord Rises

Custom Form Check Boxes - JavaScript Class

HTML Color Selector Class

Styling Snipt Code Embeds

Simple Accordion JavaScript Class

I Stand with Rand

Glen Bradley for NCGOP Vice-Chair

CSS 3 @(at) Rules and Font Embeding

Happy New Year, New Site!

Making a Simple House with Blender 3D

Happy, Mic Check 121212

Making Mountains with Blender 3D

Bash ~ indexOf

Ana's Corner

ConstitutinalWar.org

Midwife Advocates Website

My Own City - Part 2

Virtual Box VS. VMware

My Own City (In Blender 3D)

The Return of DonvanH!

Geishas and Watercolor

More Vector Cartoon People

Basics of Graphic Optimization for Flash

Veterans for Ron Paul 2012

Dynamic Draggable Divs

AK Donovan Sole Brutha ~ Time Lapse

Disengaged Reality ~ Time Lapse

HTML5 Canvas Drawing

AnimatedImg - Javascript Class

CyberMonkeyDev.com Up

Charlotte, Photography, and Penguins

North Carolina CPM Rally

DJ The Sypher @ Heaven and Hell

Making a World... Map

TDI Site Complete

AS3 vs HTML5 Drawing

Poked in the Face ~ Time Lapse

WeAreChangeDC.org BETA up!

Jordan

Grendel Babies

SamMenkmeller.com is GO

Prince of the Pavement

Speed cooking for 100

AS3 to Clipboard to JAVA communication

Lighten Up ~ Time Lapse

AmbieMac.com is Up

Revisiting Design

Howl's Moving Castle

End the Fed 2009

Chicago!

Timer Tools AS3

Free Wallpapers!

Flash to PHP communication

Dynamic Timer Event Handling

JavaScript XML node array

XML to JavaScript structure return

Appalachian Trail

AS3 XML class [dXML]

Let Oklahoma Vote

MurderOne Shirt App

Stelor Games

Universal Click Handler

R,G,B, to HEX and back

Snipt.net

Kirupa Art Contest, 2nd!

AS3 Preloader Class

Purple Cauliflower

Paul is FREE!!!

Wallpaper tutorial

My First C++ App

Vigilant Logos

Free Paul Jacob

XML picture displayer

Flash Web Site Template

Afterdeployment.org

Easy Effects AS3

Election Judge

Attack of the Frownies

Gootropolis On-line World

Ohio Valley Recovery Inc.

Symphony City

Challenger Learning Center Site

CLC, E-Missions Site



Click to show the previous background image. Click to show the next background image.
blog title



HTML Color Selector Class

6/17/13


The other day I was playing around with my old canvas drawing class and thought to myself, I really could add more colors to this thing. Quickly using some loops to generate a number of color tabs I realized with only a little more effort I could make a full-on color selector class. So I did.

The algorithm isn't perfect but it does contain an extensive array of colors. You can pass two parameters to the class when instantiating. The fist (threshold) determines how many steps in color value the color selector will take between drawing color tiles. For example a threshold of 8, getting lighter, would build color tiles like so ((239,156,16), (247,164,24), (255,172,32)). The second parameter sets the square pixel size of the color tiles. If you don't set these they default to 8 and 2 respectively.

Here is an example of using this class...

... and this is how it's built on this very page.

In the second code snippet you see I'm doing a couple of things with the class before I call the init method. There are a number of public methods and event listeners you can use to interface with the CMDColorSelector.

	
	PUBLIC METHODS
		* init : build the color selector to the document/parent
		* select_color : returns the last color clicked on by user
		* active_color : returns the value of the color the mouse last hovered over
		* threshold : returns the threshold step value. threshold must be set on instantiation
		* tab_size : retuns the sqare pixel size of the color tabs. tab_size must be set on instantiation
		* inititalized : boolean, true if init() has been called
		* parent : allows you to set the parent element the CMDColorSelector will be built on.
			also can be used to get the current parent if no parameter is passed in.
			you cannot set the parent if initialized is true
		* RGBtoHEX : converst an rgb(0,0,0) based string to a hexidecimal based string
		* setEvent : allows for stored functions to be called during certain class events. 
			The first param is the event type and the second is the function to be called (see EVENTS)

	EVENTS
		* onInit : executes at the end of the init() method
		* onUpdateSC : executes whenever the selected_color value changes
		* onUpdateAC : executes whenever the active_color value changes

	

Along the way I leaned two interesting things. First, IE (save for v8) has no support for the standard getter and setter methods that other browsers use, and the amount of code it takes to fix that issue just does not seem worth the effort and processing power. Second, in most versions of IE and Safari, mouse event bubbling (or registering) might not happen properly for child elements when their parent has a CSS display value of "block". To get around the second issue I set the parent elements CSS pointer-events value to none, while setting all of the clickable child elements pointer-events value to all.

In the (hopefully near) future I will be adding this color selector to the canvas drawing class. Who knows, with a couple more features I could have an on-line version of MS-Paint!

DOWNLOAD THE EXAMPLE PACKAGE