Affichage texte…

A) Environnement de développement :

Sous Windows il est préférable d’utiliser l’atelier de développement dans le Cloud https://cloudpebble.net, pour Ubuntu, suivez la description de l’installation à la page  https://developer.getpebble.com/2/getting-started/linux

B) Initialisation d’un projet :

Ici, via le cloud , chosissez ‘Create Project’.

  1. Entrez un nom pour votre application par exemple ‘androTest’,
  2. Sélectionnez pour le template  ‘Empty Project’,
  3. Confirmez par ‘Create’.

Cliquez sur ‘New C file’ et tapez pour le nom ‘main.c’.

Placez l’inclusion de la librairie pebble

#include <pebble.h>

La structure de la fonction principale du programme C (int main (void)) contient l’initialisation de notre application puis une boucle pour surveiller les événements (appui sur les boutons,…) et ensuite une libération de la mémoire quand l’application est arrêtée.

int main(void)
{
  init();
  app_event_loop();
  deinit();
}

En langage C toutes les fonctions doivent être définies avant leur appel, insérez au dessus de la fonction main() la déclaration des fonctions init() et deinit()

void init(){
  //Initialize the app elements here!
}
void deinit()
{
  //De-initialize elements here to save memory!
}

Maintenant déclarons l’objet Window sous le #include

Window *window;

Maintenant, écrivons le setup de l’objet fenêtre :

void init()
{
  //Initialize the app elements here!
  window = window_create();
  window_set_window_handlers(window, (WindowHandlers) {
    .load = window_load,
    .unload = window_unload,
  });
}

Lorsque le menu principal de la Pebble s’affiche ( ‘Music, Set Alarm, Watchfaces etc…) c’est un objet Window ! Cet objet contient un élément dénommé MenuLayer. Quand un objet Window est créé et rempli avec des éléments, ces éléments doivent avoir été créés avant d’être montrés. Cela est fait à l’aide de deux fonctions ‘handler’ .

Ces deux fonctions utilisées pour afficher quelque chose dans l’objet Window sont dénommées window_load() et window_unload(). Bien entendu les déclarations de ces fonctions devront être placées avant leur appel soit :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
#include <pebble.h>
Window *window;
void window_load(Window *window)
{
  //We will add the creation of the Window's elements here soon!
}
void window_unload(Window *window)
{
  //We will safely destroy the Window's elements here!
}
void init()
{
  //Initialize the app elements here!
  window = window_create();
  window_set_window_handlers(window, (WindowHandlers) {
    .load = window_load,
    .unload = window_unload,
  });
}
void deinit()
{
  //De-initialize elements here to save memory!
}
int main(void)
{
  init();
  app_event_loop();
  deinit();
}

Ensuite il faut s’assurer que l’on libère bien la mémoire en détruisant l’objet window dans la fonction deinit() :

void deinit(){
  //We will safely destroy the Window’s elements here!
  window_destroy(window);
}

La dernière étape est de faire apparaitre l’application lorsqu’elle est sélectionnée dans le menu de la montre. Pour cela, il est nécessaire d’appeler la fonction  window_stack_push() qui ‘pousse’ notre application au sommet de la pile et qui affiche à l’écran de la montre le résultat de l’application, pour cela ajouter à la fin de la fonction init() :

window_stack_push(window, true);

Toutefois, notre application est vide, pour ajouter une action nous pouvons utiliser le  TextLayer. Cet élément permet d’afficher une chaîne de caractères dans une zone pré-définie. Comme l’élément window, nous devons le déclarer, placez la déclaration sous celle du pointeur window au début du fichier ‘main.c’ :

TextLayer *text_layer;

L’étape suivante est d’allouer de la mémoire et de définir les attributs pour le texte à afficher. Les instructions sont à placer dans la fonction window_load(:

text_layer = text_layer_create(GRect(0, 0, 144, 168));
text_layer_set_background_color(text_layer, GColorClear);
text_layer_set_text_color(text_layer, GColorBlack);
layer_add_child(window_get_root_layer(window), (Layer*) text_layer);

1ère ligne : création d’un cadre dénomé GRect allant de 0,0 à 144,168 (stored in a GRect, or rectangle structure), origin at (0, 0), 2ème ligne : couleur du fond et 3ième couleur du texte. Enfin en 4ième ligne ajout du TextLayer à l’élément window.

Enfin, ne pas oublier de libérer la mémoire occupée par le text_layer en le détruisant (avant l’élément window) dans la fonction deinit() :

text_layer_destroy(text_layer);

Maintenant écrivons le texte choisi. Après la ligne layer_add_child() ajouter :

text_layer_set_text(text_layer, "Ceci est un exemple de texte !");

Maintenant il suffit juste de cliquer sur ‘save and run’, ignorer le message d’erreur en cliquant sur la croix puis cliquez sur ‘compilation’ téléchargez le fichier, placez le sur le smartphone et cliquez sur le fichier pour l’installer. L’application apparaitra dans le menu de la montre.

Voici le fichier main.c :

 //-- Ajout de la librairie pebble  
 #include <pebble.h>  
 //-- Déclaration des objets Fenêtre et texte   
 Window *window;  
 TextLayer *text_layer;  
 //-- Définition des actions à effectuer au lancement de l'application  
 void window_load(Window *window)   
 {  
 text_layer = text_layer_create(GRect(0, 0, 144, 168));  
 text_layer_set_background_color(text_layer, GColorClear);  
 text_layer_set_text_color(text_layer, GColorBlack);  
 layer_add_child(window_get_root_layer(window), (Layer*) text_layer);  
 text_layer_set_text(text_layer, "Ceci est un exemple de texte, merci AndroLogiciels !");   
 }  
 //-- actions à la fermeture de l'application   
 void window_unload(Window *window)  
 {  
 }  
 //-- Initialisation  
 void init()  
 { window = window_create();  
  window_set_window_handlers(window, (WindowHandlers) {  
   .load = window_load,  
   .unload = window_unload,  
  });  
  window_stack_push(window, true);  
 }  
 //-- Déinitialisation   
 void deinit()  
 {  
 text_layer_destroy(text_layer);  
 window_destroy(window);  
 }  
 //-- Fonction principale  
 int main(void)  
 {  
  init();  
  app_event_loop();  
  deinit();  
 }  

Votre commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l’aide de votre compte WordPress.com. Déconnexion /  Changer )

Photo Google

Vous commentez à l’aide de votre compte Google. Déconnexion /  Changer )

Image Twitter

Vous commentez à l’aide de votre compte Twitter. Déconnexion /  Changer )

Photo Facebook

Vous commentez à l’aide de votre compte Facebook. Déconnexion /  Changer )

Connexion à %s

Articles récents
Commentaires récents
Catégories
Archives
%d blogueurs aiment cette page :