Vous êtes ici

Tutoriel : dessiner avec Cairo sous Android (Vala)

Objectif : afficher des lignes, textes et images sous Android avec la bibliothèque Cairo et le langage Vala.

Cairo est une bibliothèque graphique vectorielle 2D ; elle est notamment utilisée par le toolkit multi-plateforme GTK+.
Nous avons vu dans un article précédent qu'il était possible d'exécuter un programme Vala sous Android. Nous allons en créer un utilisant Cairo pour afficher formes, textes et images dans une fenêtre Android.

(PS : le téléphone/tablette ciblé devra être "rooté")

Pré-requis

Une distribution Linux avec Vala installé.

1) Installer l'application de base

Nous allons tout d'abord installer l'application Android qui servira de base à nos tests :
Cairo.apk (349 Ko)

Une fois copiée et installée sur l'appareil, nous pouvons la lancer...

... et ainsi voir Cairo en action :


Un travail d'artiste :-)

2) Installer la chaîne de compilation

- Téléchargez l'Android NDK r7b pour Linux :
android-ndk-r7b-linux-x86.tar.bz2 (61,3 Mo)

(et extrayez-le dans "/opt" :
mv android-ndk-r7b-linux-x86.tar.bz2 /opt
cd /opt
tar xfvj android-ndk-r7b-linux-x86.tar.bz2)

- Téléchargez le script agcc (merci à Giulio Lunati pour son travail) :
agcc.pl (5 Ko)

(et installez-le dans "/opt" en le rendant exécutable :
mv agcc.pl /opt
chmod a+x /opt/agcc.pl
ln -s /opt/agcc.pl /usr/bin/agcc
)

- Configurez les variables d'environnement (soit en ajoutant ces lignes à la fin de "/etc/profile" puis en redémarrant, soit en les tapant directement dans un terminal) :
export NDK=/opt/android-ndk-r7b
export PATH=$PATH:/opt/android-ndk-r7b/toolchains/arm-linux-androideabi-4.4.3/prebuilt/linux-x86/bin


3) Installer GLib et Cairo pour Android

- Téléchargez GLib 2.28.1 et Cairo 1.10.2 (statiques) pour Android :
glib-2.28.1-android-static_(TARNYKO).tar.bz2 (2,20 Mo)
cairo-1.10.2-android-static_(TARNYKO).tar.bz2 (817 Ko)

(et extrayez-les dans un nouveau dossier "/opt/android" :
mkdir /opt/android
mv glib-2.28.1-android-static_\(TARNYKO\).tar.bz2 /opt/android
mv cairo-1.10.2-android-static_\(TARNYKO\).tar.bz2 /opt/android
tar xfvj glib-2.28.1-android-static_\(TARNYKO\).tar.bz2
tar xfvj cairo-1.10.2-android-static_\(TARNYKO\).tar.bz2
)


4) Compiler

Nous allons ici compiler les exemples trouvés dans ce fichier projet :
cairo-android_vala.tar.bz2 (2 Ko)

Nous indiquons à "pkg-config" de localiser les librairies Android dans notre chemin spécial :
export PKG_CONFIG_PATH=/opt/android/lib/pkgconfig

Puis dans le dossier des exemples, nous modifions le code source cairo-android.vala, par exemple ligne 38 pour modifier le texte :

android_context.show_text ("Mon test perso !");

et nous compilons avec le script fourni :
./compile-cairo.sh

Nous obtenons un fichier final libcairo-android.so dans le même dossier.

Branchez votre téléphone/tablette Android à l'ordinateur. En utilisant le programme adb fourni avec le SDK Android, envoyez le binaire dans le bon répertoire :
adb remount
adb push libcairo-android.so /data/data/com.android.Cairo/lib/

Relancez l'application Cairo installée au début et observez la modification.

5) Compiler l'exemple PNG

L'exemple PNG cairopng-android.vala est intéressant en ce qu'il utilise un fichier d'image présent sur l'appareil. Ceci grâce aux lignes suivantes (condensé) :

   string filename = "/data/data/com.android.Cairo/image.png";
   ImageSurface surface = new ImageSurface.from_png (filename);
   android_context.set_source_surface (surface, pos_x, pos_y);
   android_context.paint ();

Nous modifions éventuellement, compilons avec le script fourni :
./compile-cairopng.sh

Envoyons le programme et maintenant l'image attendue avec adb :
adb remount
adb push libcairo-android.so /data/data/com.android.Cairo/lib/
adb push image.png /data/data/com.android.Cairo/image.png

En relançant l'application Cairo :

Voilà !