?

Log in

No account? Create an account
photo tagging app - brad's life [entries|archive|friends|userinfo]
Brad Fitzpatrick

[ website | bradfitz.com ]
[ userinfo | livejournal userinfo ]
[ archive | journal archive ]

photo tagging app [Oct. 29th, 2005|11:20 pm]
Brad Fitzpatrick
[Tags|, , ]

My javascript-crowning-achievement is live, but I have no good link for you....

It's the "Annotate" page linked off a gallery management page in either Scrapbook (available if you have a paid account) or PicPix (available if I gave you an account).

Features:

-- very quick/usable.
-- film strip animates when you click an icon, and centers the item in the visible area
-- tags smartly auto-complete. you can hit "," to accept a completion and move on to the next tag.
-- pressing enter saves the current tags/title/description, advances to next picture in given filter, and sets focus back on tags
-- tags data model adapts as you use it, reweighting priorities
-- can filter on All, Untagged, or Untitled
-- mouse wheel works on Firefox in the left filmstrip div, where it normally wouldn't, being a div.
-- no page heading... just breadcrumbs. don't waste your screenspace.
-- no scrollbars on page. utilizes your screenspace as best it can.
-- auto-chooses 320 or 640 version of enlarged preview for right side, depending on how big your browser's screen is. will chop off some from a 640, but at a certain points, kicks down to 320.
-- left hand filmstrip thumbnails lazily load when they come into view, so the page loads fast, and you can manipulate huge galleries without downloading a ton of thumbnails at once.
-- thumbnails lazily load even lazier when actively scrolling (in IE and Firefox), waiting 100ms for you to hold position before starting to load. (so scrolling around rapidly from top to bottom doesn't kick off 10,000 loads)
-- saves enqueue in background. you can see processing with a spinning hourglass next to each item. on any server error, saving is retried.
-- clicking big preview on right brings up pic management page in new window (or if you middle click, in new tab, if browser so configured)
-- works in multiple site templates (sounds easier than it was)

And that's just the obvious stuff I can think of. Tons of little details went into this, as it's the primary page I've wanted forever to annotate (tag/title/text) all my 10,000 or so pictures and (now supported) videos.
LinkReply

Comments:
(Deleted comment)
[User Picture]From: brad
2005-10-30 06:44 am (UTC)
Yeah, that'd be nice.
(Reply) (Parent) (Thread)
[User Picture]From: xaosenkosmos
2005-10-30 07:19 am (UTC)
Permit me a Keanu: whoa.

Sounds hot. How much of the codebase is libraries, and how much will we get to see as open source?
(Reply) (Thread)
[User Picture]From: brad
2005-10-30 07:27 am (UTC)
I'm trying to make everything into JavaScript libraries, but a fair bit of this app isn't yet.

But all of this is open source, because Fotobilder's open source.
(Reply) (Parent) (Thread)
(Deleted comment)
[User Picture]From: brad
2005-10-30 06:56 pm (UTC)
Looks like the browser submitted the form instead of it being handled by JavaScript.

Wonder if there's a race after setting innerHTML between you hitting enter quickly and it registering event handlers on the form. I'll check.....
(Reply) (Parent) (Thread)
[User Picture]From: banana
2005-10-31 06:16 pm (UTC)
Nice.

In Opera the Des: box renders just as a vertical scroll bar.
(Reply) (Thread)
[User Picture]From: grahams
2005-10-31 08:43 pm (UTC)
Pretty cool... Is there a similar tool for quick-editing tags for LJ posts? I've been retrotagging by using the previous/next buttons to go to the next entry and the clicking on the "edit tags" button, adding the tags, then saving them...

(Reply) (Thread)