Freehand Circles Drawing Tool

Question

What is it?

A userscript that lets you draw directly onto images on any Stack Exchange site to add freehand circles (or anything else you might like to add).

It has been designed to work like StackExchange™ SuperCollider Freehand Circle™ Editor - [Now supported on EVERY StackExchange site!] which unfortunately the owner doesn't have time to maintain anymore :(

How do I use it?

On every image on every site you will now see 2 buttons added: edit and save.

Clicking edit converts the image to a canvas for you to draw on. A toolbar is added underneath the image where you can change the brush colour or brush *width**. Once you are done, you can click save and the script will upload the new image to imgur, and edit the post for you with the new link in it!

Note: You must have an access token for this to work. Get one at Github

Install

You need to have something like Greasemonkey or Tampermonkey for this to work, as it saves your access token via GM_setValue()!
You need an access token. Get one from here
Install: view source or install

enter image description here

Notes

Images are save under imgur.com and NOT stack.imgur.com (Stack Exchange's own domain for inline images). This shouldn't be a problem because it says here that images are kept forever...
The script works thanks to Fabric.JS and jQuery
This script has only been tested on Google Chrome and Firefox - I haven't tested on other browsers!
Here is a sandbox where you can test the script

Change log

v1.0.6: Fixed the script - it was broken with new images that are now linked to a bigger version automatically.

For what? Demonstrating the script? It might also be worth noting that this will not work GIFs - it can't edit a gifs frame! — ᔕᖺᘎᕊ, Jun 20 '15 at 18:44
hey, look at what I did http://stackapps.com/questions/6216/inline-editor-regardless-of-reputation :D — nicael, Jun 20 '15 at 19:01
@nicael I've already upvoted before :) But what have you done to that gif!? — ᔕᖺᘎᕊ, Jun 20 '15 at 20:13

DavidPostill · Answer 1 · 2015-07-16T20:41:16.617

4

status-completed:

Unfortunately for me the buttons appear in the wrong place (at the far right of the screen next to the scrollbar:

enter image description here

Please let me know if you need any more info to help debug this.

OS Windows 7 64 bit.

Firefox 38.0.5

status-completed:

As per comment buttons abscure the image:

enter image description here

status-completed (there was an error with the access token)

When saving (which doesn't work) I get:

enter image description here

Without freehand:

enter image description here

With freehand enabled:

enter image description here

edited Jul 16 '15 at 20:41

answered Jun 21 '15 at 17:39

DavidPostill

171
8

Those are a lot of userscripts! One last thing before I start checking the code: can you disabling them? The main ones are SOUP, Comment Separator Fix and Threading comments? Those might be conflicting (or it might just be my bad CSS :) – ᔕᖺᘎᕊ Jun 21 '15 at 17:47
All 3 disabled, no change. I assume I don't need to restart browser but just reload page (which I did)? – DavidPostill Jun 21 '15 at 17:51
Never mind! I've reproed it in Firefox. I'll see what I can do! When it's fixed, I'll give you a ping :) But till then, you can use the functionality of the script! Just not the design... :( I think it's the right:10px; causing it - but as I said on Meta - I can't update anything today! I will do ASAP though :) – ᔕᖺᘎᕊ Jun 21 '15 at 17:53
After a closer look I see a small problem. The edit andsavebuttons are on top of (so obscuring the image) :( Question updated with new screenshot. In addition the save button is often not working ... eventual error along the line of image upoad not working or something. – DavidPostill Jun 26 '15 at 22:23
Hmmm.. I didn't think of that! I'll relocate the buttons ASAP. BTW when it fails, could you please check in the console whether there was an error - that way I can tell you what exactly is the problem! Thanks :) – ᔕᖺᘎᕊ Jun 27 '15 at 09:28
2 warnings in the console after I click save (and nothing gets saved). See screenshot. – DavidPostill Jun 27 '15 at 09:42
OK - I receive that as well, and I don't think I can do anything about that. However, is there a Network tab in Firefox's dev tools? If so, can you go on that, then click save, and look at anything red or that's errorred out? Thanks! – ᔕᖺᘎᕊ Jun 27 '15 at 09:46
Let us continue this discussion in chat. – DavidPostill Jun 27 '15 at 09:48
Sorry! I forgot to update you - I looked into SOUP's changes and couldn't find anything that would cause the image to change size... However I just though of another place I might be able to check to see how to fix it - I'll get back to you by tomorrow – ᔕᖺᘎᕊ Jul 16 '15 at 17:58
BTW Would it be possible for you to raise an issue at Github? It's much easier to manage over there! :) – ᔕᖺᘎᕊ Jul 16 '15 at 17:59
Nope sorry - I still can't see which fix causes the bug! – ᔕᖺᘎᕊ Jul 18 '15 at 09:07

score 2 · Answer 2 · edited Jun 27 '15 at 16:06

2

status-completed!

This looks really neat! I'm glad to see that someone has brought my original idea back to life and your code looks a lot cleaner and simpler than mine :)

I tried running the script with Greasemonkey in Firefox 38.0 on Ubuntu 15.04 but wasn't able to get it to run out-of-the-box. I was able to make an adjustment to get it running, however.

jQuery (and consequently $) are not available to the script, so it runs into errors as soon as it hits the first line. Although in older versions of Greasemonkey, you could simply do:

var $ = unsafeWindow.jQuery;

...this no longer works and it is far easier to simply include jQuery itself in the script:

// @require http://code.jquery.com/jquery-2.1.4.min.js

(That line should be added right after the @match directives.)

edited Jun 27 '15 at 16:06

ᔕᖺᘎᕊ

4,365
2
15
35

answered Jun 20 '15 at 21:32

Nathan Osman

23,286
11
60
107

Whenever I require jQuery, everything breaks in Chrome! Which is why I generally leave it out and let Tampermonkey use SE's jQuery. However, I just installed Firefox, so I will try it out... bear with me :) – ᔕᖺᘎᕊ Jun 20 '15 at 21:33
How exactly does Chrome break? – Nathan Osman Jun 20 '15 at 21:34
OK - it works in Firefox and Chrome if I require Fabric.JS and require jQuery... I swear that wasn't working this morning! – ᔕᖺᘎᕊ Jun 20 '15 at 21:45
I've updated the script - please can you update and check if it works now? Thanks :) – ᔕᖺᘎᕊ Jun 20 '15 at 21:48
You can update now to get multiple brush colours and a slider to change the brush thickness :) – ᔕᖺᘎᕊ Jun 28 '15 at 10:31

score 2 · Answer 3 · edited Nov 08 '15 at 15:17

2

status-completed - fixed in v1.0.7

Now, you can't seem to be able to change it properly if you use the new [![][1]][1] format.

Try it here:

However, if you use the old format, it still works:

edited Nov 08 '15 at 15:17

ᔕᖺᘎᕊ

4,365
2
15
35

answered Nov 07 '15 at 13:59

Universal Electricity

393
2
9

Blech it edited both images because they use the same source? – Universal Electricity Nov 07 '15 at 14:02
Hmm, I thought this was fixed in v1.0.6 (see the change log), but I'll check to see if it hasn't :/ Bit busy today, so might be tomorrow! :) – ᔕᖺᘎᕊ Nov 07 '15 at 14:32
Fixed in v1.0.7 (was broken for Firefox only) – ᔕᖺᘎᕊ Nov 08 '15 at 15:10

score 1 · Answer 4 · edited Jun 18 '20 at 08:33

1

status-completed

The buttons cover images in tags:
enter image description here
You just can't see the tag or the image.

Here's the tag.

edited Jun 18 '20 at 08:33

Community

1

answered Jul 15 '15 at 14:09

Universal Electricity

393
2
9

images in tags!? Didn't know that existed! I'll try to look at it and push an update out in the next few days :) – ᔕᖺᘎᕊ Jul 15 '15 at 14:10
I've updated the script at github – ᔕᖺᘎᕊ Jul 16 '15 at 11:09

Freehand Circles Drawing Tool

What is it?

How do I use it?

Install

Notes

Change log

4 Answers4

Linked