Interface graphique pour le logiciel de calcul mental

Objectifs

Le but de ce tutoriel est de programmer l'interface graphique du logiciel de calcul mental.

Mise en place des fichiers

Créer deux nouveaux fichiers Python :

  • un fichier calcul_interface.py : il contiendra le programme principal permettant de faire fonctionner le programme.
  • un fichier arbre_widgets.py : il contiendra la description de l'interface graphique, en langage kivy.

L'arbre des widgets

Le module kivy permet de définir une interface graphique sous la forme d'un arbre de widgets. Un widget est soit un élément de l'interface graphique (bouton, zone de texte, case à cocher, image...), soit un conteneur de mise en page (layout) permettant d'organiser les différents éléments.

Un écran d'accueil

image200

Dans le fichier arbre_widgets.py, copier le code suivant :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
# coding: utf-8
from kivy.lang import Builder

Interface = Builder.load_string('''
<EcranAccueil>
    BoxLayout:
        orientation: "vertical"
        padding: '10dp'
        spacing: '10dp'
        Label:
            text: "Mathador - Calcul Mental"
            font_size: "30dp"
        Image:
            source: "weigh.jpg"
        Button:
            text: "Jouer !"
            font_size: "30dp"
            size_hint_y: 0.15
''')

Ce code définit un widget de mise en page de type BoxLayout orientation verticale : les éléments sont empilés les uns sur les autres.

Le widget `BoxLayout contient trois widgets fils : un Label (affichage de texte), une image, un bouton.

Pour tester cet écran, entrer le code suivant dans le fichier calcul_interface.py puis exécuter ce fichier.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
# coding: utf-8
from kivy.app import App
from kivy.uix.screenmanager import Screen, ScreenManager, FadeTransition
from arbre_widgets import *
from calcul_logique import *

class EcranAccueil(Screen):
    pass

class CalculApp(App):

    def build(self):
        sm = ScreenManager(transition=FadeTransition())
        sm.add_widget(EcranAccueil(name='accueil'))
        return sm

CalculApp().run()

L'écran de jeu

On définit de la même manière un arbre de widgets pour l'écran de jeu.

Cliquer ci-contre pour télécharger le fichier arbre_widgets.py complet

Pour tester cet écran, entrer le code suivant dans le fichier calcul_interface.py puis exécuter ce fichier.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
# coding: utf-8
from kivy.app import App
from kivy.uix.screenmanager import Screen, ScreenManager, FadeTransition
from arbre_widgets import *
from calcul_logique import *

class EcranAccueil(Screen):
    pass

class EcranJeu(Screen):
    pass

class CalculApp(App):

def build(self):
    sm = ScreenManager(transition=FadeTransition())
    sm.add_widget(EcranAccueil(name='accueil'))
    sm.add_widget(EcranJeu(name='jeu'))
    return sm

CalculApp().run()

Exercice

Analyser le contenu du fichier arbre_widgets.py et représenter l'organisation de l'écran de jeu sous le forme d'un arbre de widgets.

Mise en place du jeu

Cliquer ci-contre pour télécharger le fichier calcul_interface.py complet

Exécuter ce programme et tester le jeu.