Clouseau

Clouseau is a code inspection tool. Clouseau helps you diagnose problems with the graphical interface of your application and provides information its widgets and their properties.

You can download Clouseau from here.

Starting Clouseau

Clouseau is actually a client that latches onto efl_debugd, EFL's debug daemon. This means that to achieve any significant output, you have to run things in a certain order.

First run the daemon with:

efl_debugd &

Then run your program, and finally run Clouseau with

clouseau_client

Examining an Application

Clouseau will open showing two empty panels. To start inspecting your code, click on the telehone button at the top of the window and select Local from the drop-down menu. This means Closeau will be listening to the EFL debug daemon running on the same computer and that you started earlier.

(Note that you can also debug applications running remotely, by choosing Remote from the drop-down menu and then inputting the details of the remote machine.)

Next, click on the Select App button and a list of all available and debuggable running programs will unfold. Select your program from the list and information regarding the graphical make up of your application will show up in the panes.

Example

To illustrate how Closeau works, we'll use the following code:

#ifdef HAVE_CONFIG_H 
# include "config.h" 
#endif 
 
#include <Eina.h> 
#include <Efl.h> 
#include <Elementary.h> 
 
static void 
_gui_about_clicked_cb(void *data, const Efl_Event *event EINA_UNUSED) 
{ 
  printf("Clicked About\n"); 
} 
 
static void 
_gui_quit_clicked_cb(void *data EINA_UNUSED, const Efl_Event *event EINA_UNUSED) 
{ 
  efl_exit(0); 
} 
 
static void 
_gui_setup() 
{ 
  Eo *win, *box, *hbox, *editor, *button;  
 
  win = efl_add(EFL_UI_WIN_CLASS, NULL, 
                efl_ui_win_type_set(efl_added, EFL_UI_WIN_BASIC), 
                efl_text_set(efl_added, "Basic Editor"), 
                efl_ui_win_autodel_set(efl_added, EINA_TRUE)); 
 
  box = efl_add(EFL_UI_BOX_CLASS, win, 
               efl_content_set(win, efl_added), 
               efl_gfx_size_hint_min_set(efl_added, EINA_SIZE2D(360, 240))); 
 
  editor = efl_add(EFL_UI_TEXT_CLASS, box, 
                   efl_text_set(efl_added, "Edit me"), 
                   efl_ui_text_interactive_editable_set(efl_added, EINA_TRUE), 
                   efl_ui_text_scrollable_set(efl_added, EINA_TRUE), 
                   efl_pack(box, efl_added)); 
 
  hbox = efl_add(EFL_UI_BOX_CLASS, box, 
                efl_ui_direction_set(efl_added, EFL_UI_DIR_HORIZONTAL), 
                efl_gfx_size_hint_weight_set(efl_added, 1.0, 0.1), 
                efl_pack(box, efl_added)); 
 
  button = efl_add(EFL_UI_BUTTON_CLASS, hbox, 
                   efl_text_set(efl_added, "About"), 
                   efl_pack(hbox, efl_added), 
                   efl_event_callback_add(efl_added, EFL_UI_EVENT_CLICKED, 
                                          _gui_about_clicked_cb, efl_added));  
 
  button = efl_add(EFL_UI_BUTTON_CLASS, hbox, 
                   efl_text_set(efl_added, "Quit"), 
                   efl_pack(hbox, efl_added), 
                   efl_event_callback_add(efl_added, EFL_UI_EVENT_CLICKED, 
                                          _gui_quit_clicked_cb, efl_added)); 
} 
 
EAPI_MAIN void 
efl_main(void *data EINA_UNUSED, const Efl_Event *ev EINA_UNUSED) 
{ 
  elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED); 
 
  _gui_setup(); 
} 
EFL_MAIN()

Save this as editor.c and compile it using:

gcc -o editor editor.c `pkg-config --cflags --libs eina efl elementary`

Start efl_debugd and run your application typing ./editor in the terminal window. You will see a window with the title "Basic Editor", text box, and an About button and a Quit button at the bottom.

Run Clouseau, choose Local from the telephone icon drop down menu and choose editor from the Select App drop down.

In the left pane you will see the graphical structure of your application in tree form. At the top you will see the name of your window, in this case XXXXXXXXXXXXX.

Clicking on a widget in the left panel, will open its description in the right panel. The description tells you whether it is visible or not, its color, size, weight, etc. As you can see in the image, highlighting the About button on the left, shows XXXXXXXXXXXXXX on the right.

This information will allow you pinpoint problems in your interface and troubleshoot widgets so the look and behave exactly as you intend them to.