Photo editing with Ubiquity
This is the first release of the new image editor that has actual Ubiquity functionality. Yay. In my previous post I introduced a new JavaScript image editor based on my Pixastic image processing library and let you play around with a "static" demo version. Now I've made a few Ubiquity commands that lets you take the editor with you around the web and edit any image you want.
When the commands are executed a whole bunch of JavaScript is injected into the page which then takes care of setting up the editor, loading CSS, images, etc (about 100KB gzip'ed, everything included). All these assets are currently fetched from www.pixastic.com, maybe they'll eventually be bundled with Ubiquity.
Once you've got Firefox 3.5 and the Ubiquity extension up and running you can subscribe to the commands at http://www.pixastic.com/ubiquity/. This will add the commands![]()
elements are supported, I don't know if support for background images will be added at some point. I'd also like some more UI feedback when in this "image selection" mode, and possibly allow for selecting an image with the mouse prior to command execution.
Since the screenshots are always bigger than the image viewport in the editor, I've implemented some zoom functionality. There are just a few different pre-defined zoom levels and it doesn't allow for much zooming in, it's not very pretty anyway due to the interpolation when rescaling images in the browser. You'll see the current zoom level in the top left corner, some buttons or something for zooming in/out will be added later but for now you can use the mousewheel.
So you'll notice in the "Done" tab that there's now also an "Upload to Flickr" option where, with just a few clicks, you can authorize the editor with Flickr and then upload your edited image. It shouldn't be too hard to figure out. An authentication window is opened where you'll have to grant Pixastic the necessary privileges, you then confirm the authentication back in the editor and if all is ok, you can then fill in a few image details and begin the upload. It's all a bit rough around the edges and it needs a bit more work, better feedback to the user, more image info fields, etc.
A feature I might try to implement is to register if the original image was loaded from a Flickr photo page and then ask if the user wants to update the existing image or just upload to a new one. That shouldn't be too hard, I think. And of course more destinations, maybe Facebook and also something like ImageShack for quick and simple image hosting.
Most actions now let you apply them to a selected region of the image. Just drag a rectangular area on the image to make a selection. The selection stays active across actions until you click "Apply" on one of them, at which point the selection is reset.
To reduce the risk of forgetting to click "Apply" after setting the parameters for an editing action, the "Apply" button is now highlighted when any of the parameters are changed. If there are no parameters, eg. the invert action, the button will always be highlighted just as it will be for those actions where there are no "non-image-changing" default parameters (for instance the "mosaic" action, no value for the block size will leave the image untouched).
If you still manage to move on to something else without committing your changes, you can simply go back to the action you came from and the settings should be intact and ready for you to apply. I hope that's a reasonable compromise but I'm open to suggestions on how to improve the process.
Be sure to let me know what you think. And since the web is such a hostile environment there might some pages where things get messed up, just give me links so I can check it out.
So, have fun, I know I will. That special Roskilde Festival type of fun! Back in a weeks time. Read more...
Before we start
You should only use this with Firefox 3.5, anything older will probably not work at all (at least it didn't last time I checked). I haven't looked too deeply into it but I'm not sure it's possible to make it work for earlier versions due to some changes in security concerning the canvas image data acccess. That said, even with 3.5 this is still in the alpha stage and things occasionally fail.When the commands are executed a whole bunch of JavaScript is injected into the page which then takes care of setting up the editor, loading CSS, images, etc (about 100KB gzip'ed, everything included). All these assets are currently fetched from www.pixastic.com, maybe they'll eventually be bundled with Ubiquity.
Once you've got Firefox 3.5 and the Ubiquity extension up and running you can subscribe to the commands at http://www.pixastic.com/ubiquity/. This will add the commands
edit-image and edit-screenshot to your Ubiquity arsenal. The latest beta of Ubiquity supports hyphen-less commands but doing "edit image" seems to get mixed up with a Flickr search.
Image editing
Theedit-image command lets you edit any image on any web page using the Pixastic editor. Just execute the command and click on the relevant image to load the editor. Currently only Screenshots and zooming
The other command,edit-screenshot, does pretty much what it says. It takes a picture of the current page (only the visible portion and no browser UI) and then loads the editor using that image.
Since the screenshots are always bigger than the image viewport in the editor, I've implemented some zoom functionality. There are just a few different pre-defined zoom levels and it doesn't allow for much zooming in, it's not very pretty anyway due to the interpolation when rescaling images in the browser. You'll see the current zoom level in the top left corner, some buttons or something for zooming in/out will be added later but for now you can use the mousewheel.
Image upload and Flickr
Ubiquity allows the editor to do stuff it wouldn't normally have access to (eg. taking a picture of the current page, editing images regardless of where they're hosted, etc) which means it is also possible to post the image to any destination such as photo hosting services and what not. An obvious one to implement was Flickr since it's widely used and has a nice and detailed API.
So you'll notice in the "Done" tab that there's now also an "Upload to Flickr" option where, with just a few clicks, you can authorize the editor with Flickr and then upload your edited image. It shouldn't be too hard to figure out. An authentication window is opened where you'll have to grant Pixastic the necessary privileges, you then confirm the authentication back in the editor and if all is ok, you can then fill in a few image details and begin the upload. It's all a bit rough around the edges and it needs a bit more work, better feedback to the user, more image info fields, etc.
A feature I might try to implement is to register if the original image was loaded from a Flickr photo page and then ask if the user wants to update the existing image or just upload to a new one. That shouldn't be too hard, I think. And of course more destinations, maybe Facebook and also something like ImageShack for quick and simple image hosting.
Other changes since last time
Most actions now let you apply them to a selected region of the image. Just drag a rectangular area on the image to make a selection. The selection stays active across actions until you click "Apply" on one of them, at which point the selection is reset.
To reduce the risk of forgetting to click "Apply" after setting the parameters for an editing action, the "Apply" button is now highlighted when any of the parameters are changed. If there are no parameters, eg. the invert action, the button will always be highlighted just as it will be for those actions where there are no "non-image-changing" default parameters (for instance the "mosaic" action, no value for the block size will leave the image untouched).
If you still manage to move on to something else without committing your changes, you can simply go back to the action you came from and the settings should be intact and ready for you to apply. I hope that's a reasonable compromise but I'm open to suggestions on how to improve the process.
Have fun
In case you missed it, you can find the Ubiquity commands here where you'll also have a few images to play around with if you're too lazy to find some yourself.Be sure to let me know what you think. And since the web is such a hostile environment there might some pages where things get messed up, just give me links so I can check it out.
So, have fun, I know I will. That special Roskilde Festival type of fun! Back in a weeks time. Read more...
Grab colors from web pages with Ubiquity and Firefox
It has always bothered me when I wanted to grab the color code of some HTML element of image on a web page and I had to either dig through a whole bunch of CSS or take a screenshot and load up Photoshop or whatever. I'm sure somewhere someone has made a tool that lets you do something similar, but with Ubiquity and my new color grabber command I can now quickly put a page into color picking mode and grab any color I want, all from within Firefox.
The idea came to me while working on the new Pixastic image editor. One of the Ubiquity-specific features will be an "edit-screenshot" command that takes a picture of the current page and loads it up in the image editor. This is possible via the HTML5
So what you do is this. If you don't have Ubiquity installed, do that first. Then get the
You can now toggle Ubiquity (ctrl+space or whatever your command is) and type
The command has one optional argument that determines the format of the color returned to you, either "hex" or "rgb". So to get the color in
The idea came to me while working on the new Pixastic image editor. One of the Ubiquity-specific features will be an "edit-screenshot" command that takes a picture of the current page and loads it up in the image editor. This is possible via the HTML5
canvas element. While in normal web pages you can only paint regular images via the drawImage() method, running with Ubiquity's privileges also gives you access to a drawWindow() method that simply takes a window object instead. Pretty cool stuff. So that makes it rather easy to just grab a screenshot and use that in place of a regular image and, for this color picking command, to put the page in a "click somewhere" mode and then use the mouse coordinates to grab the pixel value from the screenshot image.
grab-color command here (notice the bar at the top and the "Subscribe" button in the top-right corner).
You can now toggle Ubiquity (ctrl+space or whatever your command is) and type
grab-color. And that's it. When you move the mouse over the page, the color under the pointer is displayed in a box and when you click the page, the color is prompted to you for easy copying.The command has one optional argument that determines the format of the color returned to you, either "hex" or "rgb". So to get the color in
rgb([r],[g],[b]) format, do grab-color rgb.
Read more...
