κίρκος : circle, mostly in form κρίκος (q.v.): hence, ring, IG11 (2).161B49 (Delos, iii B.C.): poet. for Prose κρίκος acc. to Poll.1.94:—neut. pl. κίρκα ἢ καταδέσματα PMag.Lond.121.299.
I want to be able to add a blur effect around a picture (with a circle shape), and then save it or share it.
The idea/concept came from Rui Barroca. So, after an initial assessment at a Nando’s restaurant, we reached the following:
- There were no applications doing this, or doing it how we wanted it to be (on a Business PoV).
- Blur is a design trend that iOS 7 brought with it, so doing some work on that area is interesting (on a Dev & Designer PoV).
- Doing so in less than 24hours, was a challenge that I happily embrace.
The concept, design, development and submission, started on a Thursday, 17/10 @ 21:00 and was finished on Monday, 21/10 @ 00:05. It took around 23 hours.
- Take Picture from camera.
- Pick a photo from the gallery.
- After selecting/taking the picture, be able to add a blur, with a circle shape, around a picture.
- Be able to define the blur’s radius.
- Save the picture with the blur effect on the Phone’s Gallery.
- Share the picture on the most common social networks.
Be able to use Instagram’s URL scheme and open the picture on Instagram, so it can be edited.
Nice to Have
About Screen. Pan Gesture, to resize the circle. One finger gesture, to change the circle’s center.
As you might expect, the “Nice to Have” section is out from the first version of the app. In our opinion, it will make sense, if we have enough people using it. The “Must Have” was kept: even though we don’t bring a lot of features with KirKos, we wanted to make sure that what it does, does well, so we made sure the core functionality was there, from day one. Because we still had some time, the “Share the picture on the most common social networks.” is an integral part of the first version. In the end, adding and removing features is hard, but you should focus on what’s the purpose of your application and that it delivers it seamlessly.
This is the Design version 1.0. With the Selection of the photo on the left, and the edition on the right:
This is version 2.0:
On a first look, the difference is not that big. But take into consideration that version 1, just doesn’t work with 3.5′ iPhone, due to the menu where you have the flash & switch front/rear camera, you couldn’t accomodate that in 3.5′. So on version 2.0, we pushed the flash and “switch front/back camera” to the camera area. This gave us a bit more room for the 4′ version, and decent UI for the 3.5′. We also decided to separate the “Share Button” and the “Save Button”. The initial purpose was to be able to save the image on the phone, but sharing it, on the long run, is more important, so we keep the Share button on the mid. You are also able to save it on your gallery by pressing the “Share Button”, but for the time being we will keep as it is.
The first question that popped into my mind was how could I create the Blur? Fortunately, in that matter, we have quite a lot to choose from. The initial design of the app, was to allow the user to apply the filter while the camera was on, this is very important to decide which 3rd party lib you are going to use. After knowing that FXBlurView wouldn’t work as I wanted, I gave GPUImage a try. Not sure why, I wasn’t able to put it to work on my first try, so I decided to use the same workflow as Instagram:
Pick/Take Photo -> Apply Filter -> Share
On the long run, this brings a couple of advantages:
- Better performance for older devices. I am confident that live camera + effect, would translate into low fps.
- A single place for editing the picture. With this I have more space to show editing controls, and remove the ones used for taking the picture
Since Business side was ok with this change, we move forward with it. For this kind of flow, FXBlurView proved to be more than enough. Some facts about the development and the code:
- One of the places where I lost a lot of time (and wasn’t really expecting to), was trying to put a
UIViewas a subview of my
UIViewand keep the Status Bar visible.
- The total amount of line of codes is around 650. The biggest class is 298 lines.
- I am using two nibs, one for 4′ and another 3.5′, with Auto Layout. This approach revealed to be more practical to maintain.
- The size of the project is 4.3mb.
- I made one question on stackoverflow regarding the creation of the app, which I answered myself.
- Used three 3rd party libs: FXBlurView, UIImage+Orientation, UIColor+Hex. The last two, are classes I created but with other people’s code.
Having two persons, in this case me and Rui, wanting the same thing, really paid of. The fact of being able to ask him an asset, or an approach on something, and being able to receive feedback immediately proved to work (even while working remotely). Without this, it would be impossible to finish it in such a short period of time. I have to say this was a very fun experience and I will definitely repeat it. Finally, the application can be downloaded here.
Note: The source code is available here: https://github.com/RuiAAPeres/KirKos. If you like it, please Star it.