Skip to content

YouCompleteMe: semantic auto-completion and JumpToDefinition for VIM on webkitgtk+

11-Sep-13

Prelude

Jump to the next session if you don’t want to read lullabies

There was a time when I was a Qt application developer working with vim. It worked pretty well until I started to work with large applications such as Meego Application Framework.
Hundreds of thousands of files, classes, I couldn’t memorize everything. Then I discovered QtCreator with VI-mode.

I’d never really liked big/heavy IDEs but QtCreator wasn’t that heavy, it had a decent vi-mode and I was able to use the cool things such as auto-completion and jump-to-definition.

Three years later here I’m working with raw VIM again, on top of webkitgtk+ so QtCreator is not an option anymore. What to do?

You can tell me about ctags and cscope… Sorry, ctags and cscope sux for c++ code, really! I tried hard, I wrote scripts to parse the GNUMakefile.list.am and use only the important files but it wasn’t enough. Ctags can’t really deal with classes, doesn’t know much about scopes and VIM auto-completion wasn’t semantic. How to solve that problem all-in-once?

YouCompleteMe

YouCompleteMe GIF

Description

From the original website: “YouCompleteMe is a fast, as-you-type, fuzzy-search code completion engine for Vim.”

Installation

The installation procedures are quite simple and well defined on https://github.com/Valloric/YouCompleteMe#readme
Basically, you need to use Vundle (why are you not using it yet?!) and drop the YCM files in the right place. The installer will do the rest.

vimrc and vundle

if YouCompleteMe is your first Vundle plugin, your .vimrc file should start like this:


set nocompatible " be iMproved
filetype off " required!

set rtp+=~/.vim/bundle/vundle/
call vundle#rc()

Bundle 'gmarik/vundle'
Bundle 'Valloric/YouCompleteMe'

Remember to use those lines at the beginning of the file, other rules should appear after that.

How it works

Basically YouCompleteMe uses a .ycm_extra_conf.py, which is a python script that helps YouCompleteMe plugin to find the compiling flags. Those flags are required so clang can interpret #includes and #defines from other files. It might be required a .ycm_extra_conf.py for each project you work on (Although it would be awesome to have a generic Makefile parser).

For webkitGtk, you can drop this file into the root folder and you’re done. Or you can help me to add traction to Ycm and push this patch upstream.

Tips&Tricks

Add this to your .vimrc

nnoremap y :YcmForceCompileAndDiagnostics
nnoremap pg :YcmCompleter GoToDefinitionElseDeclaration
nnoremap pd :YcmCompleter GoToDefinition
nnoremap pc :YcmCompleter GoToDeclaration

If you’re used to the webkit codebase you know how painful it is when you touch one file, wait two minutes to build and find out that you forgot a semicolon.
You can type \y to check if the file is compilable (clang will actually compile the file for you) and give you warnings/errors for that specific file.
\pc and \pd are also usefull for jump to definition/declaration.

So, if you’re working on WebkitGtk now (or any other project that might benefit from YouCompleteMe), give it a try!

Prague, Telepathy and HTML5 IM Client

03-Nov-11

Hey guys!

Last week I’ve attended to GStreamerConf and LinuxConf conferences in Prague, and Siraj and I had the honor of having our current project for Collabora exposed on Collabora’s booth. It shared space with two others amazing Collabora‘s demos:

  1. Media Explorer running a Telepathy plug-in, which adds IM and Audio/Video capabilities to the system.
  2. HTML 5 client of a video editor, using GStreamer Editing Services on top of GtkWebkit.

A little bit about Telepathy Webkit Client

During the last few weeks I’ve been working on a Telepathy client, a very special one, written almost only with HTML 5 and Javascript, on top of GTK WebKit and Seed.
The goal of this project was writing a Telepathy based IM client, to run on top of WebKit, and it should be able do make and receive audio and video calls.

GObject introspection magic

The first question to be answered was “How access the Telepathy methods from Javascript?”

And the answer was: GIR and Seed.

As all Gnome developers know, GObject introspection (GIR) allows us to access a GObject written in C  from a scriptable language, such as Javascript. So that’s part of the answer.

And Seed binds those introspected objects on WebKit JavascriptCore, which is pretty much what we wanted to do.

Following a few screen-shots

Contact List

Our first goal was to show the Telepathy’s roaster list on a HTML5 window. For the widgets, we choose to use joApp, which is a quite nice and stable UI library for HTML 5 applications.

 

Chat Window

Telepathy chat window
What’s a IM client without a Chat window, right?!

The “tpwebkit” application with an opened text channel between two users.

Receiving a call

Telepathy WebKit application acting as a Telepathy approver for audio and video calls

That’s me, from the point of view of my test machine…

The real thing running

If you want to see the real thing running, you can watch this video showing the application during the early development state.

Conclusions and future work

As we can see from now, Telepathy is ready to be use on native and HTML applications.
I really would like to see the current implementation integrated with the bleeding edge RTC API, which some guys are pushing to WebKit. That would be something really awesome.

If you want to try it, you can get the code here and play with it. You’re also going to need a few special changes on Seed package. Check the linuxconf branch here.
Or, if you use Ubuntu, you can add Xavier’s PPA and install the tpwebkit package.

Beat Maker – call for testers

18-Jan-11

Hello all!

I promised this new release for the end of the last year, but I delayed it a bit due some changes in my professional and personal life.

Anyway, basically this release is about bug fixing and performance improvement. It’s using less power now, and playing faster.

If you want to try this version, you can get the package here.

And bugs reports are always welcome, and needed ;)

ps.: I’m still trying to upload it to OVI, lets see…

Beat Maker: The drum loop maker written with Qt

14-Oct-10

Beat Maker is my “pet project” with Allyson Soares at INdT.

It is, basically, a drum loop emulator to be used by musicians during practicing sessions.

You just need to select the samples, define a BPM value and listen to the rhythm ;)

If you can’t wait for the official release at Ovi Store, you can try the beta version for n900 devices.

Remember: it’s a beta version of an open source software. The code can be found linked to my gitorious account.

The technical point of view:

I’m a little bit disappointed with phonon. After a long discussion I’ve realized that phonon could not be used on Beat Maker.

At this time I’m using an approach suggested by Adriano Rezende: play the sound using pulseaudio’s API. I know, it’s not portable. But hey, my target is N900 devices and it worked pretty well at the time.
However, it doesn’t scale. So, now, I’m working on a kind of “in-app-mixer”, which should solve this problem.

There is another problem, related to QTimer. Qt can’t guarantee the timing between the beats using QTimer events. Especially when you generate mouse events. Anyway, the mixer controller loop should solve this as well.

Big thanks to Adriano for the tips, and Allyson who made the excellent UI design.

I hope you enjoy it.
Suggestions are welcome =)

ps.: youtube video bellow

Symbian, 2D games and Qt Optimization Flags

19-Sep-10

After two and a half years building rich UIs on top of QGraphicsView and trying every kind of exotic flags or approaches to get better performance results on symbian, I’ve decided to publish some of them which can be useful to game programmers.

With a little help of Ademar, we’ve selected a good use case: a bouncing game.

The game

10 balls image of chainreaction game

This game is simple: there are some balls running on the screen, and if you press one of them it will explode, and if a red ball touches a exploded ball, it will explode too. However the game logic is not important here. Lets list some of the characteristics of this game from a developer’s point of view:

  • Static background.
  • Balls can be implemented as GraphicsItems.
  • Red balls are always moving.
  • Non-exploded ball doesn’t collide.
  • List of elements can grow fast.
  • The items are scattered on the screen
The comments bellow are only valid for the characteristics of a game defined above.

The flags

The flags I want to comment on this post are:

The results

* Those tests were performed on a Nokia 5800, type RM-356, with V51.0.006 firmware and Qt 4.6.3.
** The Y axis is measuring FPS: the higher, the better.

10 elements on the screen

First of all, I’ve tried the four ViewportUpdate methods, with 10 items on the screen, and the MinimalViewportUpdate and the SmartViewportUpdate gave me the highest FPS( 34 and 33.5) . Qt documentation shows NoIndex as the best option for dynamic scenes… well, the difference is small for few items, but it’s true =)

So, for the other tests, lets use the NoIndex flag.

What about optimization flags?

I took two results from the latest test (SmartViewportUpdate and BoundingRectViewportUpdate) and ran it again with two optimizationFlags: QGraphicsView::DontSavePainterState and QGraphicsView::DontAdjustForAntialiasing. So, optimizations flags brings us a little bit of improvement when we can control precisely how the items will be drawn.

20 elements

30 elements

40 elements

Lessons Learned

It’s important to select the correct ViewportUpdate method for your kind of scene. It can make the difference.

If there is a lot of dynamic elements, and if they are scattered throughout the scene, it’s cheaper to paint the whole screen (or, at least, the bounding rect) instead of trying to determinate the affected area.

To be honest I was expecting a better result from FullViewportUpdate, but I believe it would be better than BoundingRect if we use non-static background.

What if?

What if I use only one graphicsItem to paint all the balls? What if a ball was not an item but an object with a render method?

I got a little bit surprised, it wasn’t the result I was expecting – it’s worst. It only gets to be better when I put more than 60 items on the screen.

Will I throw the code in the garbage can?

No! As the result of the tests and with a creative help of Nara – INdT designer – I’m releasing a playable alpha version of this game, called by Chubba-Lubba. It’s not finished, since it’s still missing the icon, sounds and scores features, but it’s testable =)

Symbian package here!

Symbian development using Linux on real life…

05-May-10

I believe most companies that develop Symbian products uses windows, and only windows, on their development process. Well… We don’t =)

When we started to develop symbian applications at INdT we, as open source developers, decided to find a way to keep using linux as our development environment.
On the beginning we didn’t have yet an official way to compile our applications on linux, so we used (and still use) Lizardo’s patchs that enables gnupoc to compile Qt-symbian applications on Linux.

First tip:

Personally I think finding errors on gnupoc output is an exhaustive job. So, the first tip for those who’re using Lizardo’s approach is to use a small piece of code in your .bashrc

function makes60
{
  make debug-gcce 2>&1 | while read line
  do
    echo -e $(echo $line |
      sed 's@\\@\\\\@g' |
      sed "s/.*error.*/\\\e[0;31m(&)\\\e[0;31m/I" |
      sed "s/warning/\\\E[33m(&)\\\E[0;37m/gI" |
      sed "s/No such file/\\\E[33m(&)\\\E[0;37m/gI"
      )
  tput sgr0;
done;
}

By calling makes60, every error/warning message will be highlighted in read/yellow.
It’s a simple tweak, but it is very useful.

So, we can compile our application, easily read the compiler messages… Now what?

Analyzing the process:

Let me list our development phases:

  • Coding: OK with vim
  • Compiling: OK with gcce and some tweaks
  • Debugging: (As we work almost only with default Qt API, we build for linux first and debug there). So, it’s almost OK.
  • Packaging .sis: OK with make sis
  • Send to device, install and test: It’s a slow process yet.

Testing on the device is a very difficult/slow task on linux. We don’t have a debugger. We don’t even have any output message (Ok, we have: with stdioserver writing on an txt file. Too hard!).

How does it works for Windows developers? Carbide++ and TRK!

Of course we don’t want to install Carbide++ on linux. So, can we use TRK with linux? Yes, we can! First of all you need to get the TRK application in Carbide++ package or in newly released Nokia SDK.

Installing TRK:

  1. Send and execute TRK.sis on the device.
  2. Open TRK application / Options / Settings,  and select Connection = USB instead of bluetooth.
  3. Go to TRK mainscreen / Options / Connect.

If your USB cable is plugged you will receive a “Status: Connected” message on your phone.

Now you need to create a serial connection between the device and your linux machine. If you’re using a 2.6.33 kernel you don’t need to do that. Otherwise you need to create it manually.

Before you do that you need some information about the device. It can be retrieved with:

[danilo@docbrown ~]$ lsusb  | grep Nokia
Bus 001 Device 011: ID 0421:0154 Nokia Mobile Phones

So, my vendor ID is 0421, and my product ID is 0154Remember to use your own numbers =)
And then you can load the usbserial mobule with the command:

sudo modprobe usbserial vendor=0x0421 product=0x0154

If everything went OK you should see a message like this:

[danilo@docbrown ~]$ dmesg | grep ttyUSB
[34063.949446] usb 1-4.3.1.4: generic converter now attached to ttyUSB0

Your serial port was created on /dev/ttyYSB0.

Ok, perfect! But how to communicate with TRK?

Trolls are working on that, but for now we’re using the runonphone tool. It’s the same tool used by QtCreator on Windows and you can get it by cloning Qt Repository and compiling the /tools/runonphone folder.

On device testing

After compiled, runonphone can be used by passing the serial port, the sis package and the executable file to it.
runonphone -p /dev/ttyUSB0 -s test_package.sis test_package.exe

As you probably noticed all your qWarning() messages are being redirected to runonphone output. Which is very nice!

On device debugging

We don’t have an interative gdb tool as we have on windows, but Qt guys are close and I’m sure we will have good news in a few days.

Concluding

I’m sure that Symbian development on Linux is near, and it will be massively adopted when those tools became part of QtCreator for linux. For those who can’t wait, or think that VIM is the best IDE ever, I hope those tips can help you. =)

And for those who’re working with Qt for symbian, remember to join the #qt-symbian on Freenode.

Have you ever seen KDE Mobil?

27-Aug-09

KDE Mobil

I have! =)

Excelent News; Bossa Conference, Kde 4.2 and Debian Lenny!

05-Feb-09

I’m quite excited about the news of the last few days.

First: KDE 4.2 was released. I’m using as my “oficial desktop manager” at work and I’m pretty happy about it.

Second: Debian Lenny might be released this month.  I’m using it too, and I know the result will be very good!

Third: BossaConference agenda is ready. Think about great minds talking about OpenSource, Maemo, etc, in a paradisaical beach. I had the opportunity to join Bossa ’07, and it was great! We can’t miss this one! See you there! =)

openbossa

SU-W8 accents on N800.

30-Jun-08

I was wondering why my SU-8W BT keyboard doesn’t work well with pt_BR layout. So, yesterday, I decided to investigate this.

When I was trying to pairing my keyboard, I could see that Su-8W is a pre-configurated keyboard, and with a little of patience, I dicovered the file who manages this: /usr/share/X11/xkb/symbols/nokia_vndr/su-8w.

With 5 minutes by reading this file you can be familiarized with file syntax. And, with 10 minutes, you can note that THERE IS NOT A LAYOUT DEFINITION FOR PORTUGUESE/SPANISH. So, now I know why the Portuguese layout doesn’t work =).

But, Ok. Lets try to fix it.

If I select portuguese layout, and there is no portuguese layout, I assume that it’ll use us-intl, right? But, in the begining of the intl definition exists a anoying comment: “I can’t belive! It’s not intl”. Hummm…

Lets ignore this, and go on… What do I need? Dead_keys in `,~,",',^, and ç when I press “ALTgr + c”.

I’ll not explain all the changes I did (it’s not too much, just 4 boring lines), is easier to download and replace the old file by this one, or see the diff. [ADVISE: DO NOT FORGET TO BACKUP THE OLD FILE]

Su-8W Working

And Voilà, Accents and Cedilla working like a charm.

The right workaround for it is create a valid portuguese layout, but just for testing proposes you can alter the intl layout.

Ok, that is it,

Cheers!

Pychord2 beta Released!!

07-Apr-08

Someone told me some years ago:

You cannot just put a son in the world. You need to take care of it, to suport it, and help it to grow.

So, because of this, I’m releasing a new N8X0 version of Pychord.

As you know, Pychord is an application to help musicians with song chords. It can be summarized as a Song Book, but it’s not only a song book. Think about having all your musics in a small device with a good screen. Think about fast searches by lyrics. Think on changing music tones on demand! It’s Pychord!

So, if you want to test it, get the install file here.

Pychord HowTo

1 – Pychord file format

First, you need to know the format pychord accepts. It uses a chr file format. Bellow you can see a simple example of a valid chr file.


name:Backet Case
artist:Green Day
D#5 A#5
Do you have the time
C5 G5
To listen to me whine
G#5 D#5 A#5
About nothing and everything all at once
D#5 A#5
I am one of those
C5 G5
Melodramatic fools
G#5 D#5 A#5
Neurotic to the bone no doubt about it

So, we have two headers:

  1. name: Name of the music
  2. artist: Name of the artist

And below we have the chords in pure text. It’s very simple.

2 – Installation

Take the latest deb file here and install it on your device. After that, go to your “Extra Menu” and open Pychord.

In the pychord first screen we have some informations like:
This the pychord2 first screen

  1. Text you want to search in the database
  2. Search context. You can search music by “Music Name”, “Artist” or “Word” (Lyric part)
  3. Search button
  4. Close window button
  5. Information window
  6. Playlist window

3 – Start and update

First of all, you need to create your database file. When you have new lyrics, or in the first time that you execute pychord, you have to execute pychord’s update procedures. To do that, just click on Information Window[item 5 for the list above]. There’ll be a window like this:

  1. Where pychord will install their database files (Internal Memory, external memory card, Internal memory card)
  2. Where pychord will look for chr files on updates (Internal Memory, external memory card, Internal memory card)
  3. Show Advanced Options
  4. Save settings
  5. Update database

Just explaining: [1] and [2] are combo boxes with a few options (I’ve tried to keep it as simple as possible). If you want to set a specific local, click on advanced options. ComboBox[1,2] will be replaced by input boxes. And there you can type full paths.

When you are done configuring Pychord, just press Save.

Suppose that your chr files are in your external MMC. On “Song Directory” select “Pychord/ (External Memory Card)“. Then, click on Save, and click on Update.

Probably this operation will take 1 or 2 minutes. Pychord will search by every chr file in “Song Directory” and put this songs in its database.

Your files needs to be encoded in UTF-8!!! This very is important!!! Remember: UTF-8!!!

4 – Using Pychord as an advanced SongBook

One major advantage of using Pychord instead of using conventional songbooks is: Faster searches!

Go to pychord main screen and type anything about the song that you are looking for. Now, select the field to be used. It can be the name of the artist ( Artist ), part of the lyric ( Word ) or part of the music’s name ( Music ). Now, click on Search button.

In the next screen you will see a list of results. If the result list does not fit in the screen size, it can be scrolled down so that more results can be seen. To scroll the screen just press anywhere on the result list, and scroll. If you want to do a click, just click the screen without moving.

4.1 – When viewing a song

After choosing your song, it will be displayed in a screen like this:

  1. Song (scrollable list)
  2. Options window
  3. Scroll speed down
  4. Scroll stop
  5. Scroll speed up

4,5,6 are scroll control buttons. Keep the button 5 pressed and see the song [1] scrolling. To reduce the scrolling speed, press button 3, and to stop it press buton 4.

To change song’s font size, press hardware keys ZoomIn/ZoomOut.

Pressing Button-2, a new screen will be displayed.

Inside this window, we have tree buttons:

  1. T+: increase the music tone
  2. T-: decrease music tone
  3. Add to playlist: adds (or remove from) the music to playlist =)

5 – Using Playlist

On pychord main screen, click the Playlist button and a new window will be shown. In that window you will find all the songs you have added to your playlist.

To remove a song from your playlist, open this song, and click on information button and after that, click on “Remove from playlist

You can clear your Playlist by clicking in “Clear Playlist” on your Playlist screen.

6 – Final comments

I’m working on an heuristic to recognize whether a line is lyrics or chords. It’s far away from being perfect, but I’m working on it!

Pychord is not working with OpenSong format yet because it’s not so easy to create the xml file. I thought of an easy way to put songs into pychord, and chr file was the easiest format I found. But I want to support opensong, and it will happen soon.

This is a beta version, the main features are working, but you can find some bugs!

PLEASE: WE NEED YOUR HELP! How?

  1. Tell me your ideas
  2. Send me suggestions and critics
  3. Report bugs

So, I’m finishing this post. You are invited to test pychord. I’m waiting your comments.

[ ]‘s

Thanks to Gustavo Boiko, who helped me with this text.