TiToYo real time traffic information - app showcase

Comments

(no comments yet)

Log in or Join to leave comments.

TiToYo gives real time information of road traffic conditions. This article provides and overview of the the app structure, and how it was ported to Symbian use Qt Quick Components.

Article Metadata

---

Tested with

Devices(s): Nokia C6-01, Nokia E7-00 Belle, Nokia C7-00 Belle, Nokia N8-00 Belle

---

Compatibility

Platform(s): Symbian^3 and later, Qt 4.6 and later

Device(s): must have internal GPS

---

Platform Security

Capabilities: Location, NetworkServices

---

Article

Created: durfejs (06 Mar 2012)

Last edited: hamishwillee (20 Apr 2012)

Application

We developed TiToYo as a traffic information channel for drivers on the road. They get real time info in their handhelds on the very current information on the road.

 

TiToYo was initally developed for Android platform and later ported to Symbian Qt platform.

Approach

Initally TiToYo application was written for Android platform. The main task was to maintain simplicity of the UI layout and make use of Qt functionalities. Qt platform was chosen because it targets large audience of Nokia smartphone users. With Qt Quick and QML it is very efficient to re-write / port any application to Symbian platform. In this article we will make references to QML components of Qt Quick, because basically the whole application was written in QML, which is very effective.

1. Main UI components used in previous platform

UI layout of TiToYo is very simple. It uses tabbed page interface, on each tab it lists the actual traffic information in a list view, indicating the direction, location and distance of each traffic information. Each traffic information can be selected with click and further information is shown on a separate screen. So we indentified the following main UI components to be ported:

1. tabbed view
2. list view
3. separate page view for traffic info details
4. in addition to above mentioned components we needed to add Symbian specific components - toolbox and infobar

Here they are (already shown ported on Symbian device):

2. Porting of tabbed view

On previous platform tabbed view was using a special class called TabActivity. On Qt Quick we use for this purpose TabGroup QML element, with childs representing separate Page QML element. Different page for different tab. TabGroup element is itself a child of the main application Window element.

The tabs itself are hosted in a special element called TabBarLayout with childs representing each separate TabButton. Each TabButton has assigned icon, text and reference to a page from previous TabGroup element.

3. Porting of list view

List view was on previous platform using a special class called ListActivity, which used a special Adapter to bind this list to underlying data (from SQLite DB). On Qt Quick we use for this purpose ListView element which points to delegate which is drawing the separate traffic info line and a model which is holding data for the listview. As opposed to previous platform, where each tab had its own activity showing different types of traffic information, this time on Qt Quick we use common ListView, common model.

Specificality

Since we have here implemented a common ListView with common model, each time a tab is clicked the model needs to be re-populated to show the appropriate traffic info (i.e. not mixing accidents with contraints). The data itself is loaded from SQLite database which functionality is implemented into QML very efficiently.

SQLite is very powerfull in data manipulation, and since we want to have all traffic info sorted according to the distance from us (closest first) a SQLite feature of sorting comes very handy and we can dynamically rebuild our data model with current data from SQLite of course sorted.

4. Porting detail page view

In previous platform if the item in the list view has been clicked a separate activity has been triggered, which displayed info on a separate screen. This functionality is accoplished in Qt Quick with an element called PageStack . By default pagestack is showing a default page which is in our case the page containing the universal listview (which model is populated dynamically). When we click an item in the listview a separate Detailpage is pushed onto the pagestack. This Detailpage is loaded from a separate QML file.

Specificality

Data in the detail page is not loaded directly from SQLite, but instead it is read from the model of the listview. Therefore we could easily implement moving to the next and to the previous detail page buttons, and we simply reference the item from the listview by its ID.

Design guidelines compliance

TiToYo application is build using Qt Quick components for Symbian, and therefore makes use of specific components designed for Symbian. Layout of these components specifically follows the guidelines as for example the topmost infobar and bottom ToolBar.

Innovative approach

We have incorporated a progress wheel directly into the bottom toolbar, which is indicating activity of downloading the traffic messages from the server. Further more a country icon is also incorporated into the toolbar. It can be pressed and a custom Country dialog will be opened.

Meeting additional design criteria

Logical and consistent navigation structure

Application starts with a main screen which is a tabbed interface page. Each tab hosts a listview element. If you click on a listitem, a detail screen is opened with further information regarding the selected traffic information from the listview. From the detail screen it is possible to navigate back to list view usign "BACK" button of the tool bar. Furthermore toolbar of the detail screen contains "prev." and "next" buttons which can be clicked to browse among the traffic messages directly in the detail view. Again "BACK" button takes us back to the list view. If you press "BACK" button in the app's main screen which is the list view, a confirmation dialog pops up confirming exit out of the application.

----> ---BACK--->---BACK--->

From the main screen of the app it is possible to select in from the context menu Map view. When in the map view it is possible to select different traffic messages right on the map, simply by tapping them. Map recenters itself and at the top you can see the description of the traffic message. If you click the description, app navigates again to detail screen. Then if you push "BACK" button on the toolbar application navigates back to the map. If you hit again "BACK" button on the map it takes you back to the main screen of the application

---menu---> ----select Map---> ---select item at the top---> ----BACK----> -----BACK----->

App icon consistent with Symbian style

This is the icon for the TiToYo application:

It represents a traffic cone and it is prepared in confirmation with the guidelines. We needed to convert it in the final step to svg small format which is the preferred format used on the Qt platform.

Correct use of components

Different types of components being it:

• list view
• list items
• buttons
• pages and pagestacks
• toolbar
• different dialogs
• menus

are used throughout the application appropriately and logically.

Non-threatening interface - don't ask the user for confirmation or passwords unless necessary

Application is not using passwords at all. We have built in 3 kinds of confirmations in our application:

1. Confirmation when user is trying to download messages off the server and the device was not able up to this moment to determine its location. So traffic messages can be fetched from the server regardless of the device position.
2. Confirmation when the device acquired its position after the traffic messages have been fetched from the server regardless of the device position, that the messages should be again re-acquired
3. Exit confirmation

These confirmation are used appropriately only when needed.

Good use of screen real estate

Application uses appropriately the maximum of the screen layout to display the real - time traffic information. Also the mapping is done using the maximum possible area of the screen taking into consideration also the detail row at the top of the map screen.

Utilising the toolbar where appropriate

Toolbar is utilized throughout the application where possible. The layout of UI item positioned in the toolbar change from screen to screen. For example in the main screen toolbar hosts the flag, which can be pressed and a country selection dialog opens. In the detail screen hosts "prev" and "next" button to browse details of the messages. Map screen toolbar then hosts a menu button, a nice "MY POSITION" button and a back button, as logically appropriate.

Download Link

You can download this application from Nokia Store here: Nokia Store URL

Also please follow TiToYo Homepage

Note: This is an entry in the Symbian Qt Quick Components Competition 2012Q1