IHM » History » Version 2

Alejandro Motta Cano, 03/23/2015 10:53 PM

1 1 Kevin Jabaud
h1. IHM
2 2 Alejandro Motta Cano
3 2 Alejandro Motta Cano
Pour compléter notre simulation nous avons décidé de lui ajouter une IHM assez simple mais permettant à l’utilisateur de s’y retrouver et de pouvoir modifier des options par exemple. L’Ihm n’est autre qu’un menu qui permet à l’utilisateur de lancer la simulation et de modifier des options de jeu. Nous avions au départ décidé d’utiliser une librairie C , la SDL. Une libraire C est un pack de fonction ,prête à être utilisé, qui à été crée dans le but d’effectuer certaines tâches précises. Dans notre cas La SDL pouvait parfaitement gérer notre interface utilisateur et avait l’avantage d’être « simple » à utiliser et de permettre de créer des menus assez rapidement. 
4 2 Alejandro Motta Cano
5 2 Alejandro Motta Cano
!http://upload.wikimedia.org/wikipedia/en/e/e8/Sdl-logo.png!
6 2 Alejandro Motta Cano
7 2 Alejandro Motta Cano
Après réflexion, nous nous sommes rendu compte que Raydium incluait lui aussi la possibilité de créer des interfaces  et que rajouter une librairie C en plus dans notre projet serait inutile et superflu ( sachant que Raydium peut faire la même chose). 
8 2 Alejandro Motta Cano
9 2 Alejandro Motta Cano
Pour réaliser ce menu, nous avons utiliser les fonctions liées au GUI de Raydium. Gui signifie Graphical User Interface, interface graphique de l’utilisateur traduit en français, ce qui signifie en terme général l’interface qui va permettre à l’utilisateur de gérer le logiciel.
10 2 Alejandro Motta Cano
11 2 Alejandro Motta Cano
Le GUI de Raydium permet de crée des menus de façon simple en utilisant un  thème pour les différents éléments du menu. Ce thème est sous la forme d’un fichier avec une extension .gui, il est possible de créer son propre thème, mais pour des raisons de temps et de manque de compétence graphique, nous avons utilisé le thème de base fournis avec Raydium, à savoir le fichier theme-raydium2.gui. 
12 2 Alejandro Motta Cano
13 2 Alejandro Motta Cano
14 2 Alejandro Motta Cano
theme-raydium2.gui
15 2 Alejandro Motta Cano
!http://ftp.cqfd-corp.org/theme-raydium2.jpg!
16 2 Alejandro Motta Cano
17 2 Alejandro Motta Cano
Voici ce que contient le fichier theme. Ce sont les différents sprites des layouts (éléments du menu) utilisés. On peut y voir des boutons, des « conteneurs de texte », etc..
18 2 Alejandro Motta Cano
19 2 Alejandro Motta Cano
Voici la démarche de la création du GUI. Nous sommes parties sur une interface simple avec trois boutons, un lançant la simulation, un permettant de modifier des options du jeu et l’autre quittant la simulation.
20 2 Alejandro Motta Cano
21 2 Alejandro Motta Cano
Premièrement, il faut utiliser la fonction :
22 2 Alejandro Motta Cano
23 2 Alejandro Motta Cano
<code> raydium_gui_theme_load(« theme-raydium2.gui"); </code>
24 2 Alejandro Motta Cano
25 2 Alejandro Motta Cano
Cette fonction prends en argument un nom de fichier , ce dernier doit être un fichier thème (.gui), et l’utilise pour gérer l’affichage des différents éléments du menu.
26 2 Alejandro Motta Cano
27 2 Alejandro Motta Cano
Ensuite nous avons créer une fonction heart() qui choisis entre l’affichage du gui ou la simulation. Pour la GUI, cette fonction va lancer build_gui() qui choisit quelle GUI construire et afficher. Nous avons définis différentes gui pour différents moments , une pour les options, une pour l’écran d’accueil et une autre pour le lancement de l’application.
28 2 Alejandro Motta Cano
29 2 Alejandro Motta Cano
Qu’importe la GUI, la suite va être presque la même. Il faut pour afficher une interface construire la gui que l’on veut, avec une fonction comme celle ci :
30 2 Alejandro Motta Cano
31 2 Alejandro Motta Cano
Premier screen shoot :: fonction build_gui_menu
32 2 Alejandro Motta Cano
33 2 Alejandro Motta Cano
Cette fonction va créer une nouvelle « sous fenêtre » avec la ligne 1°. Il faut savoir que la création de GUI sous Radium se base sur les coordonnées. A chaque création d’élément, il faut leur donner une position et une taille. Ensuite la fonction va créer une sorte de conteneur de layout( élément de menu)  avec la ligne 2°. Les paramètres sont la taille et les coordonnées comme dit ci-dessus mais aussi un nom de bouton, un text qui s’affiche avec la méthode gettext(« texte ») et une fonction lié au bouton. Cette dernière fonctionne comme une fonction onClick en java, c’est à dire qu’elle va se lancer dès que l’on va cliquer sur le bouton.
34 2 Alejandro Motta Cano
35 2 Alejandro Motta Cano
Ensuite il va falloir afficher le GUI, cela ce passe comme pendant la simulation. Il faut utiliser une fonction comme celle ci
36 2 Alejandro Motta Cano
37 2 Alejandro Motta Cano
Deuxième screen shoot ::fonction gui_start()
38 2 Alejandro Motta Cano
39 2 Alejandro Motta Cano
Cette fonction permet de rendre visible le gui crée précédemment s’il ne l’est pas déjà. Ensuite il faut simplement utilisé la même fonction que la simulation, c’est à dire :
40 2 Alejandro Motta Cano
41 2 Alejandro Motta Cano
<code> raydium_callback(&displayGui); </code>
42 2 Alejandro Motta Cano
43 2 Alejandro Motta Cano
Cette dernière va appelé en boucle l’affichage du gui. Nous obtenons donc un menu simple et rapide d’utilisation.
44 2 Alejandro Motta Cano
45 2 Alejandro Motta Cano
46 2 Alejandro Motta Cano