Introduction:

Label The Diagram allows students to learn, memorize and play with diagrams in various subjects like
Physics, Chemistry, Biology etc. The main functioning of app allows user to select a diagram, a question
diagram of a particular subject and label them in a friendly manner like they are playing game. Keeping users
engaged with rewarding badges and achievements when they complete milestones. Allowing them to
compete with friends. This proposal step by step approaches implementation of each of these functionalities.

Labelling Of Diagrams:
Label the Diagram is app whose main idea is to handle image with multiple clickable areas. Each clickable
area may have different listener. The proposed scheme for implementation is to associate each image with a
mask of distinct colours to their clickable areas i.e. labels. This scheme solves major problems such as
images scaling to different size devices, new diagrams without update, allowing users to make any image
labelled diagrams.

Image Masking Technique:

In Label The Diagram app main task for a given image is to identify the labels positions and distinguish them
from each other. So we need some data structure to store this metadata. Storing exact co-ordinates of labels
area will fail when image get scaled for different size devices.
The best solution to this problem is to have another image of exactly same size as that of given image. Let
call this image as mask. We put this make on given image and mark all the label areas with rectangles on
mask. To distinguish each area of mask with other we assign them distinct colors. These colors acts as key to
identify each label. RGB values of these colors should be as far as possible. Scaling image may increase or
decrease the RGB so keeping large difference between color's RGB helps to distinguish them even after
scaling. As mask is as of same size of original image when image get scaled mask also get scaled, and as a
result rectangles in mask map to same labels in original image.
Implementation: A Frame Layout with image on top and mask below it will work as basic layout. When
user touches a position in image the co-ordinates are sent to onTouch event handler, the event handler looks
into the mask and get corresponding color. The color obtained from mask decides the action to be performed
for that label.
We can directly look into mask for color, so why do we require mask to be in frame layout? The mask
requires to be in frame layout because it needs to be scaled when image get scaled. We set scale type and
dimension of mask and image same so that labelling areas always align them same properly.

Advantages:

Image masking is easy to implement.

As each touch event only requires a look-up into mask bitmap resulting O(1) time
complexity is faster than any other method.

For look-up only bitmap of mask is loaded into memory and after look-up get destroyed. So
at runtime low memory requirement.

Solves problem of scaling images across different screen size devices.

Additional Feature - Converting Any Image To Diagram With Labels:

This feature allows user to select any image from device or take picture with camera and convert it to
labelled diagram. The difference between any image and labelled diagram is just of a mask and associated
label names. If we can create mask for user specified image and its labels we are done.
Android Implementation: This can be done by creating custom view which lies invisible above image in a

Frame Layout. The custom layout acts as invisible canvas over actual image. User drag and draw rectangles
above the image to specify the label area, when finished a dialog box pops up to get name of that label area.
Code Level Detail: A blank bitmap is created for selected image. When user draws a rectangle, this
rectangle with a unique color is saved on this bitmap. This unique color rectangle determines the label of that
area of image. When user choose to save diagram this bitmap (mask) is saved on device.
Template Impelmentation: Further, this can be extended to template in toolkit. So teachers can use their own

diagrams and create their app.

The UI And UX:

One of the most important task of an app is to keep users engaged as long as possible. I have divided whole
application UI and UX into four broad categories (i) subject selection (ii) diagram selection (iii) diagram
labelling (iv) hall-of-fame, each one is explained in following sections:
The Subject Selection:
This screen will show subjects to user so they can select and move to diagram selection phase where
diagrams of that particular subject will be shown. A subject UI component should show a description about
subject, number of question diagrams available etc. in cool, exciting way. The initial thought for UI is a
customized listview or gridview. But both are suitable for large dataset also adding description of subject
will take more space and require user to scroll to see other subject, limiting the capability of adding
animation.
The solution to this problem is to use image slider view. Slider view allows images to slide automatically and
manually both. As number of subjects will be very less this is a perfect choice. Each full screen awesome
image describes subject. Also it allows adding number of animations on interaction. As images scrolls
automatically user will feel app is interactive.
A good develper knows Do No Reinvent The Wheel. We have third-party-library called Android Image
Slider (https://github.com/daimajia/AndroidImageSlider) which requires a few lines of code for this
implementation. So its time saving too. The link to github page also have an example gif.
The Diagram Selection:
This screen will show question diagram for selected subject. Each UI component of diagram will show a
small preview, name of diagram, a short descripion, and solved or not. As the number of diagram can be
large better choice to select a grid view which automatically adjust columns according to screen size. Images
can be of different sizes, so instead simple grid view we will use a staggered grid view.
This can be implemented comfertably or again we have awesome third-party-library Android Staggered Grid
(https://github.com/etsy/AndroidStaggeredGrid) at service. The link has screenshot too.
The Diagram Labelling:
On this screen user will be shown question diagram and available labels. The areas of diagram to label will
have thin border circle around them. User select a label from available choice and put them into proper
circle. For correct and wrong answer app will show corresponding animated response.
Where to put available labels and how user will interact with them? The approach mentioned in idea
page is to allow user drag and drop labels will work fine. But showing labels to drag and drop screen will
eighter consume space horizontally or vertically. This is not problem for large screen but for small screens
the question diagram looses its focus. Eventually, leading to bad UX. One possible solution can be to put
labels in a sliding drawer, this will also require user to pull drawer every time he wants to label the diagram.

The proposed solution is to show available labels only when user touches to fill diagram area. To make this
possible we can use a popup window with listview in it. This way user will have full view to image and feel
like image itself interacting with him. The pop up window 9-path image will be like a message bubble with
options list in it. User choose one and based on answer correct or not app responds to him.
The Hall-Of-Fame:
The Hall-Of-Fame screen shows user his achievements, badges. This screen will also have option to show
rankings with respect to his friends. This can be achieved using google play services. Now what should be
the achievement. A achievement will be a story. When user crosses a milestone he unlocks a interactive
story. The story proceeds based on users dicision at that point of story. Basically it is like decision making
game whose final result depends on path you have choosen.
Implementing and scaling story is quite easy with The State Design Pattern. I have good grasp on it.

Testing:
Testing is most important part of any development process. It ensures whatever you have done is working.
For android development I prefer to use Robotium framework for testing purpose. It is easy to use. Its Solo
object makes unit testing easy and fun.

Third-Party Libraries:
1. Android Image Slider Awesome sliding images with vivid animations.
2. Android Staggered Grid A grid with variable size columns and rows
3. Android Animations (YOYO library) Simple and effective animations.
4. ButterKnife (Optional) Using Java annotations, makes Android development better by simplifying
common tasks.

Time Line:
Phase 1: Complete functioning app with basic UI
Implementing and testing:
Week 1: subject selection, with creating images for each subject.
Week 2: diagram selection with mock diagrams.
Week 3: diagram labelling part of application
Week 4: Hall-Of-Fame only badges and rank list of friend part.
Week 5: achievement as interactive story, with 2-3 demo stories
*After receiving feedback from users (if any):
Week 6: making changes based on suggestions and testing them
Phase 2: Improving UI and UX
Week 7: Implementing designs for subject selection, diagram selection screen
Week 8: Implementing designs for diagram labelling, hall-of-frame screen
Week 9: Implementing design for interactive story and final touches.
Week 10: Documenting

Short Bio:
Name: Majeed Siddiqui
Native Place: Aurangabad, Maharashtra
Institute: Indian School Of Mines, Dhanbad (Recently announced IIT Dhanbad)

Academic: 3rd Year, B.Tech, Computer Science And Engineering

Area Of Interest: Data Structure, Algorithm, Competitive Programming, Digital Image Processing
Projects:
1. Classroom App: This app is intended to connect profs, students and alumnus. The app is similar to
Google Classroom Android App but with social networking functionality for students. We actually
trying to merge LinkedIn, Facebook core idea so that students remain connected to alumnus. App let
profs create classroom so that they can post assignments and solutions to them. Student can post
their solutions to assignment on app and profs can grade them. Students are notified about
attendence, exams. App also allows users to search information about other users as each user's
profile is maintained. This is a team project. App is currently under development.

2. Winter Holiday: This is social networking app I took as weekend project. It let user sign in, sign up,
post something on wall, follow / unfollow other users. I used Parse.com as BaaS.
Github: https://github.com/samsidx/Winter-Holiday
I have also worked on Office Automation Web Application project. I have experience in working in team,
under virtual mentor I am pretty comfortable. A good practical knowledge of android development,
determination to single project and promise to deliver product on time makes me consider as a right person
for this project. I would love to make long term commitment to contribute.