108

Update Jul 2015:

The author is not able to update anymore. Use Freehand Circles Drawing Tool instead.

Important:

All SE sites (with one exception - see below) are now supported. Please upgrade to the latest version to enjoy this wonderful new feature!

A special thank you to Jacob Jernigan for donating space and bandwidth to host the images generated by this script.

Please make sure you update to the latest version as soon as possible.

v1.2 Update - what's new:
- Images are now stored on permanent server
- All StackExchange sites are now supported (Ask Ubuntu is technically supported but has CSS issues)

v1.1 Update - what's new:
- Fixed bug where answer would have long blank section
- Added new color and brush settings
- Images must be clicked on first to activate tools
- Added support for annotating images when composing an answer / question
- Fixed fkey bug

Screenshot / Code Snippet

http://fhc.quickmediasolutions.com/image/905708658.png

Also, you can find an old video demonstrating its use here.

About

I humbly present to you one of the most remarkable accomplishments: a UserScript that makes drawing Freehand Circles™ extremely easy!

You can install this UserScript in your browser. After installation, you will be able to draw freehand circles freely on any image in a post! But that's not all - you can also save the changes you've made merely by clicking the 'save' button.

You can find some technical details here.

License

The MIT License

Download

http://files.quickmediasolutions.com/userscripts/circles.user.js

Platform

Any browser that can run / install UserScripts.

Contact

I can be reached at [email protected].

Code

JavaScript on the client side, PHP on the server

Improve this question
36
  • 3
    Note that to be really effective you should have edit privileges on the site in question, else you still enter the regular edit queue.
    – jcolebrand
    Commented Mar 2, 2011 at 23:54
  • @dra: That's a good point! But it'll still work as expected in that case.
    – Nathan Osman
    Commented Mar 2, 2011 at 23:55
  • What happens to the original image?
    – jjnguy
    Commented Mar 3, 2011 at 0:44
  • 2
    @jjnguy: Nothing... they vanish forever :P Actually, they get replaced with the modified one. They'll still show in the revision list.
    – Nathan Osman
    Commented Mar 3, 2011 at 0:59
  • @Shog9: There's some below now.
    – Nathan Osman
    Commented Mar 3, 2011 at 1:21
  • 3
    If you lack inspiration on stuff to FHC, google "people of wal mart"
    – Tim Post
    Commented Mar 3, 2011 at 2:18
  • What kind of PHP script are we talking about here?
    – Earlz
    Commented Mar 3, 2011 at 2:36
  • @Earlz: It's a short 58 line script that overlays the source image with the circles and sends it to imgur. Source here: files.quickmediasolutions.com/userscripts/circles/process.txt
    – Nathan Osman
    Commented Mar 3, 2011 at 2:38
  • @Earlz: Please excuse my awful coding style and comments :) Oh, you'll also need to quickly get an API key (it hardly takes a second and it's anonymous). imgur.com/register/api_anon
    – Nathan Osman
    Commented Mar 3, 2011 at 2:41
  • @George, why do you send it to imgur? Why not save it to the server this PHP script runs on, or better yet, use a static web host(usually providing gigs of space for nearly free) to host these images (and instead upload there?)
    – Earlz
    Commented Mar 3, 2011 at 2:44
  • @Earlz: 'Cuz I don't have that :) Plus imgur has much better latency.
    – Nathan Osman
    Commented Mar 3, 2011 at 2:45
  • 1
    You can contact me also George, depending on your needs I could probably help you out.
    – Josh
    Commented Mar 3, 2011 at 13:39
  • 2
    I think this post will need to simply become historical. I don't have the time to maintain the script anymore and it never really served a tangibly practical purpose.
    – Nathan Osman
    Commented Mar 19, 2014 at 15:20
  • 4
    @Mew I finally found it and posted it here: gist.github.com/nathan-osman/620001a7b0084d154093
    – Nathan Osman
    Commented Dec 24, 2014 at 19:12
  • 1
    @Ooker Check out this gist. You can also directly install it with a user script manager that supports .user.js files by clicking here.
    – bb216b3acfd8f72cbc8f899d4d6963
    Commented Aug 8, 2016 at 22:56

11 Answers 11

Reset to default
25

Here's a sandbox. Go nuts, you crazy kids.

enter image description here enter image description here enter image description here

Improve this answer
2
  • 11
    that bunny is great!
    – systempuntoout
    Commented Mar 3, 2011 at 15:14
  • 1
    How much time does this supposed to take ? It;'s taking pretty long fore me...
    – user21593
    Commented Sep 4, 2013 at 15:21
13

Nice, but: you're not using the SE provided Imgur account?

But then you're basically introducing image rot?

For free accounts:

How long do you keep the images?

As long as images are getting at least 1 view every 3 months, they will stick around forever. After that, your image may be removed to create more space for newer images.

(Note that a view is a request by a browser that is not using an image from its cache. Imgur tells browsers to cache a full year. I doubt Google indexing will keep refreshing the view count? Of course, unless edited by the OP within the grace period, the post revision history will still refer to the first image, which is probably hosted on the SE provided account.)

Improve this answer
7
  • Good point. The perfect solution for this would be for the system to use SO's imgur account...
    – Pekka
    Commented Mar 4, 2011 at 10:06
  • @Pekka: That's impossible, I'm afraid... since the images are uploaded with a separate PHP script. Unless I'm missing something.
    – Nathan Osman
    Commented Mar 4, 2011 at 16:48
  • @George yeah, I feared as much. Too bad
    – Pekka
    Commented Mar 4, 2011 at 16:49
  • 1
    I think you're assuming images made with this should be archived forever...
    – mmyers
    Commented Mar 5, 2011 at 5:24
  • True, @mmyers, but I think the original images should be preserved. Like I wrote: the revision history will show the author's original image if someone else added freehand circles at a later time. But even then: not too nice if a post shows no image at all without going into the revision history?
    – Arjan
    Commented Mar 5, 2011 at 9:12
  • @Pekka, @Arjan: This is no longer a problem. See the update above.
    – Nathan Osman
    Commented Mar 25, 2011 at 3:33
  • @NathanOsman I still don't understand why do you refrain from using StackExchange imgur storage. Once the server you use is down, all the images will be gone.
    – Tomáš Zato
    Commented Nov 20, 2014 at 15:02
8

I can't make this extension to work: is it outdated?

Improve this answer
5
  • 1
    The server-side of the script is currently broken. There is an attempt to bring it back up, so I will post details here as I have them.
    – Nathan Osman
    Commented Apr 2, 2012 at 17:22
  • @GeorgeEdison such a pity, it was awesome! And for the first time I was using it for something useful :)
    – clabacchio
    Commented Apr 2, 2012 at 17:54
  • 2
    @George Yeah--I loaded it and it gives me There was an error retrieving the new image URL. :(
    – Manishearth
    Commented Apr 5, 2012 at 5:04
  • Hey George, I'm assuming this is still broken? It looks like an awesome script, in fact, I'm surprised SE hasn't taken this and made it an actual feature. How cool! ..... Uncaught ReferenceError: Attacklab is not defined how-to-run-nodejs-on-linux-platform (1):17 Failed to load resource http://fhc.quickmediasolutions.com/process.php
    – jmort253
    Commented Dec 16, 2012 at 19:24
  • @Manishearth You may be interested in this: stackapps.com/q/6353/26088
    – ᔕᖺᘎᕊ
    Commented Jun 20, 2015 at 22:01
5

There you have it, the George Edison Free Hand Circle Badge!

I promised him I'd suggest a badge if he pulled this off.

enter image description here

Here's the badge:

enter image description here

Improve this answer
5
  • 10
    @George - I didn't have many options ...
    – Tim Post
    Commented Mar 3, 2011 at 2:40
  • You do now.
    – Nathan Osman
    Commented Apr 24, 2011 at 19:46
  • @TimPost if you want, I can jQuery that badge for :P
    – Manishearth
    Commented Apr 5, 2012 at 16:29
  • @Manishearth $('#badge').freeHandCircle(point1, point2, point3, point4, color, text, callback()) Could it be so easy? I smell an ego stroking userscript coming on!!
    – Tim Post
    Commented Apr 6, 2012 at 7:24
  • @TimPost Made a (simple) badge. I personally prefer $(".badge").attr("contenteditable",true).attr("href","").attr("name","") and then use Paint ;-)
    – Manishearth
    Commented Apr 6, 2012 at 7:56
5

After a day's testing (and my first real-world use!) I can see the need for three features that would be really great to have:

  • An eraser — might be half-way easy to implement? I don't know.

  • A reset button next to the "Save" button.

  • Maybe a very small text link pointing to the original image underneath the edited image?

  • One bug: If you leave the image's canvas while pressing the mouse button, and release the button outside the canvas, the script will not recognize that drawing has ended. The next time you mouse over the image, it will go on drawing. No idea whether anything can be done about that — maybe end drawing mode if the mouse cursor leaves the canvas?

Improve this answer
8
  • @Pekka: Good idea. An undo button would be pretty easy - a reset button even easier. As for the original image... wouldn't that be in the revision history?
    – Nathan Osman
    Commented Mar 3, 2011 at 23:21
  • @George it would, but depending on how, where and for what this is going to be used, there may be the need for users to quickly get hold of an image without having to go through the revision history (like in order to sketch an alternative suggestion).
    – Pekka
    Commented Mar 3, 2011 at 23:25
  • @Pekka: I see what you're saying... but getting previous revisions using the API for every answer on the page would be very expensive.
    – Nathan Osman
    Commented Mar 3, 2011 at 23:26
  • @George but would the previous image's URL not be available from fetching it before it was drawn on, and re-inserting into the updated post? (Mind you, despite understanding the basic concept I'm still largely ignorant of how this works, so this is just me speculating)
    – Pekka
    Commented Mar 3, 2011 at 23:43
  • @Pekka: Are you asking if it would be possible to view the previous version of the image before you save your changes? That would be possible and pretty easy.
    – Nathan Osman
    Commented Mar 3, 2011 at 23:43
  • @George no, I mean when the new, drawn-on image is saved, adding a tiny, tiny link to the original image (which usually is on imgur) underneath the end result so people can more easily copy it (and paste it into their answer, and draw on it).
    – Pekka
    Commented Mar 3, 2011 at 23:48
  • 1
    @Pekka: Thanks! That's exactly what I'll do - if the mouse leaves the canvas, it'll end drawing operations. That's a cinch to add.
    – Nathan Osman
    Commented Mar 4, 2011 at 0:08
  • @Pekka: I implemented two of your suggestions (the one with the mouse leaving the canvas and the reset button). Simply use the same link in the question above to update.
    – Nathan Osman
    Commented Mar 4, 2011 at 23:18
1

No f****ing way.

This is brilliant. And the auto-save-to-imgur-and-replace-the-link-thingy is genius.

enter image description here

Community canvas: (note the current limitation that an image can be edited only once) enter image description here

Improve this answer
6
  • I knew it would get people excited! And it's so simple to use too!
    – Nathan Osman
    Commented Mar 2, 2011 at 23:55
  • @George, I'm getting this error when trying to edit the above image - "There was an error retrieving the imgur.com URL."
    – jjnguy
    Commented Mar 3, 2011 at 0:39
  • @jjnguy: Unfortunately, it has come to my attention that the same image cannot be edited twice. I'm working on that, but in the meantime, feel free to post your own image and try it.
    – Nathan Osman
    Commented Mar 3, 2011 at 0:42
  • @George, is this meant to work on stackapps? It only works on MSO for me.
    – Jonathan.
    Commented Mar 6, 2011 at 14:45
  • @Jonathan: Only meant for Meta.
    – Nathan Osman
    Commented Mar 6, 2011 at 20:34
  • @George, oh right just wondered how people were drawing here,btw it goes without saying that this script is bloody amazing :)
    – Jonathan.
    Commented Mar 6, 2011 at 20:45
1

Bug:

If an SE dialog pops up (vote to close/flag/&c), the script kicks in and blocks clicking.

enter image description here

Clicking just puts it into FHC draw mode.

Test case: https://meta.stackoverflow.com/questions/128528/benefactor-badge-awarded-twice

Improve this answer
0

Add your circle around the painted pixel and (400,400), and the second one around the first one, and so on -- how many can we fit?

Improve this answer
7
  • This alone will use up my API requests :(
    – Nathan Osman
    Commented Mar 3, 2011 at 2:30
  • @George, is that what "There was an error retrieving revision content." means?
    – Nick T
    Commented Mar 3, 2011 at 2:52
  • @Nick: Hmmm... that means there was an error getting the latest revision for the post. I'll see if I can reproduce that.
    – Nathan Osman
    Commented Mar 3, 2011 at 6:30
  • @Nick: Yup, I can reproduce... looking into it now.
    – Nathan Osman
    Commented Mar 3, 2011 at 6:34
  • Ooops... now the post got rolled back. Sigh...
    – Nathan Osman
    Commented Mar 3, 2011 at 6:56
  • 2
    Are those boobs?
    – juan
    Commented Mar 3, 2011 at 23:46
  • @Juan No it's mesmerizing glasses.
    – HoLyVieR
    Commented Mar 4, 2011 at 0:05
0

Is there some image service/URL thing where you can get a blank canvas to then draw on it, a-la Placekitten (but without the ugly cats)?

http://placekitten.com/500/100

Improve this answer
5
  • 1
    Well, Placekitten without the ugly cats would probably be placehold.it
    – Matt Gibson
    Commented Mar 3, 2011 at 22:12
  • (I'm getting an "Access Restricted" for that image, and the entire placekitten.com website. The page source has an odd iframe, referring to http://anti-virus.cloudflare.com. That company apparently also protects against hotlinking, which seems to be odd for this very service. I can still get there using Web Sniffer and then get totally different HTML. Maybe my IP has been blocked due to the above hotlinking? Odd!)
    – Arjan
    Commented Mar 4, 2011 at 16:54
  • @Arjan: You won't now... :)
    – Nathan Osman
    Commented Mar 5, 2011 at 0:03
  • (I got a blank page yesterday, @George, but now I get a virus warning. It's telling me "This IP address has been seen posting comment or blog spam", while earlier I guessed it was caused by some blocking I do myself, or by using a non-compatible browser or OS. I don't think I like that "This website is participating in a project to stop attacks and educate visitors with infected computers about how they can clean up their machines" if it is indeed throwing false positives. Right now, the scary cat bothers me more! ;-) But I'll investigate later...)
    – Arjan
    Commented Mar 5, 2011 at 9:25
  • @Arjan: I'm not responsible for either of those domains.
    – Nathan Osman
    Commented Mar 5, 2011 at 17:43
0

Apparently we're now obliged to submit all our screen grabs in 3D, and to assist with this our FHC should also be 3D:

3... 2... 1... until George Edison's FHC script gets 3D effects

That would make this truly rainbow unicorn awesome or something ;)

Improve this answer
1
0

Bug Report

If you try to flag a question with an image, and the window overlaps with the image, the flag popup is unable to be navigated.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .