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

Code

JavaScript on the client side, PHP on the server

Community
  • 1
Nathan Osman
  • 23,286
  • 11
  • 60
  • 107
  • 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 02 '11 at 23:54
  • @dra: That's a good point! But it'll still work as expected in that case. – Nathan Osman Mar 02 '11 at 23:55
  • What happens to the original image? – jjnguy Mar 03 '11 at 00: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 03 '11 at 00:59
  • @Shog9: There's some below now. – Nathan Osman Mar 03 '11 at 01:21
  • 3
    If you lack inspiration on stuff to FHC, google "people of wal mart" – Tim Post Mar 03 '11 at 02:18
  • What kind of PHP script are we talking about here? – Earlz Mar 03 '11 at 02:36
  • @Earlz: It's a short 58 line script that overlays the source image with the circles and sends it to imgur. Source here: http://files.quickmediasolutions.com/userscripts/circles/process.txt – Nathan Osman Mar 03 '11 at 02: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). http://imgur.com/register/api_anon – Nathan Osman Mar 03 '11 at 02: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 Mar 03 '11 at 02:44
  • @Earlz: 'Cuz I don't have that :) Plus imgur has much better latency. – Nathan Osman Mar 03 '11 at 02:45
  • @George, good point. I may in the future be willing to donate some space and bandwidth, but that won't help with latency (though I get good ping times of 17ms from my server to my house, a few hundred miles away). Anyway, considered using DropBox maybe? It has a PHP API and public URLs. Or searching for an image hosting service which doesn't rate limit an API key? – Earlz Mar 03 '11 at 02:52
  • @Earlz: I'll take a look at DropBox. – Nathan Osman Mar 03 '11 at 06:31
  • 1
    You can contact me also George, depending on your needs I could probably help you out. – Josh Mar 03 '11 at 13:39
  • Just a small suggestion: add a clear button for when some of us have trouble drawing circles. :x –  Mar 03 '11 at 16:51
  • @The: I used your website's contact form to send you a message. – Nathan Osman Mar 03 '11 at 17:43
  • George, bug report: Using the script throws a lolcat error. According to @balpha, the fkey was changed. no, that's the XSRF token. just tell him to use StackExchange.options.user.fkey http://chat.meta.stackoverflow.com/transcript/message/569875#569875 hope that helps – Pekka Mar 16 '11 at 20:22
  • @What: Okay, I'll have that fixed soon. – Nathan Osman Mar 16 '11 at 20:45
  • @Pekka: Please update the script when you get a chance - I changed the hosting for the images now. – Nathan Osman Mar 24 '11 at 04:47
  • If anyone is interested, it is extremely easy to convert this into a Safari extension. You add it as an end script, set up the allowed domains, and modify the script to not do anything unless it is on a question page (since extensions can only be directly limited to domains, not paths). – ughoavgfhw Mar 26 '11 at 04:22
  • @Pekka: This is now supported on all StackExchange sites! – Nathan Osman Apr 08 '11 at 19:15
  • A really interesting addition to this would be adding a button to the markdown editor that automatically inserts an empty canvas to draw on without having to upload anything. I'd try building it myself if I had the time, but I'm up to my ears in work... Is there a place to place Stackapps requests? Meta? – Pekka May 04 '11 at 09:43
  • @Pekka: Well the precedent has been to simply post it as an answer to the question. So feel free to post it below. – Nathan Osman May 04 '11 at 15:39
  • @Pekka: If you like this script, you'll definitely like this app. – Nathan Osman Jun 08 '11 at 20:20
  • @George older images with links to the quickmediasolutions.com don't work any more - they get a login dialog. Example: Hide answer bodies in careers profile is there anything we can do? Do these images have a new home? – Pekka Aug 11 '11 at 17:26
  • @Pekka: Thanks for the heads up. I'll have to talk to Jacob since that particular subdomain points to his server. Hopefully he knows what's going on. – Nathan Osman Aug 11 '11 at 17:32
  • fhc.quickmediasolutions.com doesn't seem to be working any more. Is there any chance to recover existing old images from it? – Pekka Nov 06 '11 at 14:28
  • @Pekka: I'll speak to Jacob about that. – Nathan Osman Nov 06 '11 at 20:11
  • @GeorgeEdison Nice. But it does not work on Chrome (Version 24.0.1312.57 m). (tampermonkey) – Himanshu Feb 06 '13 at 11:41
  • 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 Mar 19 '14 at 15:20
  • There appears to be a missing image in this question. Any idea what it was or where it is now? – TRiG May 28 '14 at 10:27
  • @NathanOsman Can I have the code please? – Kaz Wolfe Aug 14 '14 at 08:14
  • 4
    @Mew I finally found it and posted it here: https://gist.github.com/nathan-osman/620001a7b0084d154093 – Nathan Osman Dec 24 '14 at 19:12
  • all the links are broken – Ooker Mar 03 '15 at 18:41
  • @NathanOsman I've made another script: http://stackapps.com/q/6353/26088 You might want to check it out! :) – ᔕᖺᘎᕊ Jun 20 '15 at 18:21
  • 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 Aug 08 '16 at 22:56

11 Answers11

25

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

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

Community
  • 1
Pops
  • 143
  • 1
  • 5
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.)

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

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

clabacchio
  • 101
  • 1
  • 4
  • 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 Apr 02 '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 02 '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 05 '12 at 05: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 Dec 16 '12 at 19:24
  • @Manishearth You may be interested in this: http://stackapps.com/q/6353/26088 – ᔕᖺᘎᕊ Jun 20 '15 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

Manishearth
  • 2,725
  • 16
  • 39
Tim Post
  • 2,161
  • 11
  • 9
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?

Community
  • 1
Pekka
  • 231
  • 1
  • 5
  • @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 03 '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 03 '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 03 '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 03 '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 03 '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 03 '11 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 Mar 04 '11 at 00: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 04 '11 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

Pekka
  • 231
  • 1
  • 5
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

Community
  • 1
Manishearth
  • 2,725
  • 16
  • 39
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?

juan
  • 101
  • 2
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

Nick T
  • 101
  • 1
  • 1
    Well, Placekitten without the ugly cats would probably be http://placehold.it/ –  Mar 03 '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 04 '11 at 16:54
  • @Arjan: You won't now... :) – Nathan Osman Mar 05 '11 at 00: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 05 '11 at 09:25
  • @Arjan: I'm not responsible for either of those domains. – Nathan Osman Mar 05 '11 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 ;)

Community
  • 1
Zhaph - Ben Duguid
  • 227
  • 1
  • 8
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.

Community
  • 1
Cody Guldner
  • 133
  • 12