Take the 2-minute tour ×
Stack Apps is a question and answer site for apps, scripts, and development with the Stack Exchange API. It's 100% free, no registration required.

Important:


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

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

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 admin@quickmediasolutions.com.

Code

JavaScript on the client side, PHP on the server

share|improve this question

migrated from meta.stackoverflow.com Mar 6 '11 at 3:33

This question came from our discussion, support, and feature requests site for professional and enthusiast programmers.

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 Mar 2 '11 at 23:54
    
@dra: That's a good point! But it'll still work as expected in that case. –  Nathan Osman Mar 2 '11 at 23:55
13  
What soulless monster downvotes this? –  Pekka 웃 Mar 2 '11 at 23:57
    
That's what I say! –  Nathan Osman Mar 2 '11 at 23:58
2  
-1: No images for us to FHC-vandalize. –  Shog9 Mar 3 '11 at 0:26
    
@Shog9: No problem... just add one somewhere like the formatting sandbox. –  Nathan Osman Mar 3 '11 at 0:30
    
What happens to the original image? –  jjnguy Mar 3 '11 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 Mar 3 '11 at 0:59
    
@Shog9: There's some below now. –  Nathan Osman Mar 3 '11 at 1:21
4  
This post will overflow with upvotes –  jmfsg Mar 3 '11 at 2:01
    
1500 ​​​megawatt? –  Nick T Mar 3 '11 at 2:17
2  
If you lack inspiration on stuff to FHC, google "people of wal mart" –  Tim Post Mar 3 '11 at 2:18
1  
You can contact me also George, depending on your needs I could probably help you out. –  Josh Mar 3 '11 at 13:39
8  
The requested URL /userscripts/circles.user.js was not found on this server. –  Basilevs Oct 19 '13 at 5:01
1  
@Mew: I'll let you know if I'm able to find it. –  Nathan Osman Aug 16 at 21:41

11 Answers 11

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?

share|improve this answer
    
@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 Mar 3 '11 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 웃 Mar 3 '11 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 Mar 3 '11 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 웃 Mar 3 '11 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 Mar 3 '11 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 웃 Mar 3 '11 at 23:48
    
@George added one bug report. –  Pekka 웃 Mar 3 '11 at 23:54
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 Mar 4 '11 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 Mar 4 '11 at 23:18
    
@George both works great, thanks! –  Pekka 웃 Mar 4 '11 at 23:19

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.

share|improve this answer

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

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

share|improve this answer
    
OMG, this is great! –  jmfsg Mar 3 '11 at 2:01
10  
that bunny is great! –  systempuntoout Mar 3 '11 at 15:14
8  
Oh dear... Jon Skeet! AAAAAAAAHHHHHH!!!! –  Nathan Osman Mar 5 '11 at 1:35
1  
How much time does this supposed to take ? It;'s taking pretty long fore me... –  dimensio1n0 Sep 4 '13 at 15:21

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: http://meta.stackoverflow.com/questions/128528/benefactor-badge-awarded-twice

share|improve this answer

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

share|improve this answer
    
Thank you! Uhm... about the color... –  Nathan Osman Mar 3 '11 at 2:39
10  
@George - I didn't have many options ... –  Tim Post Mar 3 '11 at 2:40
    
You do now. –  Nathan Osman Apr 24 '11 at 19:46
    
@TimPost if you want, I can jQuery that badge for :P –  Manishearth Apr 5 '12 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 Apr 6 '12 at 7:24
    
@TimPost Made a (simple) badge. I personally prefer $(".badge").attr("contenteditable",true).attr("href","").attr("name","") and then use Paint ;-) –  Manishearth Apr 6 '12 at 7:56

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

share|improve this answer
    
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 Apr 2 '12 at 17:22
    
@GeorgeEdison such a pity, it was awesome! And for the first time I was using it for something useful :) –  clabacchio Apr 2 '12 at 17:54
2  
@George Yeah--I loaded it and it gives me There was an error retrieving the new image URL. :( –  Manishearth Apr 5 '12 at 5:04
1  
@Manishearth: Don't worry, it may return soon. –  Nathan Osman Apr 5 '12 at 16:23
    
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 Dec 16 '12 at 19:24

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 ;)

share|improve this answer

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

share|improve this answer
1  
Well, Placekitten without the ugly cats would probably be placehold.it –  Matt Gibson Mar 3 '11 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 Mar 4 '11 at 16:54
    
@Arjan: You won't now... :) –  Nathan Osman Mar 5 '11 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 Mar 5 '11 at 9:25
    
@Arjan: I'm not responsible for either of those domains. –  Nathan Osman Mar 5 '11 at 17:43

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.)

share|improve this answer
    
Good point. The perfect solution for this would be for the system to use SO's imgur account... –  Pekka 웃 Mar 4 '11 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 Mar 4 '11 at 16:48
    
@George yeah, I feared as much. Too bad –  Pekka 웃 Mar 4 '11 at 16:49
1  
I think you're assuming images made with this should be archived forever... –  mmyers Mar 5 '11 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 Mar 5 '11 at 9:12
    
@Pekka, @Arjan: This is no longer a problem. See the update above. –  Nathan Osman Mar 25 '11 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 Nov 20 at 15:02

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?

share|improve this answer
    
This alone will use up my API requests :( –  Nathan Osman Mar 3 '11 at 2:30
    
@George, is that what "There was an error retrieving revision content." means? –  Nick T Mar 3 '11 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 Mar 3 '11 at 6:30
    
@Nick: Yup, I can reproduce... looking into it now. –  Nathan Osman Mar 3 '11 at 6:34
    
Ooops... now the post got rolled back. Sigh... –  Nathan Osman Mar 3 '11 at 6:56
2  
Are those boobs? –  jmfsg Mar 3 '11 at 23:46
    
@Juan No it's mesmerizing glasses. –  HoLyVieR Mar 4 '11 at 0:05

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

share|improve this answer
    
I knew it would get people excited! And it's so simple to use too! –  Nathan Osman Mar 2 '11 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 Mar 3 '11 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 Mar 3 '11 at 0:42
    
@jjnguy: Never mind. It's fixed now! –  Nathan Osman Mar 3 '11 at 1:38
    
@George, is this meant to work on stackapps? It only works on MSO for me. –  Jonathan. Mar 6 '11 at 14:45
    
@Jonathan: Only meant for Meta. –  Nathan Osman Mar 6 '11 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. Mar 6 '11 at 20:45

You must log in to answer this question.

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