"Translator by Moth"

Tue, January 4, 2011, 09:47 PM under MobileAndEmbedded

updated for v2

This article serves as the manual for the Windows Phone 7 app called "Translator by Moth". The app is available from the following link:

http://social.zune.net/redirect?type=phoneApp&id=bcd09f8e-8211-e011-9264-00237de2db9e

"current" page

The "current" page is the main page of the app with language pickers, translation boxes and the application bar.

Language list pickers

The "current" page allows you to pick the "from" and "to" languages, which are populated at start time. Tapping on either of them brings up on a full screen popup the list of languages to pick from, formatted as English Name followed by Native Name (when the latter is known). In addition to the language names, they indicate which languages have playback support via a * in front of the language name. When making a selection for the "to" language, and if there is text entered for translation, a translation is performed (so there is no need to tap on the "translate" application bar button). Note that both language choices are remembered between different launches of the application.

text for translation

The textbox where you enter the translation is always enabled. When there is nothing entered in it, it displays (centered and in italics) text prompting you to enter some text for translation. When you tap on it, the prompt text disappears and it becomes truly empty, waiting for input via the keyboard that automatically pops up. The text you type is left aligned and not in italic font. The keyboard shows suggestions of text as you type. The keyboard can be dismissed either by tapping somewhere else on the screen, or via tapping on the Windows Phone hardware "back" button, or via taping on the "enter" key. In the latter case (tapping on the "enter" key), if there was text entered and if the "from" language is not blank, a translation is performed (so there is no need to tap on the "translate" application bar button). The last text entered is remembered between application launches.

translated text

The translated text appears below the "to" language (left aligned in normal font). You can tap on the translated text to copy (parts of) it. Until a translation is performed, there is a message in that space informing you of what to expect (translation appearing there). When the "current" page is cleared via the "clear" application bar button, the translated text reverts back to the message.

Note a subtle point: when a translation has been performed and subsequently you change the "from" language or the text for translation, the translated text remains in place but is now in italic font (attempting to indicate that it may be out of date). In any case, this text is not remembered between application launches.

application bar buttons and menus

There are 4 application bar buttons:

  • "translate" button takes the text for translation and translates it to the translated text, via a single network call to the bing Microsoft Translator service. If the network call fails, the user is informed via a message box. The button is disabled when there is no "from" language available or when there is not text for translation entered.
  • "play" button takes the translated text and plays it out loud in a native speaker's voice (of the "to" language), via a single network call to the bing Microsoft Translator service. If the network call fails, the user is informed via a message box. The button is disabled when there is no "to" language available or when there is no translated text available.
  • "clear" button clears any user text entered in the text for translation box and any translation present in the translated text box. If both of those are already empty, the button is disabled. It also stops any playback if there is one in flight.
  • "save" button saves the entire translation ("from" language, "to" language, text for translation, and translated text) to the bottom of the "saved" page (described later), and simultaneously switches to the "saved" page. The button is disabled if there is no translation or the translation is not up to date (i.e. one of the elements have been changed).

…and there are also 6 application bar menus:

  • "swap to and from languages" menu swaps around the "from" and "to" languages. It also takes the translated text and inserts it in the text for translation area. The translated text area becomes blank. The menu is disabled when there is no "from" and "to" language info. This command is also useful if you wish to copy the translated text (simply swap and then select it).
  • "send translation via sms" menu takes the translated text and creates an SMS message containing it. The menu is disabled when there is no translation present.
  • "send translation via email" menu takes the translated text and creates an email message containing it (after you choose which email account you want to use). The menu is disabled when there is no translation present.
  • "post to social network" menu opens a new phone page where you can choose the social networks to which you want to post the translation. The social network options depend on what you have configured on your phone, and can be Facebook, windows live, LinkedIn, and twitter.
  • "pin to start" menu pins the current translation to the start screen. See description further down.
  • "about" menu shows the "about" page described later.

"saved" page

The "saved" page is initially empty. You can add translations to it by translating text on the "current" page and then tapping the application bar "save" button. Once a translation appears in the list, you can read it all offline (both the "from" and "to" text). Thus, you can create your own phrasebook list, which is remembered between application launches (it is stored on your device). To listen to the translation, simply tap on it – this is only available for languages that support playback, as indicated by the * in front of them. The sound is retrieved via a single network call to the bing Microsoft Translator service (if it fails an appropriate message is displayed in a message box). Tap and hold on a saved translation to bring up a context menu with 5 items:

  • "pin to start" menu pins the selected saved translation to the start screen. See description further down.
  • "move to top" menu moves the selected item to the top of the saved list (and scrolls there so it is still in view)
  • "copy to current" menu takes the "from" and "to" information (language and text), and populates the "current" page with it (switching at the same time to the current page). This allows you to make tweaks to the translation (text or languages) and potentially save it back as a new item. Note that the action makes a copy of the translation, so you are not actually editing the existing saved translation (which remains intact).
  • "delete" menu deletes the selected translation.
  • "delete all" menu deletes all saved translations from the "saved" page – there is no way to get that info back other than re-entering it, so be cautious.

Note: Once playback of a translation has been retrieved via a network call, your Windows Phone caches the results. What this means is that as long as you play a saved translation once, it is likely that it will be available to you for some time, even when there is no network connection.

"about" page

The "about" page provides some textual information including version, credits, the ability to tap on the logo icon to rate the app, and a link to the creator's blog (that you can follow on your Windows Phone device). Use that link to discover the email for any feedback.

Live and secondary tiles

When you pin the app tile to the start screen, you'll observe that the tile will "flip" at certain intervals. While the front of the tile is the familiar logo and app title, the back of the tile will show the text and language selection from the last time you closed the app.

In addition, you can pin secondary tiles from within the app, either from the current page (see the app bar menu above) or from the saved page (see the context menu above). In either case, a new tile will be created for you on the start screen for the selected translation. On these secondary tiles, on the front is the familiar logo and the target translation language in English; on the back of the tile is the translated text and the language in the native alphabet. When you tap on these secondary tiles, they will open the "Translator by Moth" app and have preloaded the selected translation language and translation. So these secondary tiles are shortcuts directly to the translation you were interested in.

Other UI design info

"Translator by Moth" has been designed from scratch for Windows Phone, using the nice pivot control and application bar. It also supports both portrait and landscape orientations, and looks equally good in both the light and the dark theme. Other than the default black and white colors, it uses the user's chosen accent color. Finally, it has been updated to take advantage of new NoDo/7.x/Mango/8.x phone features

Feedback and support

Please report (via the email on the blog) any bugs you encounter or opportunities for performance improvements and they will be fixed in the next update. Suggestions for new features will be considered. If you like the app, don't forget to rate "Translator by Moth" on the marketplace.