LITRATO

DESCRIPTION

The goal of this project is to create an Android app capable of editing photos and saving those changes to the gallery.

Filters and effects:

• 14 presets to quickly apply a filter (without any parameters).
• Transformations such as rotation, crop, flip...
• Essentials tools such as luminosity, contrast, gamma, saturation...
• More advanced filters that use convolution or blending two or more images.
• Almost all filters are using RenderScript, which accelerates the calculations.

User interface:

• The UI is simple and intuitive, with menus, separate interfaces, and the preview of each filter.
• Dark and light theme.
• Zoom and scroll: it is possible to zoom on the image using two fingers or with a double tap, and then move around with one finger.

Tools:

• “Color Picker”, a tool to select a hue directly from the image.
• "History" gives the user the ability to revert to any prior state of the image.
• A setting menu where the user can tweak some parameters. Those values are saved on the phone.
• An menu to view most EXIF values of the image, such as the ISO, f-number or where the photo was taken.
• Ability to only apply a filter to a part of the image. This "mask" is drawn by the user using its finger.

Load and save:

• Take or select an image: images can be obtained from the gallery, or directly from the camera.
• It is possible to save the image in its original resolution, and have a smaller resolution while using the app.

<img src="https://gitlab.com/IzzyOnDroid/repo/-/raw/master/assets/IzzyOnDroid.png" width="30%">

INTERFACE

<img src="docs/layout.jpg" width="100%">

When the app is first launched, a permission request to access storage is prompted. Then a default image will be displayed. The user can then load an image from his gallery or take a picture by clicking on the top left File icon and modify his personal images. What was simply called "Filters" has been divided in three categories : Presets which are predefined filters that can be applied just be tapping on its miniature, Tools which include all the essential tools to modify an image, and finally Filters. This last one is further divided into four categories: Color, Fancy, Blur and Contour.

At the top, there is also the History button with a clock icon. Using this button, the user can preview and revert to any prior state of the image using a slider. Once the user selected a prior state, he can click on the Confirm button to validate their choice.

Further to the right there is the save button, quick access to 90° counterclockwise and clockwise rotations. Lastly, a dropmenu gives access to Settings and EXIF Viewer. The first one allow the user to change some parameters in the app and the second one is usuful to learn more about the loaded image, such as where it has taken, by what camera...

Back to the main window, the user can zoom on the image using two fingers, and then move around with one finger or two fingers. Double tapping the image will zoom on it, and double tapping again will make the image fit on the screen. Warning : sometimes gesture navigation is disabled depending on the situation. Some functions use the touch as an input, such as Color Picker or Crop.

<img src="docs/layout2.jpg" width="100%">

If the user tap on one of a tool or a filter, a new window will appear prompting them to adjust the filter as they wishes. Once the user is happy with the result, they can click on the Apply button to validate the modification. The bar at the very bottom also shows the name of the active filter/tool. Clicking on the name can toggle on or off the "Filter menu". The number and the disposition of the controls vary according to the filter. Some use the Color Seek bar to select a tint. In this case, the Pick a Color tool also appear on its left. The user can use this tool to select directly on the image the tint they want the work with. At most, a filter can display two seekbars, one colorSeekBar, a switch, and a special menu (currently only used by "Stickers") to display a list of selectable bitmaps.

On the left, two other buttons can appear. The first one is the Masking tool. Clicking on it will bring another window where the user can draw where the filter should be applied on the image. By default, the mask is entirely black, meaning that the filter will be apply nowhere. The user can choose the draw in white or black, the size of the brush, and the view opacity of the mask. This last option is purely visual and doesn't change the mask whatsoever. Let's go back to the Filter menu, the last option at the bottom left is Histogram, a button that will toggle the histogram, a visual representation of the repartition of RGB values. It is overprinted on the image to allow the user to still view what is underneath. The histogram uses logarithm scaling on the Y-axis.

FILTERS

Original image

<img src="docs/default_image.jpg" width="40%">

Auto

<img src="docs/auto.jpg" width="40%">

Provides two ways to increase the contrast without burning values (burning refers to values getting out of the 0-255 range). The first is by maximizing the range of luminances values of the image. The second is called Dynamic extension, and tries to make the histogram as flat as possible.

• Switch: choose which way to increase contrast.

Luminosity

<img src="docs/luminosity.jpg" width="40%">

Changes how bright or dark the image is. It turns up too much, this will burn the image.

• Seek bar: the image's brightness (between -100% and 100%).
• Seek bar 2: the image's gamma value (between -100% and 100%).

Saturation

<img src="docs/saturation.jpg" width="40%">

Changes the saturation of the image.

• Seek bar: the image's saturation (between 0 and 200%)

Temperature

<img src="docs/temperature.jpg" width="40%">

Makes the image look warmer or colder.

• Seek bar: the image’s temperature (between -100% and 100%).

Tint

<img src="docs/tint.jpg" width="40%">

Changes the tint of an image. Makes the images more magenta or green.

• Seek bar: the image’s tint (between -100% and 100%).

Sharpening

<img src="docs/sharpness.jpg" width="40%">

Makes the image look sharper or blurrier.

• Seek bar: the image’s sharpness (between -100% and 100%).

Colorize

<img src="docs/colorize.jpg" width="40%">

Apply one color and saturation to the entire image.

• Color seek bar: the color you wish to use.
• Seek bar: the color’s saturation (between 0% and 100%).

Change Hue

<img src="docs/changehue.jpg" width="40%">

Apply one hue to the entire image but contrary to the Colorize filter, it doesn’t change the saturation of the image.

• Color seek bar: the color hue you wish to use.

Hue Shift

<img src="docs/hueshift.jpg" width="40%">

Shift all hues by a certain amount. This can give interesting results when used moderately.

• Color seek bar: the color hue you wish to use.
• Seek bar: shift amount (between -180 and 180 degrees).

Threshold

<img src="docs/threshold.jpg" width="40%">

If the pixel’s luminosity is bellow the threshold, turns it back. Turns it white otherwise.

• Color seek bar: the color hue you wish to use.
• Seek bar: shift amount (between -180 and 180 degrees).

Selective Coloring

<img src="docs/selectivecoloring.jpg" width="40%">

Turns everything grayscale except for a specific color. If in remove mode (using the Switch), the user can reverse the effect and only remove that color instead of keeping it.

• Color seek bar: the color hue you wish to use.
• Seek bar: how far off the color can be (in degrees).
• Switch: chose between keeping or removing that color.

Add noise

<img src="docs/addnoise.jpg" width="40%">

Adds some random noise to the image.

• Seek bar: the amount of noise (between 0 and 255).
• Switch: turns the noise greyscale or colored.

Posterize

<img src="docs/posterize.jpg" width="40%">

Reduces the number of distinct colors, also called color quantization.

• Seek bar: how many possible colors should be kept in each channel (in steps between 2 and 32).
• Switch: also turns the image greyscale.

Average Blur

<img src="docs/averageblur.jpg" width="40%">

Blurs the image by averaging equally all pixels with their neighbors.

• Seek bar: blur amount (between 1 and 19 pixels).

Gaussian Blur

<img src="docs/gaussianblur.jpg" width="40%">

Blurs the image by using a Gaussian function.

• Seek bar: blur amount (between 1 and 25 pixels).

Laplacian

<img src="docs/laplacian.jpg" width="40%">

Used to highlight all the image’s contours.

• Seek bar: how much details should be kept(between 1 and 14 pixels).

Directional Blur

<img src="docs/directionalblur.jpg" width="40%">

Blurs the image horizontally or vertically.

• Seek bar: blur amount (between 2 and 30 pixels).
• Switch: horizontal or vertical.

Cartoon

<img src="docs/cartoon.jpg" width="40%">

Applies a cartoon effect. This is achieve by reducing the number of color values and highlighting the contours.

• Seek bar: the black value of the "shading" (everything expect the contours).
• Seek bar 2: the number of colors.

Sketch

<img src="docs/sketch.jpg" width="40%">

Sketch effect.

• Seek bar: how thick or narrow the contours should be.
• Seek bar 2: how much colors should remain.

Crop

<img src="docs/crop.jpg" width="40%">

Crop the image at the desired size. The area is selected using touch.

• Switch: how thick or narrow the contours should be.

Flip

<img src="docs/flip.jpg" width="40%">

Applies a horizontal flip of the image.

Rotation

<img src="docs/rotation.jpg" width="40%">

Applies a rotation to the image.

• Seek bar: rotation in degrees (between -180 and 180).

Stickers

<img src="docs/sticker.jpg" width="40%">

Allows to put stickers on the image. Touching the screen appl