UI Setup

For the initial setup for image input, we need a mechanism to snap a picture from our phone’s camera or select one from photos and display it on the app screen. Please refer to my detailed blog with all steps to achieve this. The exact same mechanism will be used here.

After this basic setup, we need to make some additional arrangements for the translation bit that we’re adding in this app. So as of now, our Main.storyboard should look something like this:

Figure 1: Main.storyboard after initial setup for image input

We have the following components on screen:

2 UIButtons: Camera and Photos — These will help you input an image, either with the phone’s camera or photos library respectively. UIImage — This will display your input image. UILabel — This will display the detected text.

We will now go ahead and add a few more components, below those initial ones listed above:

UILabel — This will display the translated text. UIButton — To pop and dismiss the language options view. UIPickerView — To display the set of language options to choose from.

The storyboard should now look like this.

Figure 2: Main.storyboard after adding components for translation

Observe the constraints given to all the newly-added components:

1. UILabel for translated text

Create an IBOutlet for the translated text label so that we can show translated text—you can constrain it as follows:

Figure 3: Translated text label constraints

2. UIButton for the language selector

This button will control the language selector’s hide and show actions on the screen. Create an IBOutlet as well as IBAction outlet on this button. You can use the following constraints with respect to superview and picker view:

Figure 4: Language selector button constraints

3. UIPickerView for the list of languages

This view will display the list of languages for translation. The height constraint of the picker view can be manipulated to hide and show it on screen. Pull out an IBOutlet for the height constraint. The rest of the constraints on IB are as follows:

Figure 5: UIPickerView constraints

Now that we have the UI in place, let’s move to the ViewController code.

Image Input Flow

There are two ways to input images to our app for text recognition — through photos or through direct camera capture. The setup with the code for the same can be found from the same blog referred above for UI setup.

Once we have this boilerplate code in place, we can begin our text recognition. More on that in the following sections.

Language Selection Flow

For this new flow (as we saw in the UI setup) we have outlets for:

UIButton and its IBAction to control the language selection list — languageSelectorButton and languageSelectorTapped UIPickerView for language selector — languagePicker UILabel for translated text — translatedText

When languageSelectorButton is tapped, the languagePicker pops up on the screen if not already present; otherwise, it dismisses. We play with the height constraint of picker view to achieve this.

Whenever we dismiss the selector by tapping languageSelectorButton we call the translate method with the recognized text as a parameter so that it’s translated to the selected language, which causes the button text to change to the language selected.

In the translate method, we call the Google Translate API to translate the most recent detected text to the desired language. More about how we deal with the API for translation in the following sections.

Figure 6: IBAction on UIButton- languageSelectorButton

To populate the data in the UIPickerView , we extend the ViewController with UIPickerViewDataSource .

We can use two arrays to keep track of the language label and its code for passing to the translation API. See the declaration of the same below. You can add as many languages and their respective codes supported by the Google Translate API. The default language for translation in the below code is Hindi, and there are four more languages available for translation (French, Italian, German, and Japanese.

Whenever a row in the language selector list is selected, we store the code for the selected language of translation in the targetCode variable and change the button title to name of the selected language.