[jQuery] Re: ANN eyedropper color picker plugin
Since github seems to be suffering from a DoS attack, I posted a demo here: http://sstrudeau.com/jquery-dropper/demo/index.html Scott On Wed, Sep 16, 2009 at 12:47 PM, Scott Trudeau scott.trud...@gmail.comwrote: [cross posted from the plugin list, which seems to have died in February] Hey folks, I've been absent from the jquery lists for quite awhile, but just recently had the opportunity to build a cool little plugin for a project I'm working on so I decided to release it to the public. This plugin acts as an eyedropper-style color picker, allowing a user to select a color by clicking a pixel in an image. The plugin replaces selected img elements on the page with a canvas element, and provides click, mousemove and mouseout event callbacks. The callback is sent a color object (describing the color under the mouse for the event). It also shows a little hovering preview of the color near the cursor when over the image. You can find it on github with a simple demo included: http://github.com/sstrudeau/jquery-dropper I'm hoping to receive some feedback on things like: * callback function naming conventions * which other arguments would be useful appropriate to send via the callback * should I instead (or also) trigger events instead/as well as offer callbacks? * any best practice examples for making something like the color hover chip style-able, optional? * any other feedback No live demo yet -- but if I hear a clamor, I might find a place to tuck one. Notable limitations: doesn't work on IE (the VML canvas hack doesn't offer pixel-level access to images) and images must be hosted from the same domain as the origin page (canvas security limitation). Thanks, Scott
[jQuery] Re: ANN eyedropper color picker plugin
Sounds cool, consider this some clamor for a live demo :-) Thanks, Jack Scott Trudeau wrote: [cross posted from the plugin list, which seems to have died in February] Hey folks, I've been absent from the jquery lists for quite awhile, but just recently had the opportunity to build a cool little plugin for a project I'm working on so I decided to release it to the public. This plugin acts as an eyedropper-style color picker, allowing a user to select a color by clicking a pixel in an image. The plugin replaces selected img elements on the page with a canvas element, and provides click, mousemove and mouseout event callbacks. The callback is sent a color object (describing the color under the mouse for the event). It also shows a little hovering preview of the color near the cursor when over the image. You can find it on github with a simple demo included: http://github.com/sstrudeau/jquery-dropper I'm hoping to receive some feedback on things like: * callback function naming conventions * which other arguments would be useful appropriate to send via the callback * should I instead (or also) trigger events instead/as well as offer callbacks? * any best practice examples for making something like the color hover chip style-able, optional? * any other feedback No live demo yet -- but if I hear a clamor, I might find a place to tuck one. Notable limitations: doesn't work on IE (the VML canvas hack doesn't offer pixel-level access to images) and images must be hosted from the same domain as the origin page (canvas security limitation). Thanks, Scott
[jQuery] Re: ANN eyedropper color picker plugin
great, thanks. This would be really handy as a greasemonkey script. I use a FF plugin that does the eyedropper thing a lot (during design work), but it has it's shortcomings. If a greasemonkey script gave me the eyedropper and a box with the sampled color and hex value, that'd be rad. - Jack Scott Trudeau wrote: Since github seems to be suffering from a DoS attack, I posted a demo here: http://sstrudeau.com/jquery-dropper/demo/index.html Scott On Wed, Sep 16, 2009 at 12:47 PM, Scott Trudeau scott.trud...@gmail.com mailto:scott.trud...@gmail.com wrote: [cross posted from the plugin list, which seems to have died in February] Hey folks, I've been absent from the jquery lists for quite awhile, but just recently had the opportunity to build a cool little plugin for a project I'm working on so I decided to release it to the public. This plugin acts as an eyedropper-style color picker, allowing a user to select a color by clicking a pixel in an image. The plugin replaces selected img elements on the page with a canvas element, and provides click, mousemove and mouseout event callbacks. The callback is sent a color object (describing the color under the mouse for the event). It also shows a little hovering preview of the color near the cursor when over the image. You can find it on github with a simple demo included: http://github.com/sstrudeau/jquery-dropper I'm hoping to receive some feedback on things like: * callback function naming conventions * which other arguments would be useful appropriate to send via the callback * should I instead (or also) trigger events instead/as well as offer callbacks? * any best practice examples for making something like the color hover chip style-able, optional? * any other feedback No live demo yet -- but if I hear a clamor, I might find a place to tuck one. Notable limitations: doesn't work on IE (the VML canvas hack doesn't offer pixel-level access to images) and images must be hosted from the same domain as the origin page (canvas security limitation). Thanks, Scott
[jQuery] Re: ANN eyedropper color picker plugin
This wouldn't be too difficult to turn into a greasemonkey script. It
wouldn't work for images that are hosted from a domain other than the parent
page, however, which is a frequent case; Firefox will throw canvas security
exceptions for every img element not in the domain if you do
$('img').dropper(). You could probably do a $('img').each() loop and check
that the src attribute is in the page domain before making the image
pickable, but you would only be able to pick from a subset of (possibly
0) images on the page.
You could also turn it into a bookmarklet a la Karl Swedberg's jquerify
bookmarklet (same caveats apply, greasemonkey not required):
http://www.learningjquery.com/2009/04/better-stronger-safer-jquerify-bookmarklet
Scott
On Wed, Sep 16, 2009 at 5:45 PM, Jack Killpatrick j...@ihwy.com wrote:
great, thanks. This would be really handy as a greasemonkey script. I use
a FF plugin that does the eyedropper thing a lot (during design work), but
it has it's shortcomings. If a greasemonkey script gave me the eyedropper
and a box with the sampled color and hex value, that'd be rad.
- Jack
Scott Trudeau wrote:
Since github seems to be suffering from a DoS attack, I posted a demo here:
http://sstrudeau.com/jquery-dropper/demo/index.html
Scott
On Wed, Sep 16, 2009 at 12:47 PM, Scott Trudeau
scott.trud...@gmail.comwrote:
[cross posted from the plugin list, which seems to have died in
February]
Hey folks,
I've been absent from the jquery lists for quite awhile, but just
recently had the opportunity to build a cool little plugin for a
project I'm working on so I decided to release it to the public. This
plugin acts as an eyedropper-style color picker, allowing a user to
select a color by clicking a pixel in an image.
The plugin replaces selected img elements on the page with a canvas
element, and provides click, mousemove and mouseout event callbacks.
The callback is sent a color object (describing the color under the
mouse for the event). It also shows a little hovering preview of the
color near the cursor when over the image.
You can find it on github with a simple demo included:
http://github.com/sstrudeau/jquery-dropper
I'm hoping to receive some feedback on things like:
* callback function naming conventions
* which other arguments would be useful appropriate to send via the
callback
* should I instead (or also) trigger events instead/as well as offer
callbacks?
* any best practice examples for making something like the color hover
chip style-able, optional?
* any other feedback
No live demo yet -- but if I hear a clamor, I might find a place to
tuck one.
Notable limitations: doesn't work on IE (the VML canvas hack doesn't
offer pixel-level access to images) and images must be hosted from the
same domain as the origin page (canvas security limitation).
Thanks,
Scott
