Design a picture editor which can be launched from the slideshow

[oparoz]

From @oparoz on August 11, 2015 15:41

Wouldn't it be cool if we could touch up our pictures online or create memes or fix some flaws via filers, etc.?

I got the idea when looking at Pixlr:
https://support.pixlr.com/hc/en-us/articles/209350978-The-Pixlr-API-embedding-Pixlr-web-applications-in-your-own-site

Some question I had

• Should it be in Gallery or a separate ownCloud app?
• Is it problematic that the UI looks different? That it uses Flash?
• Any alternative with a nice API?
• Should some processing happen on the backend (PHP)?

Ideally

• Works both on desktop and mobile, but it's not a problem to drop mobile support if we have to make too many compromises
• Pure Javascript solution which uses the canvas (no data leak by using 3rd party services)
• Configurable UI via CSS so that it looks integrated

Also, I don't think that we need to add super advanced features. Something like "Paint" would be enough. Of course if the library supports more features and these can be enabled on demand, then that would be a nice bonus.

Example features

• Filters
• Cropping
• Resizing
• Rotating
• Text
• Frames
• Layers
• Red eye removal
• Face detection
• Stenography

Architecture

If building a separate app, the AppFramework will have to be used and there will have to be a way to initialise the main Javascript class from Gallery in order to create an extra layer on top of the image in the slideshow.

It's possible to create a FileAction to make the editor available to the Files app. That would be a stretch goal imho.

Libraries

Developers have mentioned:

• fabric.js

Sponsorship

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

Copied from original issue: owncloud/gallery#265

[oparoz]

From @setnes on August 29, 2015 5:1

I think that should be a separate app. Keep gallery all about displaying.

[oparoz]

I agree.

[oparoz]

From @manishbisht on March 3, 2016 8:26

We can use fabric.js (http://fabricjs.com/) Javascript Library to make the Image Editor Web Application. And to give some good design and make it responsive we can use AngularJs and Bootstrap framework.

We can also add the share on social media links to share the edited pictures on social media. We can also implement the Google's Material Design. It is also very good for frontend design. :)

@jancborchardt I want to make this application. I was having the discussion with @oparoz about the development of this application on the mailing list. and He told me to have a discussion with you regarding the design of the application.

[oparoz]

A small note, I have no experience with Angular, so I wouldn't be able to help you with that.
Using Bootstrap and Material Design will make the app feel less integrated which is a shame, but not a show-stopper from my side.

Make sure to read about the Appframework to understand how an app is structured

[oparoz]

From @ahmedkareem999 on March 4, 2016 18:15

Working with App framework would be better, it has it's own style and mainly meant for developing apps. It is very fast and light weight. The front end can be designed more innovatively based on our requirement. It's UI is of a different kind and has different themes which are automatically applied based on the OS(i.e:android,BB10,IOS,WP8).

[oparoz]

@ahmedkareem999 - You may be thinking about something different. The AppFramework delivered with ownCloud doesn't come with any UI or themes.
What you can do is to use a GUI framework to build the app, but as mentioned earlier, it will make the app look foreign compared to the official apps per example which mostly look the same.

[oparoz]

From @ahmedkareem999 on March 4, 2016 18:43

I mean it is having a native UI look and predefined themes. As you said, it
might completely look like a foreign app. Then what do we have to do sir?
Use bootstrap for the front end and normal JavaScript and PHP. We can build
it in that way too but I just thought about App Framework because it is a
bit new to me and I'm anxious to learn new things. Firstly we need to
divide the project into different modules and work on it so that it makes
our work more easier. If I need to improve myself please notify me and I
would be glad to work more harder.
Thank You.
Best Regards,
Kareem Ahmed Sheik.

[oparoz]

@ahmedkareem999 - You have 2 options

1. Review the special GSoC Gallery Wiki page to familiarise yourself with the technologies the project uses. Review the design guidelines in the ownCloud developer's manual. Work with designers to make sure your app looks like an ownCloud app
2. Use bootstrap, detect the platform, use a different theme for each one and the app will look foreign

I prefer the first one, because that way, users are not "shocked" when trying to edit a picture, but it could be too much work, because all the buttons would have to be designed, etc..

The only way to decide is to scope the project. Once you know what you want to achieve and which libraries could be used, you can look at the design and see which option makes more sense.

The AppFramework is a PHP framework. The best way to learn would be to try and create a new app with a simple goal. That way you'll understand how it communicates with core, etc.

[oparoz]

From @rogeredthat on March 9, 2016 17:34

I would like to build the app. I prefer the first option, and am willing to build from scratch if necessary. Fabric.js is the right way to go for the editor, and the design can easily be themed according to ownCloud's gallery.

[oparoz]

I've updated the OP with a bit more info, gathered from recent convos.

[oparoz]

From @shubhrajodiya on March 12, 2016 20:27

I am interested in building the app for gallery i probably will be using fabric.js caman.js and darkroom.js and also would like to integrate some extra-ordinary features in the app like color popping face filtering which are trending.

[oparoz]

Thanks for your interest, make sure to read the special Gallery wiki page and to try and understand how everything work around here as early as possible.

[oparoz]

From @SagarShah007 on March 13, 2016 19:59

i would like to work on this project because i made same kind of project when i was pursuing my bachelor degree.i added functionality like change in brightness,contrast,saturation,opacity i added blur effect also and i added one more facility that was to merge text with that image and allow user to download that image.if u want to see what i created as project i can show .

[oparoz]

Interesting @SagarShah007, but since you've already done most of the work, maybe it would be best for you to work on another project, no? And if this project isn't selected for GSoC, then maybe you could implement your solution?

[laurentiu2]

Hi, do you have an email address for @SagarShah007?

Thanks,

[oparoz]

Unfortunately, no

[laurentiu2]

Olivier,
I need to find someone to develop a custom app to edit pictures (the editing itself has to be on a different server, similar with OnlyOffice for editing texts). I can give more details on email. Are you interested or can you give someone else's contact?

Regards,

[oparoz]

Hi Laurentiu,

We do custom development for our customers. If you have a subscription, please contact your account manager.

The alternative is to use our forums to ask freelancers:

https://help.nextcloud.com

Cheers