Photo editing in the browser with Pixastic - revisited
A bit delayed, some progress has been made on the new Pixastic powered photo editor which will eventually find its way into the Mozilla Labs Ubiquity project. Here's a first preview of how the editor is going to look. It's still very alpha-ish and in a stage where I'm just trying to get something up and running, so wear your hard hats.
In very few words, the current situation is that I have an editor application running on the Pixastic library (the one featured on the Pixastic site doesn't actually use the library). There's no Ubiquity version yet (or rather, there is but it blows up every other time I run it), but I've made a test page with a few images that you can play around with.
In a lot more words, the main goals for this editor are:
Some JavaScript files obviously need to be included (in Ubiquity's case, they're injected when the command is triggered) and in its current form the application is then loaded in an
When it comes to saving, there are a few different options. The first - and most obvious when editing an in-page image - is to simply save the image back to the page. This is done by generating a
But with the cross-domain XHR abilities available from Ubiquity it should also be possible to post the image to something like Flickr or maybe Facebook. I've only just started looking at Flickr integration and I don't actually know if the Flickr API will even accept the image data - the
At the moment it only works in Firefox but the aim is to have it working in all appropriate browsers. That means Opera 9.5+, Safari 4 (and Chrome once it gets
Read more...
A bit delayed, some progress has been made on the new Pixastic powered photo editor which will eventually find its way into the Mozilla Labs Ubiquity project. Here's a first preview of how the editor is going to look. It's still very alpha-ish and in a stage where I'm just trying to get something up and running, so wear your hard hats.
In very few words, the current situation is that I have an editor application running on the Pixastic library (the one featured on the Pixastic site doesn't actually use the library). There's no Ubiquity version yet (or rather, there is but it blows up every other time I run it), but I've made a test page with a few images that you can play around with.
In a lot more words, the main goals for this editor are:
Embeddable
I want it to be as easy as possible to embed into an existing page. This ties in with the goal to make accessible it via a Ubiquity command since this also means that it has to be all ninja like and there shouldn't be any trace of it post-edit. On the other hand, I'd also like it to replace the editor on http://www.pixastic.com/ so it should also run as a stand-alone app, but that shouldn't be a problem if the aforementioned criteria is met.Some JavaScript files obviously need to be included (in Ubiquity's case, they're injected when the command is triggered) and in its current form the application is then loaded in an
iframe where the DOM is filled and all the necessary CSS is loaded, keeping the editor separated from the page from which it was loaded.
Extendable
Well, it's based on Pixastic which is itself pretty easy to extend with new actions. Even though the internal API has a few flaws, it's easy and flexible enough that adding new actions and effects requires very little effort besides the actual image processing code. I'd like it to be just as easy to add new functionality to the editor so I'm working on a format that allows adding the most basic controls (text inputs, sliders, etc) with very little code but at the same is also flexible enough that you can create something like the cropping tool.Load and save from/to anywhere?
Loading images is done programmatically at the moment but is as simple as calling loadImage(image) where image is an HTMLimg element. It would be great if it was possible to load up images from anywhere (other websites, Flickr albums, local images, etc), but same-origin security restrictions limit us to accessing images from the same host. There should be more freedom when running from Ubiquity and that feature would be more useful to have in the general case.
When it comes to saving, there are a few different options. The first - and most obvious when editing an in-page image - is to simply save the image back to the page. This is done by generating a
data: URI and setting the src on the original image element. Second option is to save the image to the user's computer. This can be done by either making a link with the data: URI for the user to right click or by triggering a download dialog. The last option would seem like the best but in order to do that, the mime type of the data: URI has to be altered and it seems that Firefox is then unable to figure out the actual format of the image and defaults to giving it a .png extension, so that's only good for saving PNG images. I'd like to also take advantage of some browsers' ability to generate both PNG and JPG data: URI's so at the moment I'm not sure what to do. Any suggestions?
But with the cross-domain XHR abilities available from Ubiquity it should also be possible to post the image to something like Flickr or maybe Facebook. I've only just started looking at Flickr integration and I don't actually know if the Flickr API will even accept the image data - the
data: URI is base64 encoded and it would be nice to not have to mess around too much with it since it can be quite big. I'll also have to look into what other online photo services are accessible.
Skinnable
To some extent the editor should be skinnable but I'm not going out of my way to make every detail customizable. In terms of layout I'm sort of going with Aza Raskin's Lightroom inspired proposal, at least for now. I'm using jQuery UI as a base for the UI elements, so all the theming that comes with that should apply here as well. It will likely end with a compromise with a somewhat fixed layout but color schemes and so on can be changed via CSS and jQuery UI themes if need be.Feedback
At this point I'm very much looking for feedback on just about every aspect (features, UI, usability issues, etc.), but a couple of specific things I'm thinking about/that were brought to my attention are:- The undo feature: How does it work for you with the vertical bar? Is it in the right place? Should it stay hidden until there's actually something to undo?
- Preview: On or off by default? I've hesitated turning preview on by default since JavaScript image processing can still be a CPU intensive task (especially with large images), even with today's fast JS engines. If processing was instant, I would have no problem making "on" the default state. Maybe turning it on/off once should toggle it for all actions (ie. globally)?
- Apply: You have to actively click "Apply" before anything actually happens to the image. If you select another action/tab without clicking "Apply", your changes are lost, followed by much frustration. It's been suggested that all changes are applied right away (since you can just undo them). I'm not sure if that's the right thing to do due to the way the UI works right now, but that might just be me being used to the extra layer of confirmation. Perhaps it would be better if the button was highlighted in some way as soon as there are any changes that would be lost?
So many words
Ok, go on and play with the preview. When you're done, please let me know what you think.At the moment it only works in Firefox but the aim is to have it working in all appropriate browsers. That means Opera 9.5+, Safari 4 (and Chrome once it gets
[get|put]ImageData support in stable.
Read more...
Nihilogic Games is now JavaScript Gaming
At some point I'd like the games portal to be able to live on its own and it didn't sit right with me that it was a subdomain of nihilogic.dk. So it now has a new home at http://www.javascriptgaming.com/, check it out. Nothing but the name has changed (yet), though. The games feed is also still the same. Happy friday!
Read more...
Games round-up for April 2009
I had hoped to get a good chunk of Brent Silby's games added to the games portal during April but I had to postpone that mission. Only one Silby game made it but fortunately a few other people were also kind enough to email me about their games. As always, just let me know if you know of a cool game that fits the profile.
3bored
A very creative and somewhat abstract
Read more about 3bored
Balloons and Droids
The only one of Brent Silby's games I got around to adding, Balloons and Droids delivers exactly what it promises - balloons and droids, all in good arcade style fun.
Read more about Balloons and Droids
Canvas Invaders
Yet another Space Invaders clone, made by Jason Brown to gain more
Read more about Canvas Invaders
Coverfire
A remake of the old Crossfire game - and it's Wii enabled.
Read more about Coverfire
mBlocks
Now, there are a lot (and I mean a lot) of Tetris clones out there but this one is so well done that it just puts most other attempts to shame.
Read more about mBlocks
Sarien.net
Sarien.net lets you play old Sierra On-Line adventure games in your browser and spices it up with some interesting multiplayer "action". Absolutely one of the coolest things I've seen in a while.
Read more about Sarien.net
Tetris Bricks Car Racing
Valentin Galea linked me to his nostalgia inducing racing game a'la Tetris, inspired by the handheld devices of yore.
Read more about Tetris Bricks Car Racing
Word Wombat
A fun way to hone your typing skills. Type the falling words before they hit the bottom of the page.
Read more about Word Wombat
Read more...
3boredA very creative and somewhat abstract
canvas-based shooter. If you ever wanted to be a white rectangle with the power of flight and bad odds of survival, this is the game for you.
Read more about 3bored
Balloons and DroidsThe only one of Brent Silby's games I got around to adding, Balloons and Droids delivers exactly what it promises - balloons and droids, all in good arcade style fun.
Read more about Balloons and Droids
Canvas InvadersYet another Space Invaders clone, made by Jason Brown to gain more
canvas experience.Read more about Canvas Invaders
CoverfireA remake of the old Crossfire game - and it's Wii enabled.
Read more about Coverfire
mBlocksNow, there are a lot (and I mean a lot) of Tetris clones out there but this one is so well done that it just puts most other attempts to shame.
Read more about mBlocks
Sarien.netSarien.net lets you play old Sierra On-Line adventure games in your browser and spices it up with some interesting multiplayer "action". Absolutely one of the coolest things I've seen in a while.
Read more about Sarien.net
Tetris Bricks Car RacingValentin Galea linked me to his nostalgia inducing racing game a'la Tetris, inspired by the handheld devices of yore.
Read more about Tetris Bricks Car Racing
Word WombatA fun way to hone your typing skills. Type the falling words before they hit the bottom of the page.
Read more about Word Wombat
Read more...
Canvas Cheat Sheet update
As zcorpan was so kind to point out, my Canvas Cheat Sheet wasn't quite up to date and I finally got around to fixing it up. Here are the links to the revised version:
PDF document
PNG image
Besides a few minor corrections the only significant change is that
PDF document
PNG image
Besides a few minor corrections the only significant change is that
createPattern and drawImage can both take HTMLVideoElements now.
Read more...
