Diagonal Pixel Report
0 likes323 views
Diagonal Pixel is a basic image editing app for Android that allows users to apply various effects like rotation, flipping, brightness/contrast adjustments, filters, frames and predefined looks. It was developed in Java using Eclipse and compatible with Android 2.1+. The app allows selecting an image, choosing an effect, applying and saving/sharing the edited image. Performance was tested using Traceview on various Android devices.
Diagonal Pixel Report
- 2. 1. About App Diagonal Pixel is a basic image editing app developed for android platform. It is compatible on Android 2.1 or higher versions. It involves a lot of basic effects like: 1. Adjust Rotation, Flip 2. Adjust Brightness, Contrast, Tint 3. Apply Black & White, Color Filter, Shading Filter Effects 4. Invert Colors, Dark Effect 5. Sharpen, Mean Removal, Blur, Smoothen 6. Applying Round Edges, Round Corners and Circle frame on the image 7. Applying Emboss, Engrave and Sepia Toning Effects And some predefined effects like: 1. Sketch Effect 2. Metallic Effect 3. Back 1836 The development platform used for the purpose was Eclipse along with: Java Development Kit Android SDK ADT And emulators for various android screens
- 3. 2. Effects ROTATE Two image buttons displayed on the screen (left rotation and right rotation), and on action to click the values on the respective button is selected (here - 90 and 90 degree) and rotated with the selected angle. FLIP (VERTICAL, HORIZONTAL) Two kind of flips introduced in this application, horizontal flip and vertical flip. Flip vertical. Whenever this tool is selected, it changes, or say reverse, the y-axis pixels and x-axis pixels remain untouched and hence image is vertically flipped. Flip horizontal. Whenever this tool is selected, it changes, or say reverse, the x-axis pixels and y-axis pixels remain untouched and hence image is vertically flipped. BRIGHTNESS There is a color matrix, which has their values for colors (R,G,B) and brightness contrast. This is a 5x4 matrix and having ( (1,5), (2,5), (3,5) ) places for the brightness. Here, the value is determined by the pixel touched on the screen (x- axis pixel) and its value is transferred to the function in which this color matrix is transformed with the new brightness. Going left to the screen applies low brightness whereas as moving on right hand side, it increases gradually. CONTRAST The color matrix have ( (1,1), (2,2), (3,3) ) places for the contrast. The value is determined by the pixel touched on the screen (x-axis pixel) and its value is transferred to the function in which this color matrix is transformed with the new contrast. Going left to the screen applies low contrast whereas as moving on right hand side, it increases gradually.
- 4. DARK EFFECT Set a reference color mask value, (R=65,G=50,B=29) in our application. Each pixel is selected and their color is masked with the reference value and applied to the same image. For example, if RED = 125 then this RED is ANDed with reference color mask value R, and the result is applied to the same canvas. GRAY SCALE To convert image in gray scale, there is a fixed ratio of colors in which they seems like Gray Image. To convert an image in gray scale, their color values should be exactly same, and to enhance a specific color, or combination of colors, we equate them with a particular ratio of colors. These values are set as, GS_R=0.299, GS_G=0.587, GS_R=0.114, i.e. we need the colors of the image to be in this ratio only. So, each pixel is selected, and changed all RGB with the same value as, R=G=B = (GS_R*R + GS_G*G + GS_B*B) , and applied to the image. INVERT This tool is to convert the positive image into negative ( i.e. opposite colors). In this case, R,G,B colors have values from 0 to 255. So, to convert the color into negative we take additive inverse of the color and add to the maximum value. Each pixel is selected and changed its R,G,B colors as R=255-R, G = 255-G, B=255-B, and applied to the same image. ROUND CORNER This tool cuts the sharp corners of the image to the round corners. This is done here with the help of a function which converts the canvas to the round corners, and whatever the canvas is, the image in intersection with it would only be visible. So, change of canvas style is applied.
- 5. CIRCLE Similar to the round corner explained above. Here the Image centre is determined by the mean value of X –axis width and Y – axis width. And then a circle is drawn with whatever is minimum, x-width or y-width. COLOR FILTER In this tool, a few colors are shown on the screen as image button, a click on which is listened and respectively values of reference color red, green, blue are changed and passed to the function to apply color filter. These reference color values are set according to the type of color filter used, for example to apply shade of blue color, in this we need more of Blue color part and less of others. Each pixel of the image is selected and mapped the each color R, G, B of image with reference to the reference color red, green, blue. These values are applied to the original image to see the effect. SEPIA TONING EFFECT In this tool, we can select a sepia brown or sepia green effect. In this tool the image is first converted into a black and white image and then according to referenced color (brown or green), each pixel of the image is selected and mapped the each color R, G, B of image with reference to the reference color. These values are applied to the original image to see the effect.
- 6. 3. Workflow Chart: Display Splash Screen for 3 seconds Main Screen, where effects are applied Select Image To Edit Select Effect To Apply Effect Applied Keep Effect Undo Effect Save Image With a Name Share Image On Various Sources Apply A Predefined Effect & Automatically Saves it in the Gallery
- 7. 4. Diagonal Pixel v/s Adobe Photoshop Express FEATURE DIAGONAL PIXEL PHOTOSHOP EXPRESS Crop ✔ ✔ Rotate ✔ ✔ Flip ✔ ✔ Straighten ✕ ✔ Brightness ✔ ✔ Contrast ✔ ✔ Tint ✔ ✔ Black & White ✔ ✔ Exposure ✕ ✔ Saturation ✕ ✔ Invert Colors ✔ ✕ Color Filter ✔ ✔ Shading Filter ✔ ✕ Dark Effect ✔ ✕ Blur ✔ ✕ Soft Focus ✕ ✔ Sharpen ✔ ✕ Mean Removal ✔ ✕ Smoothen ✔ ✕ Frames/Borders ✔ ✔ Sepia Effect ✔ ✕ Predefined Effects ✔ ✔
- 8. 5. Traceview: Traceview is a graphical viewer for execution logs that user creates by using the Debug class to log tracing information in the code. Traceview can help the user debug the application and profile its performance. Timeline panel- describes when each thread and method started and stopped Figure 1 Timeline panel of the application The top line is the UI thread. The second, third, fourth, and last line represent where the application code is running. The fifth line represent when the finalizer is run for garbage collection. Profile panel- provides a summary of what happened inside a method Figure 2 Profile panel of the application Exclusive time is the time spent in the method. And inclusive time is the spent in the method plus the time spent in any called functions. It also show the number of calls to a method and number of recursive calls. A total of 5316 methods were called when the application was in debugging mode. 6. Compatible OS: Android 2.1 and above 7. Tested On: Mobile Handset Android OS Screen Size Samsung Galaxy Fit S5670 2.2 240x320 pixels, 3.3 inches HTC Incredible S 2.2 480x800 pixels, 4.0 inches Samsung Galaxy 551 2.2 240x400 pixels, 3.2 inches Samsung Exhibit 4G 2.3 480x800 pixels, 3.5 inches LG Optimus Hub 2.3 320x480 pixels, 3.5 inches
- 9. 8. Screenshots Main Screen Of App Load Image Select Effects To Apply App is applying effect Save the Image Share it on various sources