Home

Degradable Javascript Widget Fun

Oct 22, 2005

At BarCamp Amsterdam, I worked with Adrian Rossouw on a UI for styling a website. The result is a pretty cool color picker like in Gimp or Photoshop, but without Flash or Java. It just uses Javascript, CSS and transparent PNGs. It degrades to regular textboxes where you type/paste an HTML color code.

A bit later, Chris Messina suggested a slider control. Not much later, it was finished. It degrades to a plain select box, which is where the slider values are taken from. Its main purpose is to be used to select between options, and not for arbitrary continuous ranges.

These will soon be coming to a Drupal site near you after some more polishing and bug testing. Whether they will be used in Drupal 4.7 remains to be seen (though I can already think of a few spots where they would be useful).

Yay for open-source developer cross pollination :).

relative links

Oct 22, 2005 Pascal Van Hecke

Nice!

Just this remark: the links don't work from an rss reader since they're relative.

Greetings,

pascal

xml:base

Oct 22, 2005 Steven

My RSS feed sets xml:base="http://www.acko.net", which should be enough for an RSS reader which implements the specifications correctly.

But then, I suppose an actual, honest and correct RSS reader would be too much to ask for :P.

ajax tools for Drupal - dojo?

Oct 22, 2005 Mark Ranford

Hi Steven, sounds great, would be a great boon fro drupal to be able to apply these, for example, I would love it if the Theme editor module was able to use them to make adjustments to theme colours easier for example.

Just one q, the javascript (ajax?) code to do this. Drupal doesnt seem to yet have arrived at a decision on some single/core ajax suite that can be reused again and again. what would yours have been based on?. Also from the various discussions Ive seen on ajax toolkits, Dojo seems to standout as an exceptional toolkit for ajax. It sounds like it would be easy to incorporate that as the standard ajax toolkit, just need to get a decision on it, then Im sure use of ajax in drupal would takeoff. Dojo is now getting widgets donated left right & center ( see the FISHEYE widget just donated to dojo -

http://dojotoolkit.org/~alex/dojo/trunk/demos/widget/Fisheye.html

unbelievably cool if that was just a snip to insert in drupal sites).

Anyway, youre doing great stuff with Drupal, and I really like the simple clean style of the website & the frontpage.

All the best, mark

Bloglines!

Oct 23, 2005 Pascal Van Hecke

ah sorry!
blame Bloglines!

Konfirmed

Oct 23, 2005 Ber

Konq does both widgets fine. So I assume safari can handle it too :). Great work Steven!

-- small usability tweak suggestion --
Make the text color in the text-boxes contrary colos of the BG. So for a blue (), use red. That way you can actually read the color codes :p

<input type='text' value='#0000FF' size='60' style='background-color: #0000AA; color: #AAAA00'>

Nice, but how is this great?

Oct 25, 2005 Ville

Looks nice, but how is this superior to this implementation? Haven't done any degrade-testing, so is that it?

Some differences

Oct 25, 2005 Steven

Mine has no Javascript or extra markup in the HTML source except for a single marker class. The JS creates the color wheel in-place and links it to the color text areas.
Mine uses the HSL (luminance) space, rather than HSB/HSV (brightness / value). The main difference is where fully saturated colors are relative to brightness. HSL is also the colorspace used in CSS3 and is typically considered more intuitive. (wikipedia info)
Mine supports dragging the mouse around to find the a color rather than relying on discrete clicks.
Mine is WYSIWYG: the color you click on is the one that is chosen. This isn't the case on the '4096' picker on my machine, the matching is only approximate.

Direct HTML-color entry?

Nov 03, 2005 Win Bent

I have a feeling I'm missing something - it seems as though neither Steven's tool nor the jemimap tool allow you to type in an arbitrary HTML color, even though they both have textboxes where I expected to be able to do that. When picking colors, I often start with a "known" color, and work from there, but I don't see how to do that with these tools.

Please understand - I like the "safe" and "smart" feature in the jemimap tool, and I'm quite impressed with the DHTML-simplicity of Steven's tool. It's just that I expected a bit more.

Dosen't play nice with prototype

Dec 19, 2008 Jeremy

If you replace all the "$" signs to "jQuery" in the code, it'll work fine with prototype, another popular javascript library.

Alternatively the whole file can be wrapped in with the following code:

(function($) {
...
})(jQuery);