mooRainbow

News:

  • [2008-08-27] mooRainbow 1.2b2 is out and works with MooTools 1.2, thanks to all who emailed me about this, and sorry for the late update. There are also other minor fixes with this version, as soon as possible I'll rewrite mooRainbow for using the real power of MooTools 1.2.
  • [2008-02-11] Fixed a bug in mooRainbow 1.2b1 where Safari3 started with shown windows.
  • [2008-01-08] I've received a lot of mails asking for a mooRainbow version compatible with MooTools 1.2b1. I've replied to all of them that I wanted to wait for mootools 1.2 release (we're testing, patching and enhanching a lot, be patient :), since I've received a mail, from Wells Wang, attaching his try of conversion and asking for help. I really appreciated his contribution, so I finally find out the time to convert it to MooTools 1.2b1. Here the mooRainbow 1.2b1.
    Thanks Wells.
  • [2007-11-30] Fixed demo3's .moor-BrightLabel class (thanks Avram)
  • [2007-11-09] Fixed a bug in manualSet
  • [2007-11-09] Removed the compression version
  • [2007-09-30] switched to another hoster
  • [2007-09-30] updated to mootools 1.11
  • [2007-05-08] mootools 1.1 has been released and.. surprise, surprise.. mooRainbow is fully compatible :)
  • [2007-05-08] updated mootools required dependencies
  • [2007-05-08] updated SVN credits (sorry CrazyDave) and version from 1.0 to 1.1
  •  
  • [2007-04-28] Updated demo2 for Safari users (tnx digitarald)
  • [2007-04-28] Repacked both compressed and uncompressed zip (i'm really sorry, tnx nagaozen)
  • [2007-04-28] mooRainbow 1.1 - minor fixes
  •  
  • [2007-04-11] Everything should be ok, let me know any kind of problem.
  • [2007-04-11] Added 'manualSet' method. See docs section, Additional Notes.
  • [2007-04-11] Moved from opensvn.org to googlecode. See about section.
  • [2007-04-11] Added 'blank.gif' that was missing in zip packs.
  • [2007-04-11] Fixed IE6 issues (really thanks to crazydave :). You're all invited to redownload mooRainbow.
  •  
  • [2007-04-09] Fixed both .zip in download section, sorry i didn't notice that (thanks for alert me via email)
  • Added revision version and date in download section, so you can track when there're changes
  • Fixed an issue where moving the element or resizing the browser didn't update mooRainbow position. Now there's method 'rePosition' (thanks crazydave)
  • Fixed an issue where overlay cursor was not positioned in its right starting color position.
  • Cleaned up some comments/useless code.
  • Tomocchino submitted to me a better example of demo3. Thanks :)

 

Overview

Welcome to mooRainbow breathing site.

Ok, you won. No more breathing site :(

 

mooRainbow is a powerful Javascript color picker that allows you to visually choose and use colors as a real and useful application.

What at first I wanted to have was of course a color picker, but I wanted it to be rapid, optimized, clear and powerful: so here we are.

 

mooRainbow is still in development, what i'm searching for is to have a widget as powerful as tiny.

Description

[screen shot]First of all mooRainbow is made with mootools Javascript Framework.

 

mooRainbow can be attached to any element in the DOM. A click event would automatically be attached to that element and simply clicking on it you will be able to show or hide mooRainbow.

It provides to you 2 fired events: onChange and onComplete, so you can easily manage what to do when picking up a color (ie: onChange -> when choosing a color, change my body background with that. onComplete -> when I'm done, change every tag <p> in the whole page with the selected color).

 

What I want you to know about mooRainbow is that:

 

  • mooRainbow is fully customizable via CSS file.
  • mooRainbow keeps clean your DOM and generates valid XHTML and CSS
  • mooRainbow provides you, as return, an object containing RGB, HSB and HEX of choosen color.
  • mooRainbow is really rapid thanks to mootools.
  • mooRainbow fully works on Firefox (and friends)/Safari/Opera/IE

Documentation

class MooRainbow

Arguments

element the element you want to attach MooRainbow

options an object. see options below

Options

id the #id you want MooRainbow has (default: 'mooRainbow')

Note: every object must have an unique id.

prefixthe prefix for your CSS classnames (default: 'moor-')

i.e.: prefix: 'moor-' => in your CSS: .moor-okButton { color: #fff; }

imgPaththe path where the slider and the overlay images are contained (default: 'images/')

Note: always put the '/' at the end.

startColoran array. the color you want MooRainbow starts with (default: [255, 0, 0] *red*)

Note: it must be an RGB color given as array [RED, GREEN, BLUE]

wheelif you want to enable the wheel for slider/inputs and up|down keys (default: false)

onChangea function to fire when the color change

onCompletea function to fire when you are done

Additional Notes

All Inputs can be mousewheeled (or 'UP' and 'DOWN' keys) and allow you to manually change the values (mousewheel does not work on hex inputbox)

Layoutcould be tricky hidden by pressing 'ESC' or by clicking outside of it.

manualSetis a method that allow to automatically change a color by "command line" (ex. myRainbow.manualSet([255, 0, 0]) , and it will sets your mooRainbow to red). It takes two arguments: color and type.

- color: could be RGB or HSB as arrays, (ex: [255, 0, 0] for rgb or [0, 100, 100] for hsb) and HEX as string (ex: '#ff0000').

- type: is a string that specify what type of color you've passed. It could be 'rgb', 'hsb' or 'hex', by default it's 'rgb'.

How to

First you need to download mooRainbow (below there's the link).

Inside the pack you will find 2 files and "images" directory containing 5 files. Let's explain:

  • mooRainbow.js, is the class MooRainbow and must be included in your page.
  • mooRainbow.css, is default stylesheet containing all the possible classnames you can style. You can also leave this file and include all the classes in any of your already_included ".css", it's included just for explaining how the whole thing works.
  • images/, this directory contains 5 images, where 3 have to exist without changing their name (moor_boverlay.png, moor_woverlay.png, moor_slider.png) the other 2 are there because of the CSS. Keep in mind that images/ is what our option imgPath (see Documentation above) is referring to.
    • moor_boverlay.png, is the black overlay *must exist with this exactly name*
    • moor_woverlay.png, is the white overlay *must exist with this exactly name*
    • moor_slider.png, is the slider color *must exist with this exactly name*
    • moor_cursor.gif, is the overlay cursor (could be setted up from CSS, see mooRainbow.css)
    • moor_arrows.gif, is the slider knob (could be setted up from CSS, see mooRainbow.css)

 

Now we know how mooRainbow is organized. Next step is how to include it in our page.

Ok, as said in Description section, mootools is required (>= v1.11), so if you already don't have it, you can download it from Download section, or go directly to mootools website, these are the dependencies required by mooRainbow:

  • Core: Moo, Utility, Common
  • Native: Array, String, Function, Element, Event, Dom
  • Element: Element.Dimensions, Element.Events
  • Window: Window.DomReady
  • Drag: Drag.Base
  • Plugins: Color

 

Now we have everything we need, we need to include these two js into the <head> tag:

<script src="mootools.js" type="text/javascript"></script>
<script src="mooRainbow.js" type="text/javascript"></script>

Be sure and doublesure about the order. First mootools.js, then mooRainbow.js.

 

Now we need to create a new MooRainbow object. So, stay into the <head> tag and after the above part insert:

window.addEvent('domready', function() {
	var r = new MooRainbow('myRainbow', {
		'startColor': [58, 142, 246],
	});
});

I wont explain in details how to use mootools, you better go reading docs for this, i will just say that the first line simply add an Event to window when DOM is ready. So, when dom is ready we create our new MooRainbow Object calling it with new MooRainbow. The 'myRainbow' string is the element we're going to attach the picker to, 'myRainbow' is its id. So let's imagine this scenario:

<label>
	<img id="myRainbow" src="imgs/rainbow.png" alt="[r]" width="16" height="16" />
	<input id="myInput" name="myInput" type="text" size="13" />
</label>

This is what we have as result:

 

So you see there are an image with 'myRainbow' as id and an inputbox with 'myInput' as id. Reminding what we've done in the previous part of code, you can see we have attached mooRainbow to element 'myRainbow', our rainbow img. So clicking on rainbow image we have our mooRainbow!

 

Now, how would we make our input, next to the rainbow icon, showing us hex code of color we are chosing?

window.addEvent('domready', function() {
	var r = new MooRainbow('myRainbow', {
		'startColor': [58, 142, 246],
		'onChange': function(color) {
			$('myInput').value = color.hex;
		}
	});
});

And finally, here we are:

Demos

Demo 1: Full mooRainbow
new MooRainbow('demo1', {id: 'myDemo1'});

Click on the rainbow

Demo 2: Full mooRainbow + wheel and keys events + onChange + onComplete

new MooRainbow('demo2', {
	id: 'myDemo2',
	wheel: true,
	onChange: function(color) {
		$('outer').setStyle('background-color', color.hex);
		$('demoInput2').value = color.hex;
	},
	onComplete: function(color) {
		$('outer').setStyle('background-color', '#121212');
		$('demoInput2').value = color.hex;
	}
});

Click on the rainbow and try your wheel on RGB/HSB Inputs and Slider. (You can also use UP/DOWN keys on Inputs). Change color and find out one you like, then click on Select button.

Demo 3: Mini mooRainbow (can be done customizing your css)

var demo3 = new MooRainbow('demo3', {
	id: 'myDemo3',
	imgPath: 'images/demo3/'
});

Click on the rainbow
Click here to see how easy is customize your mooRainbow. You see we've specified a new imgPath, using smaller overlays.
Thanks to tomocchino for this demo :)

Download

MooRainbow is licensed under the terms of the MIT-License, which means in short that you're free to use and modify it in every circumstances, but leaving the copyright remarks.

I'd also really appreciate to receive an email with the link where it's used on, but that's not mandatory.


If you appreciated my work, you can donate me a beer :)


  1. mootools (v1.11)
    Required modules:
    • Core: Core
    • Class: Class, Class.Extras
    • Native: Array, String, Function, Number, Element
    • Element: Element.Event, Element.Filters, Element.Selectors, Element.Dimensions
    • Window: Window.DomReady
    • Drag: Drag.Base
    • Plugins: Color
  2. mooRainbow [rev 5 | 2007-11-09]


About

I'm Djamil Legato (w00fz), i hope you enjoy mooRainbow as much as i enjoyed writing it. If you wish to contact me, my email is w00fzIT [at] gmail.com

I apologize to those that mailed me but which didn't received any reply yet. As a developer of mootools and freelancer, I have not much time, right now, to spend for improving mooRainbow.

Anyway, as i promised, I will fix and rewrite a bit better all mooRainbow when mootools 1.2 will be released.

As you can see, there's no discussion board in here, but there's an open thread on mootools forum. You can write there, but please, first read the whole thread, maybe your issue has already been solved ;)

 

- Djamil Legato (w00fz)