joliclic code

Description

Khromaxul is a collection of XUL widgets to create an advanced color chooser.

Its initial purpose is to create an extension for Komodo, but these elements could easily be reused by any XUL project, extension, or xulrunner application.

These elements are encapsulated in XBL, some use SVG, and they require gecko >= 1.9.X (firefox >= 3.x). Some JavaScript modules are also available, to work with colors in different spaces, and to work with files like Gimp Palettes.

License

MPL 1.1 / GPL 2.0 / LGPL 2.1
(yes, it's free and open source)

Komodo Extension

2 tools are available:

• A advanced color selector, "à la Gimp", via a button or via the "Tool" menu. It's a window with several selectors in the RGB and HSV color spaces, and the ability to use color palettes (Gimp Format). If a color code is selected in the Komodo editor (format #ffffff or #fff, with or without #, format rgb(r, g, b) or rgb(r%, g%, b%), or HTML name), the selectors are initialized on this color when the window is opened.

• A scrollbar displaying Gimp Palettes, "à la Inkscape", on the bottom of the main window of Komodo. One click on a color insert (or replace current selection) the new color code. This scrollbar can be displayed or hidden via a button, or via the "View" menu.

version 0.3alpha for Komodo 5.x

warning, this version is a alpha one, i.e. a test version !

download khromaxul-koext-0.3alpha.xpi

date : 2009-07-30

Demos

These XUL demos require a browser based on mozilla >= 1.9.x (Firefox >= 3.x).

• A complete example, similar as the Khromaxul window in the Komodo Extension: khromaxul.xul.
• Each elements, simple tests: tests.
• Small videos on my blog, during my first tests: vidéo 1, vidéo 2.

Sources

Downloadable archive, which contains XBL sources, JavaScript, the documentation (also visible online), the demo, and the tests files.

version 0.3alpha

download khromaxul_src-0.3alpha.xpi

date : 2009-07-30

mercurial repository on bitbucket (trunk, unstable).

If you use this code in a project, I will be happy if you let me know, but there's no obligation ;) .

changelog

0.3 alpha :

• fix an error in HSL->RGB conversion
• new js lib kh-schemer.js, color schemes generator (monochromatics, triads, tetrads, complement, tints, shades, tones,..)
• new elements kh-wheelscheme and kh-radiusscheme
• ew version of the komodo extension, with schemers

0.2.2 alpha :

• the kh-hsvpicker[type="wheel"] element now works inside a XBL. Thanks Laurent :).

0.2.1 alpha :

• gecko 1.9.1 compatibility (small correction of SVG element).
• add HSL color space in the library kh-color.js. The cssToRGB() function recognize more patterns ((hsv(n, n, n), hsl(n, n, n) and hsl(n, n%, n%))), and can optionaly recognize all CSS names defined by W3C (use of an optional file).

0.1 alpha :

• first publication.

todo

• implement some scheme tools (complementary colors, triads,...) "à la Agave".
• wheel picker, rgbpicker and hsvpicker: show dotted lines around the focused selector, and allow key navigation.
• remove the type="multicolor" for . A unique method applyGradient() like the one for type="multicolor should be sufficient.
• allow drag'n'drop of color sample between 2 palettes.
• auto scroll when drag'n'drop a color samlple in an overflowed palette
• some tools to sort palette colors.
• Extension Komodo, propose an option to use Khromaxul as color picker for the colors hyperlinks.
• understand and implement nsIAccessibleProvider to the elements that need it.