Posted under General
Bug: When I click and drag to create a note, and it gets resized automatically, it's offset to the right and down. The size is correct and the position is close, but always offset.
Edit: Upon closer inspection, this is because the posts I was trying it on were resized (with the JS "fit images to window", not sampled). The position is correct for the full sized version, but does not adjust itself to account for the resize.
Updated
Type-kun said:
Also, a feature request :3 Could you make something like a, uh, "callable" box with multiple textareas, allowing to edit all the notes / easily delete some of them? This is necessary sometimes, as "go to note - edit - save - repeat again" routine is slow and tedious.
I agree the open/edit/save routine could be improved.
Not sure what you mean though. A button "edit all notes" that opens something like a big sidebar containing all the textareas of the normal note edit windows?
When editing more then 1 note at once, how will you keep track what text belongs to what note? (especially if there are a few note with the same text)
I could try & make a hack-ish line connecting textareas to notes. (It would involve a few 1000 1*1px div's with backgroundcolors xD)
A idea i have in mind: small/medium sized transparent buttons, tacked on the top-left side of the note boxes (half inside the box, half outside?), as quick access to "delete", "open" & "resize".
They would only be accessible with shift-click. Does not apply to ghost notes.
Toks said:
Bug: When I click and drag to create a note, and it gets resized automatically, it's offset to the right and down. The size is correct and the position is close, but always offset.
Edit: Upon closer inspection, this is because the posts I was trying it on were resized (with the JS "fit images to window", not sampled). The position is correct for the full sized version, but does not adjust itself to account for the resize.
Fixed ~ very helpful you already found the source of the problem :)
On a technical note, all variables called border* are now called line* & 'killBorders()' is 'findLines()'.
A button "edit all notes" that opens something like a big sidebar containing all the textareas of the normal note edit windows?
Yep, just like that. Maybe under/over(transparent) the image, rather than sidebar.
When editing more then 1 note at once, how will you keep track what text belongs to what note?
Didn't think about that :3 How about, when textarea gets focus, corresponding notebox is highlighted (like, box becomes green instead of pale-yellow).
Type-kun said:
Yep, just like that. Maybe under/over(transparent) the image, rather than sidebar.
Making textareas transparent isn't a good idea, the text inside them becomes much harder to read.
I prefer sidebars, as they can be scrolled more easily (mousewheel).
This edit area will be pretty huge though - at least the size of 2-3 notes on top of each other (400-600px) for sidebars, or next to each other for top/bottom bars.
Putting it on the left side to block as little of the image is possible, with the Note Assist jumping either below it, or to the top-right corner depending on the browser height? I have about 900px vertical space in my browser. With more features, i can see the Note Assist window take up 200~300px.
Type-kun said:
Didn't think about that :3 How about, when textarea gets focus, corresponding notebox is highlighted (like, box becomes green instead of pale-yellow).
That'd work. For long images it'd involve automatically scrolling the screen.
As for synergy with the ghost notes.. by default (when opening the "edit-all"), ghost notes are not added. While "edit-all" is open, they can be added with a (shift) leftclick? This would also instantly turn them into normal notes.
Edit; 2 questions
Either:
<font color="red">Text</font> <b><font color="red">Text</font></b> <b><i><font size="+1" color="red">Text</font></i></b> ...
Or
<span style="color:red;">Text</span> <span style="color:red; font-weight:bold;">Text</span> <span style="color:red; font-weight:bold; text-decoration:underline; font-size:166%;">Text</span> ...
Both blocks do exactly the same.
The first one is generally a lot easier to use for non-coders, and probably more wide-spread since it's older.
The second one is more complicated, but newer/faster/has more features.
Current idea:
Updated
v0.6:
- first time pressing 'N' now just opens the Note Assist without starting note creation mode (can be disabled - see the instantNote setting)
- generate-all now attempts to avoid text already covered by notes.
- Added buttons to apply text decoration: 'Bold', 'Italic', 'Color' (with eyedropper), 'Background-color' (with eyedropper), 'font size' and 'translation note'.
A few questions ~
Bugs:
itsonlyaname said:
- About the 'instantNote' note setting, do you prefer the current default behavior, or the previous one? I chose that default value as it's quite handy when you want to get the menu popup, without instantly creating notes.
When I press N, I want to create notes. So I prefer the old behavior.
itsonlyaname said:
- in notes, what kind of style/formatting is prefered?
When typing manually, I always use the former of the two styles since it's faster to type. The latter at first seems good if I'm not typing manually, but it may seem more cluttered and confusing when going back to edit notes.
It might be easier to maintain notes created with the former style.
itsonlyaname said:
'Color' (with eyedropper), 'Background-color' (with eyedropper)
This is great.
Additionally, would it be possible to include the ability to edit the HSV of the color after using the eyedropper? I pretty much always need to bump up the saturation to get a color that's clearly visible on a white background (and occasionally tweak the hue).
itsonlyaname said:
Also try the "noteAssist_noteButtons" option in advanced settings, it looks horrible but it adds buttons to resize already-existing notes.
Sorry, but where are the buttons supposed to appear? I can't find them after enabling it.
Edit: Oh, I guess the green/red things are them? They only appear when I first load a page or hard-refresh it, for some reason. If I soft-refresh it they will disappear.
Updated
Toks said:
Bugs:
- The "Install" link on the userscript page leads me to a blank page. (I installed by just copy/pasting the source.)
Seems like they were having overall site problems, i got errors when trying to update as well.
Toks said:
- I tried saving a note, and it disappeared completely. When I refreshed the page, it had been saved at 0,0 (upper left). I've only seen this once, so I unfortunately don't know what causes it.
Not a clue, looks like it was just a normal note in the middle of an image.
Toks said:
- When the eyedropper mode is active, clicking the image should not create new notes nor toggle notes on/off.
I'll take a look at it, but disabling/re-enabling events is a mess, even with jquery..
Toks said:
- The UI menu appears below note boxes (z-coordinate-wise).
Fixed
Toks said:
When typing manually, I always use the former of the two styles since it's faster to type. The latter at first seems good if I'm not typing manually, but it may seem more cluttered and confusing when going back to edit notes.
It might be easier to maintain notes created with the former style.
It's a change, but anything is better then using <font>, considering browsers see that tag as deprecated/obsolete (and thus, more prone to breaking).
People have been using <span>'s for a while, mainly because <font> doesn't support background-color, or the rare text shadow / mirroring text.
Toks said:
itsonlyaname said:
'Color' (with eyedropper), 'Background-color' (with eyedropper)
This is great.
Additionally, would it be possible to include the ability to edit the HSV of the color after using the eyedropper? I pretty much always need to bump up the saturation to get a color that's clearly visible on a white background (and occasionally tweak the hue).
Sounds good, I've seen people say similar things.
Properly tweaking HSV would probably require a full editor though, something like (image), which feels like it'd take a lot of space / time to code.
How about simply making the color gotten from the eyedropper about... 10~20%? darker?
Toks said:
Sorry, but where are the buttons supposed to appear? I can't find them after enabling it.
Edit: Oh, I guess the green/red things are them? They only appear when I first load a page or hard-refresh it, for some reason. If I soft-refresh it they will disappear.
Yea, they aren't fully implemented since I'm not sure what to do with them.
Maybe I'll replace with smaller buttons, attached to the left side, half overlapping the note box. (+ some other quick buttons - all buttons accessible with shift-click only)
Updated
itsonlyaname said:
Properly tweaking HSV would probably require a full editor though, something like (image), which feels like it'd take a lot of space / time to code.
How about simply making the color gotten from the eyedropper about... 10~20%? darker?
Take a look at http://jqueryui.com/slider/#colorpicker - this way is simple enough. It's RGB though, moving it to HSV would require some math.
Type-kun said:
Take a look at http://jqueryui.com/slider/#colorpicker - this way is simple enough. It's RGB though, moving it to HSV would require some math.
That looks simple enough, I'll move the colorpicker/preview to a new box.
Larger preview, a slider to adjust brightness and some sample text that instantly gets colored.
At least, if a brightness slider is enough - HSV is kind of a pain to calculate (i can always import someone else's code though).
Finally got to actually test it. It's even better in action than it is in theory :3
Suggestions:
1) Can you move text coloring controls inside the actual note edit box? I think they belong there.
2) SO misses the control to resize an already-existing note to fit the text. Maybe also inside the edit box.
UPD:
Oh, and also 3). Could you make an option to override note creation behavior? Instead of "N + click or drag to create" -> "drag to create notes, click toggle notes, disregard small(accidental) drags as clicks, no keyboard involved". Maybe this should actually be in the main code, though.
4) I see no way to close note assist window except refreshing the page
Updated
After pressing one of the buttons (eg. Italic), could the cursor be positioned inside of the html tags, instead of having the entire content selected? That would be more convenient so I could start typing instantly, instead of manually repositioning the cursor constantly.
itsonlyaname said:
Yea, they aren't fully implemented since I'm not sure what to do with them.
Maybe I'll replace with smaller buttons, attached to the left side, half overlapping the note box. (+ some other quick buttons - all buttons accessible with shift-click only)
What I'd like to see is a button you can click to instantly resize all existing notes. By "resize", I mean what it does automatically when you drag to create a new note.
itsonlyaname said:
Not a clue, looks like it was just a normal note in the middle of an image.
Turns out that's actually a bug with the site, not your script. issue #1623
v0.8
- Moved eyedropper preview to below the buttons
- Added preview text to the eyedropper function
- Fixed rare bug where note could be 1-2px out of the image
- Added 'x' button to close the Note Assist window
- Changed "instantNote" setting to default "true"
Haven't had much time to sit down & code lately...
No slider to adjust colors (yet?).
.
Type-kun said:
Suggestions:
1) Can you move text coloring controls inside the actual note edit box? I think they belong there.
That should be possible, but the layout could be tricky. The eyedropper preview is way to large to add to the note edit box so we'd end up splitting the button and the preview.
Type-kun said:
2) SO misses the control to resize an already-existing note to fit the text. Maybe also inside the edit box.
Try the "noteAssist_noteButtons" setting, the buttons look kinda horrible though.
Type-kun said:
UPD:
Oh, and also 3). Could you make an option to override note creation behavior? Instead of "N + click or drag to create" -> "drag to create notes, click toggle notes, disregard small(accidental) drags as clicks, no keyboard involved". Maybe this should actually be in the main code, though.
issue #1496 :)
Type-kun said:
4) I see no way to close note assist window except refreshing the page
*Added a button*
.
Toks said:
After pressing one of the buttons (eg. Italic), could the cursor be positioned inside of the html tags, instead of having the entire content selected? That would be more convenient so I could start typing instantly, instead of manually repositioning the cursor constantly.
That is possible, but i feel that might not be desired in some cases. Like, when trying to use both "bold" & "italic", or "bold" then "color".
Toks said:
What I'd like to see is a button you can click to instantly resize all existing notes. By "resize", I mean what it does automatically when you drag to create a new note.
Would this still be needed if the resize buttons changed to be much cleaner and smaller? (so they won't get in the way even if the setting is always active)
I'm starting to think the script is pretty much ready/stable. Of course there will always be maintenance/bugfixes/feature requests, but the core part seems to work pretty well now.
This heavily depends on feedback though, since i very rarely actually use my script :p
I don't really have any more idea's to further improve the text-detection code (tons of performance improvements left, but it's not so fun to re-write code for the 10th time)
Updated
itsonlyaname said:
That is possible, but i feel that might not be desired in some cases. Like, when trying to use both "bold" & "italic", or "bold" then "color".
I'm probably overlooking something, but I don't see why it would be bad in those cases. It just needs to go inside the innermost tag.
itsonlyaname said:
Would this still be needed if the resize buttons changed to be much cleaner and smaller? (so they won't get in the way even if the setting is always active)
Oh, so that red button actually does resize it to fit. I thought the buttons just resized it by a fixed amount (which wouldn't be particularly useful). In that case, they would be reasonable once they're more usable.
Toks said:
I'm probably overlooking something, but I don't see why it would be bad in those cases. It just needs to go inside the innermost tag.
Ah, now i see what you mean. The current detection is a simple "if text is selected -> apply to that text // otherwise -> apply to whole note".
Changing it to something like "any selected texted? if not -> find if the cursor is inside any tags? if not -> apply to whole note." would work fine i guess.
Oh, so that red button actually does resize it to fit. I thought the buttons just resized it by a fixed amount (which wouldn't be particularly useful). In that case, they would be reasonable once they're more usable.
Toks said:
Oh, so that red button actually does resize it to fit.
Yep, red resizes, green expands by 5px all sides. Those buttons are what i used to test the code before mixing it with click & drag.
Edit box after some tampering: http://puu.sh/315Lg.png
The hook looks simple enough:
if (Danbooru.meta("current-user-name") !== "Anonymous") {
$(".note-body").unbind('click');
$(".note-body").click(function(e) {
var $note_body_inner = $(e.currentTarget);
Danbooru.Note.Edit.show($note_body_inner);
$(".note-edit-dialog .ui-dialog-content").before("<div id='customcontrols' style='text-align:center'></div>");
$("#customcontrols").append('We can have nice things');
e.stopPropagation();
})
}. The buttons doesn't work yet though, I presume they should be rendered in the separate document fragment, bound to events and then attached.