Tarnyko's website
Tarnyko's website
about

[Tutoriel] Dessiner avec Cairo en Vala sous Android

2013-04-01

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 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.

03

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

Pré-requis

Une distribution Linux 32/64-bits 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...

01

... et ainsi voir Cairo en action :

02

Un travail d'artiste 😉.

2) Installer la chaîne de compilation

  1. Installez l'Android NDK r7b pour Linux :
sudo tar xfvj android-ndk-r7b-linux-x86.tar.bz2 -C /opt
  1. Installez le script agcc-r7b (merci à Giulio Lunati pour son travail) :
sudo install -m 755 agcc.pl-r7b /opt/
sudo ln -s /opt/agcc.pl-r7b /usr/bin/agcc
  1. Configurez les variables d'environnement :
export NDK=/opt/android-ndk-r7b
export PATH=$PATH:$NDK/toolchains/arm-linux-androideabi-4.4.3/prebuilt/linux-x86/bin

3) Installer les dépendances

Installez Glib et Cairo (statiques) pour Android :

sudo mkdir /opt/android
sudo tar xfvj glib-2.28.1-android-static_\(TARNYKO\).tar.bz2 -C /opt/android
sudo tar xfvj cairo-1.10.2-android-static_\(TARNYKO\).tar.bz2 -C /opt/android

export PKG_CONFIG_PATH=$PKG_CONFIG_PATH:/opt/android/lib/pkgconfig

 

4) Exemples

Nous allons ici compiler les exemples trouvés dans ce fichier projet :
cairo-android_vala.tar.bz2 (1,52 Mo)

à extraire à l'endroid de votre choix avec :

tar xfvj cairo-android_vala.tar.bz2

 

a) Exemple texte simple

Texte simple : compiler

Nous modifions le code source "cairo-android.vala", par exemple ligne 38 pour modifier le texte :

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

Finalement, nous compilons avec le script fouri (ouvrez-le pour voir le détail) :

./compile-cairo.sh

Nous obtenons un fichier final "libcairo-android.so" dans le même répertoire.

Texte simple : Installer

Branchez votre téléphone/tablette Android à l'ordinateur.

En utilisant le programme adb fourni avec le SDK Android, envoyez le binaire dans le répertoire de l'application :

adb remount
adb push libcairo-android.so /data/data/com.android.Cairo/lib/

Relancez l'application Cairo installée en 1), et observez la modification.

 

a) Exemple image PNG

Image PNG : compiler

Le code source "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

pour obtenir un nouvel "libcairo-android.so".

Image PNG : Installer

Toujours 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, on obtient :

03

Voilà !