Archives pour la catégorie uTranslate

uTranslate : first design recap

Now that the contest is finished and while waiting for results, I can take some time to explain the design of uTranslate.

First, I had big constraints : only 3 weeks available, no knowledge of QML. So I had to choose a simple subject. A subject that needs as few as possible work for the engine and that allows me to work on the UI.

For my own needs, I thought about a traffic app (a port of an android GPL app). But after digging into the code, it was not so simple : gathering datas was an ajax request, but rendering them involved a lot of work. My next need was a translation app. After few searches, I found the glosbe website, with their open API (an ajax request) and their call for opensource. Bingo ! it’ll be a translation app.

A friend of mine is german and I looked at her using her iPhone to translate some words while we were talking. So use cases were defined « live » !

  • she starts app, type first letters of a german word, app suggest a list of words, select one suggestion and she sees the french translation ( the lang german/french were predefined)
  • I take her phone, switch language, and perform another similar translation

The main idea is « efficient » : every saved click/tap is very important :

  • when the app is started, it must be able to receive immediately an input form user :
    • the lang must be what the user has already defined
    • the focus is on the search text
  • list of suggestions is very important : it allow the user to NOT type other characters
  • given the small screen size on phones, the list of suggestions should appear above other elements.

The Glosbe API bring some changes : it allows 2 calls : one for translation, another for definition. How can I integrate that ? A first idea is tab under the search text.


But in the Ubuntu Touch UI, tabs are always at the top of the screen. And each tab has his own content. So I thought that it would be interesting that both tabs share the same context : the languages and the search text should be identical in both tabs.

I made a very first prototype to discover QML and test this idea. Thanks to QtCreator autocomplete feature, I quickly found the ‘onSelectedTabChanged’ and ‘onSelectedTabIndexChanged’ : my idea was working well ! The core of uTranslate was ok.

Then, the « popopver » effect of suggestion list was made with the « z » property. Plus 2 animation for expand/reduce. Cool.

Initially, there was more buttons beside the search text : a « search » button and a « switch » button for the « translation » tab. But after some testing, it appeared that :

  • « search » button is useless : we always use the suggestion list or the « enter » key on keyboard,
  • the « switch » button is not so important, so I moved it in the toolbar,
  • the look of flags buttons is not very good : I replaced the standard buttons by pure Image with a MouseArea

The result is a very clean search UI, with much bigger flags, without visual annoyance.

Then the « settings » and « about » pages were added in a general PageStack object. When user comes back in translation/definition tab from one those pages, the focus is on the search text and suggestion list appears : the app must always help user find a word. If it doesn’t behaves like that, it’s not a feature, it’s a bug ! ;-)

As I’m not a graphics designer/artist, I didn’t try to define new colors. I know this is a strong effect that help users say an app is beautiful. But it’s better I ask someone to do it. I just made a simple icon for the contest.

This is the current version 0.2.1. I think that it fully respect the initial idea : no whizzbang features, just efficient, efficient…

Obviously, I think about some new features, but I’ll try to always keep that initial idea of efficiency.

PS : Oh, I forgot to tell that the « .1″ in « 0.2.1″ is because I found the U1db bug ! it was the filename in the definition of the database. Weird…

uTranslate : version 0.2 submitted to AppStore !

Yesterday, I could create version 0.1 and upload it on AppStore !

And today, I finally created version 0.2 of uTranslate :

  • list of suggestions has correct text size, correct clip
  • list of suggestions has a visual effect when selecting an element
  • lang selector has flags without visual artefact (it was related to the fact that icons have to be square images)
  • added an information for user if network error

Unfortunately, it seems the U1db storage works only on the desktop.
After tests, some problems appear with OSK  in landscape mode : it seems that the ‘tap/click’ event is propagated to other widgets.

Here are some screenshots taken from my Nexus 7 :

uTranslate5-1     uTranslate5-2

In landscape mode :


A new visual effect when selecting a suggestion :



uTranslate : Convergence & storage !

Full steam ahead !!

uTranslate now stores the languages chosen by user : when you close and restart uTranslate, you find your last settings. And it handles convergence : the layout is modified to handle big screens.

Here is the standard (phone) layout :


And here is the layout for tablet/desktop : the suggestion list is always visible :




uTranslate : week 2

I worked on improving layout and UI for ‘phone’ layout :


When you start typing, the suggestion list appears, like a popup under the text field :


And the suggestion list disappears when you click on ‘search’ or a suggestion :


It’s the same state when you switch to other tab :


And the suggestion list appears as soon as you tap on the search field :


The ‘settings’ button moved in the toolbar :


And it is a simple Sheet :


But this will be changed in the future, as Canonical designers said the official place for settings should be in the HUD.

Of course, the layout handes other screen sizes (but it’s not ‘Convergence’) :


uTranslate : first week, screenshots !

Here are the results of one week of work on uTranslate !

QML is really a fantastic technology ! It’s the first time that I use a tool that seems to be perfect for GUI coding. It’s light years better than other I used : MacApp, HTML+CSS+JS, XUL. In my opinion, it’s on par with Apple’s tools (InterfaceBuilder) while being different : QML allows to write controller’s code beside or even inside the UI declaration ; while InterfaceBuilder clearly separates UI and code (well, last time I used IB was few years ago).

So I created foundations : basic UI (2 tabs + a shared context), handling of ajax request to glosbe server, language selection, basic user interaction.

And you’ll see that everything remains to be done about layout&convergence : that’s the subject for next week ;-)

Here is the default screen :


As soon as you type, you see suggestions :


If you tap on a suggestion, it chooses the suggestion and perform search :


Whenever you switch to tab « Definition », you keep your search and suggestions :



If you change the destination language,  the translation is performed :



Here is the screenshot after « Italian » selection :


uTranslate for UbuntuTouch !

I decided to enter the Ubuntu App Showdown ! ( and

I plan to write a dictionary/translation app : « uTranslate ». The online engine will be provided by, thanks to their simple API ( and their support of OpenSource ( Maybe future versions  will handle other providers.

As the deadline is September 15th, it’s already a difficult task !
And I have to learn nearly everything : QML, QtComponents, Click Packages !…

Well, the good news is that the online engine already provides the expected behavior : I can concentrate on design & coding of client app.