Ubiquity Photo Editor: A Sketch
The open Web has no good way to edit images. There are tools like Picnic, Sumo, and Aviary, but they all revolve around proprietary tools and destination sites. Making graphical edits is a fundamental action that should be available anywhere you see an image on the web.
Using Ubiquity as a platform for innovation, here is what an browser-based image editor might look like:
How You Use It
(1) Place your mouse over an image, or select it.
(2) Bring up Ubiquity and use the “edit” command. Alternatively, right-click to get a context menu or use the to-be-implemented mouse-based version of Ubiquity. This brings up the full-screen editor.
(3) The full-screen editor has four major areas arranged along the top: reshape, develop, effects, and done. Reshape gives you the basics of resizing, cropping, and rotating the image.
Develop let’s you fiddle with the contrast, hue, saturation, color curves, etc. Effects are for turning a photo into a reprise of the end of 2001: A Space Odyssey. The sub-actions take place down the right-side of the screen in a non-modal way, and are dependent on which of the four top actions has been selected. The interface takes some inspiration from Adobe Lightroom.
(4) When you are done editing a photo the tricky part begins. Most pages aren’t read-write (although, in the original web browsers of yesteryear they were). To “save” we are going to have to do something clever.
We can put the image back into the page, by replacing the image with the new one as encoded by a data URL. From there, you can right-click to save it or, if it is in an email, just send it off. The browser can even annotate the page locally so that when you browse back to the same page, you see your modifications, just like the “edit-page” command does in Ubiquity now. Of course, those changes won’t be shown to the rest of the world.
The other options, besides simply downloading it to your computer, is to save it by sharing it via social networking sites like Facebook, FriendFeed, or Flickr. Flickr currently accepts POST requests for uploading modified images. Hopefully, as time goes on and image manipulations becomes a more integrated part of the web, more and more sites will think of their content as user-mutable.
Using Open Web Technology
As the prolific Jacob Seidelin has shown, canvas is able to support a full range of photo-editing capabilities. You can see some of those capabilities in action with his canvas-based library Pixastic.
Jacob will begin leading work on a Ubiquity-based editor in around a month. I’m super excited to see where it goes. We’ll keep you posted.
If anyone else wants to get involved, join us.
RT @azaaza Ubiquity Photo Editor: A Sketch | Follow @azaaza on Twitter | All blog posts
Tags: photo editor, ubiquity
Greg
Nice concept, two things you could do to advance this idea:
- Make it possible to paste an image from the clipboard into a content editable region as a data image.
- You could make a possible to set the data of a DOM object as the contents of a form field. This would allow a post-back for edited images.
Jigar Shah
Absolutely stunning…!! I it would be great if it can integrate with pencil addon :)
Jigar Shah
Just had a question. Why Ubiquity and not a standalone addon ? So that we don’t have to restart Browser ? Does Ubiquity gives a glimpse of future of addon in FF :) ?
Aza Raskin
@Jigar. Why Ubiquity? Because it enables quick iterations and a modular place to put functionality. It’s a platform that enables innovation. It is also an experiment into news ways of extending Firefox.
That said, there is no reason why — when done — it can’t be ported to a stand-alone add-on.
gozala
Really really cool idea, not just because we need a photo editor integrated into ubiquity :P
I really liked the way of interaction. What I’m wondering is where all this controls are loaded in ?? I mean in the dom of the page where image was originally or is it loaded in ubiquity preview ??
Antoine Turmel (GeekShadow)
Very nice :)
Do you yet try Ubiquity-Songbird ?
http://addons.songbirdnest.com/addon/1424
Andrew
Very interesting idea. Eventually, the same idea can be applied to making an in-browser a 3D CAD app using JS and Canvas. I’ve commented on this idea to Jacob Seidelin; there doesn’t seem to be any technical barriers to making an app like this.
sep332
Would this be implemented as a series of Ubiquity commands? I want my photo editor extensible with 3rd-party and custom filters and effects.
“gaussian blur 1.5 this”
“content-aware resize 50%” (content-aware is hyphenated in English)
Eric
Love the idea of Ubiquity.. and I really want to try it out. However I can’t live without Enso for most every day things in AND outside of Firefox. It seems like it might be overkill to have them overlap.
So this brings me to my question. Why Ubiquity over Enso? Ubiquity is limited to Firefox while Enso is not limited to any one program.
Besides, it seems to me that Enso has the potential to do just about anything -including what Ubiquity does- if only it continued to be developed.
Forgive me if I am totally off.. there may be a technical aspect I’m not seeing.
Anyway, props on the app. Looks like it’s coming together wonderfully.
ChrisJF
Wow that is really impressive! Can’t wait to use this.
Also, I know this is really nitpick-y and is just one particular use case but I’ll explain it anyways.
I think the #1 reason I do image editing is for screenshots. First, I take a screenshot, edit it, and then post it on the web (Twitter, blog, etc).
You have the editing and posting part down pat. However, it would be really nice to have the “screenshot” keyword built into the edit command. For example, type “edit screenshot” or “take and edit screenshot” so that Ubiquity would take a snap of your screen and start editing that image.
As well, having a blur feature in the effects tab to blur out personal information in screenshots would be really handy.
Seriously though, editing images is an amazing idea for a Ubiquity command. Really excited!
Aza Raskin
@ChrisJF, @Greg: Those are great ideas. I’ll amend the post appropriately. Being able to say “take screenshot and then edit it” would be wonderful!
Funtomas
Great indeed! However, before the tool gets materialized, peek at Rotate Image add-on and Mouse Gesture Redox, and make sure to install costom-built mouse-gesture (http://www.mousegestures.org/exchange/details.php?mappingID=185) to rotate an image directly on a page with your mouse only. Simple UI, powerful command. Exactly what I expect from Ubiquity.
l.m.orchard
Hook this sucker up to speech recognition, and we can finally have that image enhancement rig Deckard had in Blade Runner!
børge
“The open Web has no good way to edit images”
I agree that this is a problem! But I don’t think building this into Ubiquity is the solution! In my eyes this feels like bloating it with functionality that has nothing to do with what Ubiquity is all about. Kinda like making a calculator, that’s also a bicycle. What’s the point?
Much rather I’d like to see you take these Free and Open image editing technologies and create a website like Picnic et al., so that we get an Open way of editing images, that is available from any browser. Don’t get me wrong; I love Firefox, and want as many as possible to use it. But still I think that those who choose to use another browser is fully entitled to that, and should still have the option of using an Open, online photo editor!
Making a website instead will make it more available (which is important for Free/Open tools, no?) and will not bloat Ubiquity/Firefox for those who don’t find a browser the best tool for editing pics.
Thomas S
I agre with Børge, Make a open photo editor, but put it on the web (and make a Ubiquity script that integrates it with firefox) :-) – this way Ubiquity will not get bloated, and the ones that don’t have Fx/Ubiquity will have the benefit of a open editor.
Andreas Tolf Tolfsen
I actually don’t think it’s such a bad idea. However, I think the functionality should be limited. By that I mean, that I prefer using my favourite image editor to edit images, I prefer my own MUA to send e-mail, I prefer my own foo to do bar, and so on.
Perhaps I am missing the point, but this is what Ubiquity is all about? Making thing simpler, and more straight forward. That’s why I think simple tasks, like measuring up a selected area of a picture for saving, or sending in an e-mail, posting to a website, to a form file upload field, or similar, might be a good idea.
Other tasks, apart from selection, could be scaling, rotation, and so forth: Simple tasks you might want to have done quick. There should be options for saving the image to your hard drive, but also simple commands to just rotate or zoom (scale) in on pictures on web pages easily. No web browsers allows this today.
Robert
I just want Ubiquity to resolve some of its bugs and implement itself better in the browser. Things like making it to where I don’t have to have the url bar or bookmarks bar and I can just type and go. Also I don’t wanna use growl so an option to not use growl in mac would be great. I hate the idea of a website centered around an editor because I have gimp, or photoshop so why go there. I actually do like the idea of in browser but how complicated is it really going to be.
Hrishikesh kale
Hi,
r u planning to provide support for editing images on hard disk?
Hrishikesh kale
Take a screenshot is quite difficult thing to achive as you need to specify the window which you want in the screenshot. Its obvious that i dnt want to take screenshot of ubiquity command prompt. Rather you can open the screenshot whenever print screen button is pressed. But for both of these cases you have to build an os dependand xpcom component or npapi plugin. Does ubiquity support such support for component?
Braydon Fuller
This could only be useful for minor edits. To get the full effect, why not just open the image in GIMP directly over ftp and edit it, and switch between the windows to see it in it’s place. The only trouble with that is there are about 5 things in the way to doing it, going to the server, going to the right directory, finding the image, opening it. All that’s usually still worth it though. The best would be if you could say edit, it would recognize the site’s ftp info, login using your stored password, download the file, and open it in GIMP where all changes would be saved back to the FTP. It’s too restricting to put everything in one application.
sep332
I wonder if this could be extended to video, something like http://www.xtranormal.com/ ?
Philip Ganchev
I totally agree with Eric. Why make it specific to a browser (even one type browser!)? Why not extend an app like Enso, that works with any app? This is much like what Jef Raskin’s lamented in his book, about having different spell checkers in different apps. Now we will have app-specific image editors.
عرب نار
اكبر موقع سكس عربي افلام صور قصص سكس
عرب سكس جنس عربي
عرب جنس : اكبر اضخم موقع سكس عربي عرب جنس افلام سكس صور سكس قصص سكس مجانا
Emily
http://www.azarask.in, hwo do you do it?
Photo Editing
This is an excellent and informative work, this will really helpful for me in future. I like the way you start and then conclude your thoughts. Thanks for this information .I really appreciate your work, keep it up.
Zayıflama Lida Fx15 Ve Biber Hapı Zlfvbh
Just had a question. Why Ubiquity and not a standalone addon ? So that we don’t have to restart Browser ? Does Ubiquity gives a glimpse of future of addon in FF :) ?