Sample

You are here

You are here

Page Example

(Circle) Dialer Sample Overview

The (Circle) Dialer sample application demonstrates how you can create a circular dialer and use the Entry UI component to show the digits entered by the user. It shows how to hijack upper layer touch events to determine, without a button, which digits the user has touched.

With this application, you can understand a simple circular dialer view and touch event control techniques. The application does not include call functions or companion mode operation.

For information on creating the sample application project in the IDE, see Creating Sample Applications.

The following figure illustrates the main screen of the (Circle) Dialer.

Figure: (Circle) Dialer screen

On the application screen, the user can dial a phone number by touching the digits at the edge of the screen.

Source Files

You can create and view the sample application project including the source files in the IDE.

Table: Source files

File name

Description

edje/images

This file contains the image files used in the main.edc file.

inc/data.h

This file contains information and definition of the variables and functions used in the C files, especially in the data.c file.

inc/dialer.h

This file contains information and definition of the variables and functions used in the C files, especially in the main.c file.

inc/view.h

This file contains information and definition of the variables and functions used in the C files, especially in the view.c file.

res/edje/main.edc

This file is for the UI and contains style, image, and position of the sample application.

res/images

This directory contains the image files used in the C files.

src/data.c

This file contains the functions for retrieving and creating data for the application.

src/main.c

This file contains the functions related to the application life-cycle, callback functions, and view control.

src/view.c

This file contains the functions for implementing the views and handling events.

Implementation

Application Layout

To create the basic application layout, use the view_create() function. The window and conformant components are essential parts of the application layout.

Main View

The main view contains digit buttons, function image buttons (Call and Delete), and a digit input field showing the selected digits.

Figure: Main view

The structure of the main view is very simple. The circular positioning text and digits are merged with a background image. The result is a screen where the user feels like they are touching a button at the edge of the dial, while, in the actual implementation, the button is just an image and text. For the details of this kind of trick button implementation, see Making a Digit Button.

Figure: Main view structure

To implement the main view:

Set the background image and the image buttons using the view_set_image() and view_set_color() functions:

To do something when the button goes down or up, customize the _btn_down_cb() and _btn_up_cb() callbacks, or create another function for the action.

In this example, the _btn_down_cb() and _btn_up_cb() callbacks handle the touch events of the Delete button. When the user touches the Delete button, the _btn_down_cb() callback changes the color of the button and removes a digit in the digit input field, while the _btn_up_cb() callback returns the button color to normal.

To implement the digit input field in the center of the screen, use the EFL Entry component. The EFL entry is a convenient UI component that shows a box in which the user can enter text.

The view_create_entry() function creates an entry component and returns the component object. The object is needed to control the entry component, for example, to delete its text or change the text style.

Making a Digit Button

The trick digit button in the dialer is implemented touch event hijacking. The button is actually just images and texts as shown in the main view structure. You can transform those images and text into a trick button by hijacking user touch events.

Figure: Transparent layer for touch event hijacking

To implement touch event hijacking:

Create a transparent layer for touch event handling

The evas_object_rectangle_add() function creates a rectangle object on the canvas.

The evas_object_repeat_events_set() function enables the touch events to be repeated on the lower layers. Event repetition is very important to correctly handle touch events for each layer.

You must calculate the position of the touch events that the transparent layer catches on the canvas. Events are handled or discarded according to the position of the touch event.

In the calculation, check the radius and slope. The radius from the center of the screen to the position of the touch event must be longer than the distance from the center to the button image. If the radius is shorter than the threshold, the touch event is ignored and just repeated on the lower layers.

To determine the correct digit being touched, use the slope of the touch event position. For example, in the following figure, if the slope of some event position is higher than line 1's slope and lower than line 2's slope, you can determine that the digit 1 button is being touched.

The _rectangle_mouse_down_cb() callback is called with the touch event information from the transparent layer. The _get_btn_dial_number() function is used to calculate the position of the digit by checking the radius and slope.