Wednesday, July 24, 2013

Android Image Cropping Example

When I was creating PsyYourself, I was faced with a challenge on how I can crop out the face with an image that the user provides. One option was to somehow apply Optical Character Recognition (OCR) to detect faces in an image and crop that part out, but at the time OCR was something out of my league to create.

Instead I optioned to have a set of templates that make up
the various shapes of faces and from there, users will be able to orient, either by zooming in or out or moving the image, to fit inside the template. Once that was done, it was up to the device to crop out the image. The problem with this is that there were no available cropping tools/algorithms that I can make use of. I mean, there are existing cropping APIs, but the only problem with that is that they crop out rectangular shaped images, which is something that I did not want. Therefore I am posting this blog to show how I did this. The example project can be found on Github android-cropping-example.

Project Setup

Now, both the image that is going to cropped and the template image has to be overlapped on the screen so that users can easily orient the image to fit into the template. This can be accomplished by using FrameLayout and having two ImageView as its children. As seen below.

The first ImageView with the id cp_img will be the image that user will be orienting. While the second ImageView cp_face_template with scaleType as centerInside because I want to use the exact size of my templates that I have created.

Once the users are done with orienting the image, we then now have to get those images from ImageView the way how it is displayed on the screen. To do this we must first call View.buildDrawingCache() and View.setDrawingCacheEnabled() with the boolean value true as their arguments. Then, to get the bitmap, call View.getDrawingCache(). Lastly, call View.setDrawingCacheEnabled() again and this time with the boolean value false passed in. This process will allow you to retrieve images from ImageView multiple times.

Once, we have retrieved both the template and the oriented image, it's time to put the device to work. As we can see above, I created another thread to handle that work as we don't want the main thread to be blocked because it's processing. So, now this is where my algorithm that I have create comes into play.

Cropping Algorithm

The main idea of how my algorithm works is:
  1. I merge the two bitmaps together making sure template is placed on top.
  2. Since I know the size of the template, create a new blank bitmap with those dimensions.
  3. From the centre of the combined image, go out quadrant by quadrant, going through every pixel value and copy it onto the blank bitmap.
  4. Once it hits the colour of the template lines, then from that point on set the pixel value of the blank bitmap transparent.
  5. After it has gotten through all 4 quadrants, return the created bitmap, which is the cropped image. 
Here is the cropping code:
Feel free to view, download, and make use of my code HERE!!
Enjoy :)

Link to android-cropping-example.

Friday, July 19, 2013

Randomizer is NOW Open Source!!

In my previous post My Two Android Apps, I have mentioned about my Randomizer Android application that I released on the Google Play Store. I am here to say that I have released the source code for this application on open source and it can be checked out on my Github (randomizer-random-generator).

My two main reasons for putting up on open source are: low number of device installs and low monetary income from advertisements. After doing some search on the Play Store related to random generators, there are many applications out there that people can download where some are good, while some are bad. Due to all this competition I would either have to improve Randomizer both in the user-interface (UI) design and the speed of how the application runs (meaning lag). Because of how much I was lagging behind in the UI design and the speed of the app, when compared to the best random generator app out there, it would require me to do a major overhaul of the application and this was not an option for me. Instead, I have made many improvements I possibly can do and as of last week I have just decided to put it up on open source instead. Since, there weren't many people downloading Randomizer, this resulted in low monetary income from Admob. While I was preparing my source code to be placed up for open source, I have also decided to remove all advertisements and release an update. This has been done and should be published on Play Store right now!

Anyway feel free to look through my code!
Enjoy! =D

Randomizer Source Code HERE!!
Randomizer on Play Store HERE!!

Tuesday, July 16, 2013

Pennapps Spring 2013

Pennapps is a hackathon that is student run at the University of Pennsylvania (UPenn) and this wasn't their first, as they held multiple Hackathons previously. What made this 2013 Spring Pennapps so special was that it was their very first Hackathon where many students outside North America attended this event. Making it their first international hackathon.
Hackathon is an event where programmers/developers or even engineers create an application/program of any form that is computer related within the given time limit. This usually equates to contestants sitting in font of their computer for the most part of the event with little to no sleep at all!! Luckily Pennapps provides breakfast, lunch, dinner, midnight snacks, and drinks throughout the competition. But don't bet getting gourmet or healthily foods. To outsiders, hackathons may look like an event that will literally destroy our bodies, but to us "geeks" or "nerds" this is a chance where we can shine and show off our skills, or even possibly learn from to hone our skills for the next hackathon.

Flight to Philly
(Toronto seen in the background)
My experiences with hackathon is pretty minimal. My first hackathon was back in January 2011 where Facebook hosted a 24 hour hackathon held at the University of Waterloo. To tell you the truth, I did not do much coding as I was  grasping the idea of programming. So, I don't really consider this as my first real hackathon and was just there for fun. Back then, I knew that I wouldn't be participating in any form of hackathons in the later future. But around December 2012, my friend has mentioned to me about Pennapps and that I should join his team. Looking at their site at the time (here), it seemed more legit compared to the Facebook hackathon I attended and also our plane tickets were to be reimbursed. So, I said "why not!!" and sent in our team's application. Within the week, we received our response indicating our acceptance to the event, purchased our plane tickets and started to brainstorm some ideas to create during the hackathon.

As the dates came closer and closer, we were able to decide on an idea to create. We named our project Simplyi and it happens to be similar to that of a blog but different in the way how a blogger would blog. The way how Simplyi was to work is the user were to have a Dropbox account and they would place all their stuff (i.e. images, music, text files, and etc.) that they would like to post into a single folder. Then using our Simplyi website, login using your Dropbox credentials and our servers would automatically retrieve your files and create a fully functional website. Users would also have an array of design templates that they can select from for their site/blog. The issue that we tried to resolve here with Simplyi was to allow users, who do not have any technical background to create their own personal site without having to learn web. I will describe more in detail about Simplyi later on in my future blog.

On the taxi getting to UPenn
from the airport.
We decided to take an early flight there to give us some buffer as it was our first time going to Philadelphia. Once we landed in Philadelphia, we took the taxi to UPenn and arrived there with plenty of time to spare and the doors to the building where the opening ceremony was to take place was not open. So, we had to find ways to kill time and since we haven't eaten lunch, we headed to a nearby restaurant to eat. Even after our lunch, we still had time to spare, so we ended up at a nearby Starbucks and discussed our plan. Luckily, the people beside us were also killing to time for event as the building was still was not yet open. The two people beside us were not taking part in the competition but instead they were recruiters from Ebay and Paypal to promote their companies during the event. During that time we exchanged talks introducing ourselves and etc. They also mentioned how frustrated they were because the building was closed and they did not receive any form of notice about what to do and where to go in the meantime. As the start time was closing in, we received their business cards, wished us good luck and parted our ways.

During Opening Ceremony
When we arrived at the building, there were already a long lineup of students trying to get into the auditorium. They weren't letting us into the auditorium because they told us that we all must check-in first and receive our bag full of goodies before entering into the auditorium. After awhile we checked-in and got our bag filled with stuff and sat down in the auditorium. Throughout the opening, there weren't much exciting things going on other than the introduction and every sponsors going through their short presentations about their companies. It might have been boring, but this gave me the chance to learn about all these start-ups that I didn't know about and the services that they offer to their customers. As sponsors continued on with their presentations and as the competition start time came closer, my group started to notice people within the auditorium leaving. As we were also anxious to get underway with our hacks, we also left the auditorium and headed over to the building where the hacking was to take place.

Room that we were occupying.
Once we got to the building, there were already quite a significant number of people settled in and hacking away, while dinner was also being served. As most rooms were filled, we optioned to head to the topmost floor hoping that there would be an empty room. Luckily the first room we checked was empty and marked our spot hoping that we would have the room to ourselves and that we didn't have to share it. As it turns out, even the topmost floor that we were on were quickly getting filled and had no choice but to share the room with others. One of the groups that we were sharing the room with was working on a very unique and bold project. At first they brought in a toilet, which is very unusual and everyone in the room started to question. Even people walking by our room even questioned why there was a toilet in the room. Apparently, this group was working on a program where there was a camera attached to the toilet which detects the urine coming out men's "thing." Once it detects a stream of urine, then it will play music and when the position of the urine stream is detected on one side, it will change track. While if the urine is detected on the other side, then it will tweet on your twitter account that you are currently peeing.

Group in front of us with their
toilet project.
On the second day, our group was already feeling the stress, from the lack of sleep, having to sleep on the dirty floor with a sleeping bag, tons of coding left to do, lack of washrooms for us to properly clean ourselves. Foods that have been provided to us thus far have been sub par, something that you would expect from cheap catering. But anyway, it was something that we had to suck-it-up and move on with completing our project by the next morning. I even noticed that the event holder had an auditorium stashed with drinks that people were allowed to take at their disposal. So, most of time when our floor's drink stash was gone (which they never really did restocked them on our floor) I would occasionally go back and forth getting drinks for our team. Once, in the evening we even went out to a nearby Chinese restaurant to grab a bite. This Chinese food may not be gourmet Chinese food, but after having to eat on whatever they have provided us so far, this Chinese food was gourmet to our mouths!!

As the day was getting closer to midnight, we still had a lot to implement and we were really feeling the pressure as we were also pretty sleepy. The next morning we were able to get the basic core functions working and we did our own little small celebrations. Once completed, we submitted our project and prepared ourselves for the presentation. Presentations were split up into 3 or 4 different groups where each presentations were 2 minutes each. A group of judges in each of the groups would select groups to advance to the final presentation where it will displayed to everyone.

On our flight back to Toronto.
Unfortunately, our group was not selected to present in the final presentation, but as we had time before our flight we stayed and watched the what the finalists have created. In the beginning I thought that our project was the most amazing and practical project ever, but after seeing what these finalists have created, ours were pretty simple compared to theirs and theirs had more practical use for the general public. At this point, I knew these people mean serious business and that I would have to step up my game inorder to stay competitive with them. Once, the winners where selected, it was time for us to head over to the airport. Once, we got there, we checked-in and went through security. As, we still had 2.5 hours left before our flight, we went to a restaurant inside the secured area of the airport to grab dinner as we did not properly have breakfast and lunch. As the time was getting closer to our boarding time, we head over to our gate area and boarded when they allowed us to board. Our flight was smooth and didn't experience any issues, and took this time to get some sleep.

This Pennapps Hackathon has taught me how things that don't seem possible at first is possible and that creativity is important. I mean, looking at the contestants projects, they were the projects that we would have initially thought seemed time consuming and difficult to create. But, good planning and understanding of team member's skills is crucial in becoming successful in these competitions. Pennapps will be hosting another hackathon this September 6-8, but due to personal matters on one of those days I will not be attending. I hope, I will be able to attended another hackathon in the later future. In fact, I have my eyes on hackMIT, which I hope I will attend if they were to reimburse my plane ticket. In the meantime, I will be honing my programming skills!!

Information on upcoming Pennapps.
Information on hackMIT this October.

Thursday, July 11, 2013

TODOs Application for BlackBerry PlayBook

Randomizer and Psy Yourself were not my first apps to be published on the app market.

It was back in spring of 2012, while I was an intern at Research In Motion (now BlackBerry Ltd.), they had this event where anyone who created a legitimate application for BlackBerry PlayBook would receive a free PlayBook. So, my co-worker at that time, who was an intern and a friend, informed me about this and told me that I should create something. At the time, my experiences with creating applications were minimal and thought that creating an application will be a long and tedious task. But, my friend gave me an idea and how it can be implemented quickly. That idea happened to be a TODO application where users can input the list of tasks/things that they need to do. This will allow users to easily keep track of things and also having it on a mobile device allows them look at them wherever and whenever they want as long as they have the device on them. He even showed me an example of this TODO app on the web and the tools I can use to get this task completed.

The tools I used were jQuery, jQuery mobile, and using BlackBerry WebWorks to package it into BlackBerry PlayBook app. I was new to jQuery, but after spending time on it, searching through the web and getting help from my friend, I got the hang of it. As for BlackBerry WebWorks, I was actually a software developer on the BlackBerry WebWorks team, so because of my familiarity with it, I did not have much trouble using it.

After a week of hacking away, during work (don't worry I had no work assigned to me at the time =D) and after work at home, I finally completed the app where the basic core functions of the app were working. Once, it was tested and noticeable bug fixes were done, I submitted online hoping that I will land myself a BlackBerry PlayBook. The verification process took a bit longer than I thought, but I finally received an email indicating that I was eligible to receive a PlayBook. So, within the week my PlayBook shipment arrived.

Overtime, I have made improvements by making changes to the user interface and major fixes that users encounter. So far, there were not that as many downloads, but the feedbacks from those small number of users has been positive! Currently, I have no intentions on improving it any further as there are many applications on market similar to my TODOs application. Some being poorly created, while others are exceptional. In the meantime, feel free to try it out!

Link to TODOs on BlackBerry World HERE!!
You can even view the source HERE!!

Enjoy!

Sunday, July 7, 2013

Boston, USA

On June 20, 2013 I made a quick 4 day trip to Boston, MA to meet one of my most dearest friend that I haven't seen for a long time and took this opportunity to explore Boston as it's my first time there.

Air  Canada CRJ from
Ottawa --> Boston
Flight from
Toronto --> Ottawa
So, my day start off by heading over to the airport here in Toronto. My first flight will be a domestic flight taking me to Ottawa and connecting there onwards to Boston. Out of all the flights I've been on in my lifetime I would have to say these two flights were the most eventful. On the flight from Toronto to Ottawa, it was quite smooth until we were coming in to land in Ottawa. Our landing were quite turbulent and could actually feel the plane being push side to side by the wind. Pilot's first attempt to land failed and made a go around and landed safely on the second attempt. On my second flight from Ottawa to Boston, the flight was smooth and everything was good. Until again, during landing, it felt that the plane was making a steep dive towards the airport runaway at Boston, which is a first for me, as my previous flights made smooth gradual descent towards the airport.

Copley Square
Once I deplaned, I went outside to the public area to meetup with my friend that I was dying to see and headed off to the hostel where I booked to stay at. On our way, we exchanged some words and what amazed me was that public transit is FREE for one way if you get on at the airport, which was AWESOME!! Something that I think the transit agency in my city should implement. The hostel I booked was Hostelling International Boston. It might be located in Boston's Chinatown, but for the price, location, and the cleanliness, it's pretty good deal and I definitely would recommend this place if you are travelling on a budget. After checking-in, we heading out to have dinner and my friend took me to her favourite Chinese restaurant. After that we did a quick stroll around the area, showing me were I could do my clothes shopping, someone buildings that make up Boston, and importantly where the Boston Strong memorial in Copley Square. And lastly, a nightly walk through the Boston Common, until it was getting late and my friend had catch the last commuter train back to her school residence.

The next morning I headed out early, first heading to Boston Common and the Garden to take some photos of the area. Weather was hot, bright and sunny throughout the day so it was an awesome day to snap some photos. After that, I headed towards the area where my friend told me to go shopping for clothes. I didn't go on a shopping spree, but bought a few t-shirts that I can wear back home.
Once I completed my shopping, it was midday and I headed over to South Station to meet up with my friend again. From there, we headed towards Quincy Market. This place was filled with people and buskers, and it was a pretty lively place even though it was midday Friday. A lot of different unique stores, many food stands/restaurant, where even the foods were pretty unique, one example would be the pizza bagel.

Once, toured around Quincy Market and its area, I wanted to take a look around the MIT campus. As a computer science student at the University of Toronto and knowing MIT being ranked top internationally, I wanted to know how their campus looked and the feeling I get once I am on their campus. My school may not be the top school internationally, but being ranked around the top 20, I still have pride for attending this school, but after a short walk around on their campus, my pride just went down the drain. You get this feeling that students at MIT have something to be proud of. They have this "Infinite Hall" in their main campus building and student have this thing where they will climb this dome on their main campus building. As for my school, after attending for 5 years, I don't think we something like this. So, they do have something to be proud of. Visiting MIT might have made me lose some of my pride for my school and it might not be recognized like MIT or Harvard, but I shouldn't lose my pride in my school just because of MIT or Harvard and I should still be proud of attending a school that still has been ranked pretty high!

My friend headed back home early and since I didn't want to waste anymore time doing nothing back at my hostel and the weather being clear skies, I wondered if there was a good place to watch the sunset. So, I looked at the map and noticed there was a park along the river on the east end and as it was a few minute walk from my hostel, I headed over to that park. By the time I got there, the sun hasn't even set yet so it was good sign and there were already quite a few people readying to watch the sunset, but this didn't bother me at all. Weather was just perfect for viewing the sunset and brought this relaxing feel. After the sunset, I took a stroll along the river towards Science Park Station on the Green Line, where I took the Green Line back to my hostel.

Unfortunately, my friend was not available the next day, so I did my own exploring. I wanted to go to the New England Aquarium, so I headed over to that direction in the morning. My reasons for going to the aquarium in the morning is because knowing it was a Saturday there might be a lot of people, so the aquarium was my first place to visit on that day. Once arriving there, I explored the Long Wharf area and there was a small Waterfront Park there which I sat for awhile to relax and feeling the fresh breeze hitting my face. Around noon I head over to the aquarium, bought my tickets and headed inside. There were still a lot people there, mainly families with little kids. This aquarium might have been the smallest aquarium that I've been to, but the layout was quite unique. There was a huge center tank in the middle with a spiral walkway surrounding the center tank. This spiral walkway leads to multiple floors of this aquarium with different exhibitions on each floor. On the lower floor there was a huge open area for penguins, but apparently they were doing renovations for that exhibition at that time and those penguins where temporarily relocated, which was a bit disappointing. After spending two hours inside the aquarium, I finished walking around inside the aquarium and it was time for me to head out. Coming out of the front entrance, I noticed how noticeably longer the ticket line was compared to when I bought my tickets, so my decision on coming here early in the morning was good.

Knowing Quincy Market was pretty close by and having not bought any souvenirs, I headed over to the market hoping to score in some souvenirs to take back home. Walking around, there were a few fridge magnets that I liked, but the price on them were a bit expensive. After visiting multiple shops, they were all roughly around the same price, so I just picked the two magnets that I liked and purchased them. While I was here, I noticed there was an American Eagle store, so I went in and ended up buying a pair of jeans. I headed back to my hostel to drop off all of my purchases so that I wouldn't have to be carrying around them all the time. As I still had some daylight to kill and having no where else on my list to visit in Boston, there was a theatre nearby and hoping that I maybe able to watch a movie, I headed there. Once at the theatre, there was a show starting within 20 minutes that I wouldn't mind watching, which was "The Internship." This movie was pretty interesting, funny, and felt that there were some implicit messages for the audience watching this movie. Heading out of the theatre, the sun was just about set so then again, having nothing else planned to do, I headed back to the park I visited the previous day to watch the sunset.

Next morning, it was time for me to check-out of my hostel. As my flight was in the evening, I still had lots of time, so instead of carrying around of my luggage while hanging out with my friend. I placed them into the lockers that my hostel provides for a small fee. After meeting up with my friend, we headed off to eat dim sum for lunch. During this time, in chinatown, there were some festivities going on with streets blocked of from cars with street stands selling stuff and ongoing performances happening. So, after our lunch we just walked around looking at what they were selling. After that I had to buy some Harvard souvenirs for my sister and headed over there. Since, I wasn't that interested in visiting Harvard, we just walked along the street right beside Harvard and headed towards MIT. Along the way my friend indicated to me there is an ice cream shop where they create many unique flavoured ice cream where each day would have different flavoured ice cream. So, we went there to cool off from the blazing summer heat and had some of their ice cream. As I still had a lot of time left before my flight, and having not much to do, we just decided to watch a movie, again (for me that is). This time we watched "The Fast and the Furious 6."

After the movie ended, it was time for me to head over the airport. So, we headed back to my hostel to get my luggage and headed towards South Station to get on the silver line to the airport. Even though we got on the bus during rush hour, getting to the airport didn't take that as long, about 30 minutes, so I still had time before boarding. During this time I had a quick bite, knowing I won't be getting a decent meal on the short flight, sat around with my friend and talked before going through security to board my flight. As the time was getting closer to my flight I started to head over to gate security, said my goodbyes to my friend, and went through security. Once, I got past through security, I noticed that my plane hasn't even arrived yet. This late arrival had to do with the fact that there was a storm back in Toronto, causing the plane to depart late. My plane arrived approximately 30 minutes late into our scheduled boarding time and departed around 30 minutes late. All in all, I safely landed back in Toronto and this is how I end my 4 day trip to Boston.

Hope you enjoyed my first trip report!!
Feel free to view my pictures HERE!


Tuesday, July 2, 2013

My Two Android Apps

As mentioned in my previous post, I've spent the past two months creating Android applications. So far, I have create two Android apps that have already been published on Google Play Store. These applications are Randomizer and Psy Yourself.

Randomizer (Random Generator)
Randomizer was the first app to be completed out of the two. It is a simple web based application using HTML, CSS, JavaScript, jQuery, jQuery mobileGraphite for jQuery mobile, and finally packaged together using PhoneGap. My reasons for using use web technology is because of my extensive knowledge with web over Android development and the ability to deploy over multiple mobile platforms using PhoneGap.

Randomizer is an application for users where if they have difficulty making choices from the available selections they have on hand, they can input those selections and it will randomly select one. Other features includes, randomly ordering the list of choices, random number generator, and one neat feature is the ability to save randomly ordered lists, list of choices, and previous random selections for future view or use.

At first, the user experience wasn't that as pleasant compared to that of Android applications developed natively. It resulted in noticeable lag during page transitions and user input responses. Over time, after some extensive search on the web for optimizing mobile applications, I was able to improve the user experience and the user interface. But, in the end it still can't be compared to that of natively developed Android applications. This got me to think that I should move towards native development for all of my future applications. My friends have explained to me that it might be jQuery mobile at fault, causing Randomizer to be slow. Their reasoning have to do with jQuery mobile loading multiple unnecessary DOMs, which results in lag. So for now, I have my eyes on moving towards native app development for my next app, while keeping a lookout for other mobile web frameworks.

Psy Yourself (Photo Booth)
Psy Yourself is a photo booth type application where users get an image of themselves or an image of someone else and it will crop the face out replacing one of Korea's famous music artist Psy's face with the face that was cropped out. In the end it will display GIF style animation with the appropriate Psy music in the background. With social media connecting people, users will have the ability to save as a JPEG or GIF onto their devices and can be shared using their favorite social media apps.

This application was created natively using Android Development Tools (ADT). After successfully deploying an application using native development, I felt that I have made the right decision. Compared to web apps, the user interface feels smooth and quick to respond, a huge difference over my Randomizer app. But I am currently face with one major issue with this application, which happens to be memory issues. As this application is heavy with image since it loads and processes multiple images to once, it can be a burden on the phone's memory. This issue can be easily witnessed on low end phones with little RAM. I have deployed many updates for this application trying to optimize memory usage by removing bitmaps that aren't being used and adjusting images accordingly to phone's specifications, but this turns out to be not enough. In the meantime I am continuously looking out for other solutions to this issue that way majority of people interested in trying out this application can enjoy it! :)

Anyhow, these are my two applications already on the Android Play Store, feel free to try it out and provide feedbacks/comments via email (alottapps@gmail.com for Randomizer and nonamebrand00@gmail.com for Psy Yourself)!!

Link to Randomizer.
Link to Psy Yourself.

Enjoy :D