Tip:
Highlight text to annotate it
X
MALE SPEAKER: Shanghai GDG is a very
interesting developer community.
FEMALE SPEAKER: I'm glad somebody
has asked this question.
MALE SPEAKER: This is where the magic happens.
FEMALE SPEAKER: This is primarily a question and
answer show.
So if any of you out there would like to ask questions.
CLAUDIO CHERUBINO: Hi, everyone.
Welcome back to Google Developers Live.
I'm Claudio and this is Alain.
We're two engineers in the Google Drive Developer
Relations Team.
Today, we're going to talk about an application that
integrates with Drive and that is available in the Chrome Web
Store, that allows you to do image editing on the cloud.
We're actually going to show you two separate applications
from the same producer.
The two applications are called Pixlr
Editor and Pixlr Express.
As you can easily imagine, Pixlr Editor is more powerful.
Pixlr Express can be used to do quick
editing to your images.
But let's see how they work.
Let's move to the screen.
I just downloaded important wallpaper for my computer from
freewallpapersweb.com.
ALAIN VONGSOUVANH: Everybody needs a wallpaper.
CLAUDIO CHERUBINO: Yeah, everybody needs a wallpaper.
So let's see, I have this beautiful image on my Google
Drive account.
This is of course work related.
And I need to do some editing.
So I just clicked on File and it opened into Google Drive
default viewer.
But I previously installed this application
called Pixlr Editor.
So instead of opening the application from here, I can
do Open With and select Pixlr Editor.
ALAIN VONGSOUVANH: You can do it from here, or we can do it
back from the Google Drive web URI.
CLAUDIO CHERUBINO: Exactly.
And of course, Drive, Filter, to list some applications that
can open that file.
So if you have many applications installed, but
some of them open text files, some of them open images, and
some of them can open other kinds of files.
Of course, when you right click on an image, you will
only see the applications that can actually open images, and
Pixlr Editor and Pixlr Express are two of those.
So let's start with Pixlr Editor, which
is very, very powerful.
So when we click on a file, the image gets loaded into
this web interface.
As you can see, we have a lot of features here.
So some easy ones.
You can, obviously, resize images, you can add some
editing, you can make this image worse by drawing on it.
Want to try something?
ALAIN VONGSOUVANH: What to draw something?
CLAUDIO CHERUBINO: Yeah.
ALAIN VONGSOUVANH: What do you want to draw?
CLAUDIO CHERUBINO: Let's see, I don't know.
The sun.
Can you draw--
ALAIN VONGSOUVANH: A sun.
CLAUDIO CHERUBINO: Oh, a black sun.
That's really creepy.
OK, so Alain is definitely really--
what is that?
OK, OK, that's going to be my wallpaper for the future.
Thank you, Alain.
So as you can see, you have a lot of features here.
So you have a number of filters you can apply.
You have a lot of layers you can create.
You can resize the image.
You can make it bigger.
You can draw on it.
You can add text.
You have gradients.
What is it you're going to try now?
ALAIN VONGSOUVANH: You can select--
CLAUDIO CHERUBINO: Oh, use Magic Wand.
Oh, great.
I see you're very good at that.
What else can you do?
ALAIN VONGSOUVANH: Select this thing.
CLAUDIO CHERUBINO: OK, now what?
ALAIN VONGSOUVANH: I don't know.
CLAUDIO CHERUBINO: OK, well you're definitely very good.
So I mean there are actually people who can do something
with graphic applications.
Alain is not one of those.
And he's randomly pressing buttons and--
what is that now?
A filter.
You're applying a filter.
Why are you're doing that?
ALAIN VONGSOUVANH: Just trying to do that.
CLAUDIO CHERUBINO: OK, just trying that.
OK, let's say you made this image better, and you did that
by adding a smile.
Now, we want to save that to Drive.
Can we go back to real stuff?
ALAIN VONGSOUVANH: All right, sure.
CLAUDIO CHERUBINO: OK, let's say you want to
save back to Drive.
ALAIN VONGSOUVANH: So you go to Find, Save, and then you
have the option to save to Drive.
So we can save on the same image or make a copy.
CLAUDIO CHERUBINO: OK, and then you see this same
application, Pixlr Editor, can save to a number of different
online services.
Of course, you can export it to your local computer.
So you can have these jpeg files saved to your local
computer, and use it from there.
But if you want to save it to Drive--
you want to save to Picasa, Flickr, and other social
destinations--
you can do all of that from here.
So you save it.
And one thing we notice, because we're going to focus
more on, of course, on the Drive indication, is that, as
a default, you're saving it as a copy.
And of course you can set the quality.
What is the difference in saving as a copy or saying as
a new file?
ALAIN VONGSOUVANH: In Drive, as opposed to an online
[? circumstance, ?]
we can have many files with the same file name.
So if you save it is a copy, you have
two files named kittens.
CLAUDIO CHERUBINO: I see.
So let's see what happens.
Let's save it as a copy, and then when that is done, we go
back to Drive and see what we have there.
And what we're expecting is to see two different images, one
with a nice smile and one without.
And so, let's see, let's try to open one.
I see we have two.
ALAIN VONGSOUVANH: First one.
CLAUDIO CHERUBINO: And this is the original one, and this is
actually good.
ALAIN VONGSOUVANH: And this one.
CLAUDIO CHERUBINO: OK, you also set a very
low quality, I see.
ALAIN VONGSOUVANH: Yes.
CLAUDIO CHERUBINO: Obviously, Pixlr can do
much better than this.
You can select the quality you want, and I think you made a
very bad choice.
ALAIN VONGSOUVANH: No, I used the pixelate feature, so I
tried to do a [? [INAUDIBLE]. ?]
CLAUDIO CHERUBINO: I see, you are very good at that.
OK, so this is Pixlr Editor, and there are some things we
noticed that can be improved and integration between Pixlr
Editor and Google Drive.
So what we've seen so far is great.
Of course, you can also create a new image from scratch from
Google Drive by clicking on Create, More, and then you see
the list of applications we can create a file, including
Pixlr Editor.
So when we start from there, you can create a new image,
you can open an image from your computer, and so on.
Let's say we create a new one.
OK, you gave a name, and you can select a size for the
image, and then you can express your creativity now.
ALAIN VONGSOUVANH: All right, let's draw another smiley.
CLAUDIO CHERUBINO: OK.
That's the best thing you can do, right?
ALAIN VONGSOUVANH: Yes.
CLAUDIO CHERUBINO: OK.
This is beautiful.
Let's save it to Drive, because we want to store it
for future generations.
ALAIN VONGSOUVANH: Save to Drive.
There we go.
Extension jpeg, png.
CLAUDIO CHERUBINO: OK, so you have different extensions, you
can save to different formats.
OK.
ALAIN VONGSOUVANH: The good thing is that it let's you
know the approximate file size of the resulting image, so
[INAUDIBLE]
printing out of quota, you know before saving.
CLAUDIO CHERUBINO: Oh, perfect.
And of course we--
I mean, as image editors--
know with some files formats you can select a quality so
that you can make the file be bigger or smaller, but you
have better or worse quality.
So we've got this file in Google Drive, right.
So we have a new image.
OK, this is working perfectly.
But there's actually a scenario we've found that is
not perfect, and we wish Pixlr is going to fix it.
So when you install an application from the Chrome
Web Store--
and this is the listing for Pixlr Editor--
the application is added to the Chrome New Tab
page, which is this.
In the Chrome New Tab page, you get a link to all the
applications you have installed, including those
that integrate with Drive.
So you can start Pixlr Editor from here, and you start it
just by clicking.
And it seems the same.
It seems like the flow is exactly the same.
But now you create a new image.
You can select wherever you want here, as before.
You can draw something.
ALAIN VONGSOUVANH: All right.
CLAUDIO CHERUBINO: This time it's going to be sad.
ALAIN VONGSOUVANH: OK, why?
Oh.
CLAUDIO CHERUBINO: Because--
ALAIN VONGSOUVANH: We'll see why.
CLAUDIO CHERUBINO: --we'll see why.
So then you try to save, and you want to save it to Drive.
However, Drive is not included in the list of cloud
destinations you can save to.
So Pixlr behaves differently if you start from Drive or if
you start from the Chrome Web Store.
This is something that should be addressed for the best user
experience, as the user should have the same features
regardless of where they start from.
This should be very easy to fix.
I think it's just a small mistake.
And we will definitely reach out to Pixlr.
Maybe they're watching us right now, but
let's fix it guys.
OK.
ALAIN VONGSOUVANH: One other thing is
opening files from Pixlr.
CLAUDIO CHERUBINO: OK, another thing.
ALAIN VONGSOUVANH: You have the option to open image, open
image via URL, or open image library [INAUDIBLE]
system.
Unfortunately, Drive is not one of the options.
CLAUDIO CHERUBINO: Yeah, that's another
thing they can improve.
First, it's not a bug, it's not an issue.
But users might want to open a file directly from Drive.
This can be done by using the Picker API, which is part of
the Google Drive SDK.
And so they can easily embed the Picker dialogue in their
application, or they might want to list files into the
style of which they style.
So you have the two options.
Using the Google provided Picker is very easy, so you
only need a couple of lines of JavaScript
code and you get it.
But the [INAUDIBLE] will have the URI we designed it for.
While if you want to write that, and style it inside your
application, you can basically draw that yourself.
You have [? calls ?] to list all the files on Drive and you
can group them into folders, and so on.
You could do basically everything with the API, and
then you can embed it into here.
So we've got two feature requests for Pixlr from here.
Use or embed a Picker to open files directly from Drive.
And make sure that if the user starts from the Chrome New Tab
page or goes directly to Pixlr.com, these should be
allowed to save to Drive.
ALAIN VONGSOUVANH: That's correct.
CLAUDIO CHERUBINO: But besides that, I would say the
application is awesome.
Even, I mean, OK, not you, but even average users, like me,
they can do crazy things with Pixlr.
The application is very good.
And obviously, one of the main advantages is that you can use
that wherever you are on the cloud.
ALAIN VONGSOUVANH: On a Chromebook
CLAUDIO CHERUBINO: On a Chromebook, on whatever
computer you are, just log in to your account with your
credentials, and you have Pixlr there.
ALAIN VONGSOUVANH: You don't even need a desktop anymore.
You don't even need a hard drive, as all your files are
stored in the cloud.
CLAUDIO CHERUBINO: Yeah, that's absolutely true.
So we said that we have two applications to talk about.
Pixlr Editor is the advanced one.
It has a lot of features, really a lot.
So you have so many filters, and so many things you can do
in Pixlr, that a professional can use that and do a lot of
very good image editing.
But if you're not a pro, let's say you're Alain, you might
want to use another application.
Still by the same company, still by Pixlr, it is called
Pixlr Express.
ALAIN VONGSOUVANH: Let's open it.
CLAUDIO CHERUBINO: Let's open it.
So we're opening the same file, aren't we?
ALAIN VONGSOUVANH: Yes, the original kittens from the web.
CLAUDIO CHERUBINO: Freewallpapersweb.com.
So with this application, you can see the UI is really
simplified.
You have a limited number of features.
But still a lot.
But limited compared to the [? prop ?]
application, that is the one we just talked about.
And you can easily make changes to the image, applying
some filters.
You can crop image.
You can resize them.
You can apply some effects.
Let's try one.
Let's see how your creativity goes now.
You have black and white, dark kittens.
OK, I think we can do better.
For instance, one of the things I like, you can add
borders to the image.
OK, this is getting funky.
It's getting better and better.
Another option is to add borders.
So you have your photo, and you want to add a nice frame
around it, so you can do it from here.
And it's not going to be great now, because everything is
black and white-ish.
But you have a lot of very easy to use--
vintage kittens now.
How do we get this application if you want it?
ALAIN VONGSOUVANH: From the Chrome Store.
CLAUDIO CHERUBINO: So it's exactly the same thing.
So we go to the Chrome Web Store, and we will find Pixlr
Editor and Pixlr Express.
We sell both.
They have--
as all the applications on the web store--
they have a lot of reviews.
So then you can read about them before you install the
application.
Remember, reviews are by other users like you, so you should
probably trust them and read them before installing any
application.
We install that from here, and you can launch it from Google
Drive, but you can also launch it from here.
What happens if you launch the application from here?
ALAIN VONGSOUVANH: Let's try that.
CLAUDIO CHERUBINO: Let's see if it
behaves like Pixlr Editor.
ALAIN VONGSOUVANH: Obviously, we don't have any pictures
because we just opened the app from Chrome Web Store.
CLAUDIO CHERUBINO: OK, so we need to browse.
And what we would expect, what we would like to get, is that
you can open a file from Drive.
So browse doesn't let you do that.
ALAIN VONGSOUVANH: No.
CLAUDIO CHERUBINO: With browse, you browse your local
files, which is another important feature.
So that is not the case.
ALAIN VONGSOUVANH: So you can open URL.
CLAUDIO CHERUBINO: You can open a URL.
ALAIN VONGSOUVANH: From the web or use your webcam.
CLAUDIO CHERUBINO: So this is a feature that Pixlr Editor
doesn't have, so remember these two applications are
targeted at two different audiences.
So with this [INAUDIBLE] application, you can, I'd say,
fire up your webcam, take a photo, and apply some filters.
So maybe you need to create a new profile photo, this might
be the best application for you.
You can do that in 10 seconds.
And then you can add these very good special effects.
Both applications are installed into Drive.
So once you install them, you can right-click on any image
file and open an existing file, or we can do create, and
then select either of those, and then start a new image.
What are you trying to do now?
ALAIN VONGSOUVANH: I'm saving the image.
CLAUDIO CHERUBINO: OK, I want to see what happens now.
So now we have many copies of this wallpaper we got from
freewallpapersweb.com, and this is the
latest version of it.
This is amazing.
It's probably your masterpiece.
ALAIN VONGSOUVANH: So from Pixlr Editor, you can only
save a copy.
From Pixlr Express, you can only save a copy.
CLAUDIO CHERUBINO: That's save and replay, save and replay.
ALAIN VONGSOUVANH: I missed that, sorry.
CLAUDIO CHERUBINO: As you can see, the UI is simplified
compared to Pixlr Editor.
So instead of having a UI dialogue for saving, you have
two very specific buttons that say what they're going to do.
So you have one to save and replay, because of course you
might want to replay the existing one.
Or you can save a copy.
And everything you said about saving a copy for
Pixlr Editor applies.
And of course, you can--
I mean, the next one is to close it and that's it.
OK let's just go back to Drive.
And just to remind you before we wrap up, if you want to
start any of these applications, and you have no
image files on your computer, you can do Create, select
More, and you'll find all the applications we have.
ALAIN VONGSOUVANH: That's correct.
CLAUDIO CHERUBINO: OK, I think we're done.
We're basically done with Pixlr Editor and Pixlr
Express, two great image editors that
integrate with Drive.
ALAIN VONGSOUVANH: Two feature requests.
CLAUDIO CHERUBINO: Yeah, we have two feature requests for
Pixlr Editor, and I'm pretty sure they're going to be fixed
soon, because so far these applications are being
developed and adding new features very, very, quickly.
ALAIN VONGSOUVANH: And feature request for Pixlr Express
integrates with the Picker API as well, so we can open an
image from the application directly.
CLAUDIO CHERUBINO: OK, last thing before we wrap up.
If you are a developer, and you want to integrate with the
Google Drive SDK and you have technical questions,
where do you go?
ALAIN VONGSOUVANH: [INAUDIBLE]
under the tag Google dash Drive dash SDK.
We go through the questions almost every day, and try to
reply to all of them.
CLAUDIO CHERUBINO: Cool.
OK, so see you next time on Google Developers Live.
Thank you for joining us, and feel free to reach out to us
for any feedback.
Thank you.
[MUSIC PLAYING]