Design a picture editor which can be launched from the slideshow

[oparoz]

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.

[setnes]

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

[oparoz]

I agree.

[manishbisht]

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

[ahmedkareem999]

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.

[ahmedkareem999]

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.

[rogeredthat]

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.

[shubhrajodiya]

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.

[sagar-shah94]

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?

[oparoz]

This issue was moved to nextcloud/gallery#67