Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste : • arduino • arduino • javascript • arduino • tuto_python
issue65:python

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
issue65:python [2012/10/20 22:59] – fredphil91issue65:python [2012/10/21 15:29] (Version actuelle) – andre_domenech
Ligne 13: Ligne 13:
 Ce mois-ci, nous allons terminer le programme de transposition que nous avons écrit dans Kivy. J'espère que vous avez enregistré le code de la dernière fois, parce que nous allons le compléter. Sinon, récupérez-le sur le FCM n°64. Ce mois-ci, nous allons terminer le programme de transposition que nous avons écrit dans Kivy. J'espère que vous avez enregistré le code de la dernière fois, parce que nous allons le compléter. Sinon, récupérez-le sur le FCM n°64.
  
-Commençons par récapituler ce que nous avons fait le mois dernier. Nous avons créé une application qui permet à un guitariste de transposer rapidement d'une clé à une autre. Le but ultime est de pouvoir exécuter cette application non seulement sous Linux ou Windows, mais également sur un appareil Android. J'emporte ça sur ma tablette quand je vais répéter avec mon groupe. Je me préparais à conditionner notre projet pour Android, mais certaines choses ont changé dans la méthode pour le faire, nous verrons donc cela le mois prochain.+Commençons par récapituler ce que nous avons fait le mois dernier. Nous avons créé une application qui permet à un guitariste de transposer rapidement d'une clé à une autre. Le but ultime est de pouvoir exécuter cette application non seulement sous Linux ou Windows, mais également sur un appareil Android. Je l'emporte sur ma tablette quand je vais répéter avec mon groupe. Je me préparais à conditionner notre projet pour Android, mais certaines choses ont changé dans la méthode pour le faire, nous verrons donc cela le mois prochain.
  
 L'application, telle que nous l'avons laissée la dernière fois, ressemblait à ce qui est ci-dessous à gauche. L'application, telle que nous l'avons laissée la dernière fois, ressemblait à ce qui est ci-dessous à gauche.
Ligne 25: Ligne 25:
 The first two lines are required. They basically say what version of Kivy to expect. Next we create a new type of label called ‘BoundedLabel’. The color is set with RGB values (between 0 and 1, which can be considered as 100 percent), and as you can see the blue value is set at 100 percent. We will also create a rectangle which is the actual label. Save this as “transpose.kv”. You must use the name of the class that will be using it.** The first two lines are required. They basically say what version of Kivy to expect. Next we create a new type of label called ‘BoundedLabel’. The color is set with RGB values (between 0 and 1, which can be considered as 100 percent), and as you can see the blue value is set at 100 percent. We will also create a rectangle which is the actual label. Save this as “transpose.kv”. You must use the name of the class that will be using it.**
  
-La première chose que vous remarquerez est qu'il ya des étiquettes bleues plutôt que les grises tristes. La suivante est qu'il y a trois boutons. Enfin les étiquettes qui défilent sont plus proches de la largeur totale de la fenêtre. À part ça, c'est à peu près (visuellement) la même chose. L'un des boutons est un bouton « à propos » qui affichera quelques informations simples, pour vous montrer comment faire un pop-up simple. Un autre bouton sert à quitter. Le troisième bouton va remplacer l'étiquette de texte pour faciliter la transposition de piano à guitare ou vice-versa.+La première chose que vous remarquerez est qu'il y a des étiquettes bleues à la place de celles qui étaient grises et tristes. La suivante est qu'il y a trois boutons. Enfin, les étiquettes qui défilent sont plus proches de la largeur totale de la fenêtre. À part ça, c'est à peu près la même chose (visuellement). L'un des boutons est un bouton « à propos » qui affichera quelques informations simples, pour vous montrer comment faire un pop-up simple. Un autre bouton sert à quitter. Le troisième bouton va remplacer l'étiquette de texte pour faciliter la transposition de piano à guitare ou vice-versa.
  
 Nous allons commencer par créer un fichier .kv (en haut à droite). C'est ce qui va nous donner les étiquettes colorées. C'est un fichier très simple. Nous allons commencer par créer un fichier .kv (en haut à droite). C'est ce qui va nous donner les étiquettes colorées. C'est un fichier très simple.
  
-Les deux premières lignes sont nécessaires. Elles indiquent simplement quelle version de Kivy est requise. Ensuite, nous créons un nouveau type d'étiquette appelé « BoundedLabel ». La couleur est réglée avec des valeurs RVB (entre 0 et 1 représentant un pourcentage), et comme vous pouvez le voir, la valeur de bleu est fixée à 100 pour cent. Nous allons également créer un rectangle qui est l'étiquette réelle. Enregistrez ce fichier sous le nom « transpose.kv ». Vous devez prendre le même nom que la classe qui va l'utiliser.+Les deux premières lignes sont nécessaires. Elles indiquent simplement quelle version de Kivy est requise. Ensuite, nous créons un nouveau type d'étiquette appelé « BoundedLabel ». La couleur est réglée avec des valeurs RVB (entre 0 et 1, ce dernier représentant 100 % ), et comme vous pouvez le voir, la valeur de bleu est fixée à 100 pour cent. Nous allons également créer un rectangle qui est l'étiquette réelle. Enregistrez ce fichier sous le nom « transpose.kv ». Vous devez prendre le même nom que la classe qui va l'utiliser.
  
 **Now that you have that completed, add the following lines just before the transpose class to the source file from last time: **Now that you have that completed, add the following lines just before the transpose class to the source file from last time:
Ligne 45: Ligne 45:
  pass  pass
  
-Pour que ça fonctionne, il suffit d'une définition. Avant d'aller plus loin, ajoutez la ligne suivante à la section des importations :+Pour que cela fonctionne, il suffit d'une définition. Avant d'aller plus loin, ajoutez la ligne suivante à la section des importations :
  
   from kivy.uix.popup import Popup   from kivy.uix.popup import Popup
Ligne 57: Ligne 57:
 Be sure to save your work at this point, since we are going to be making a lot of changes from here on.** Be sure to save your work at this point, since we are going to be making a lot of changes from here on.**
  
-Cela nous permet de créer de la popup plus tard. Maintenant, dans la classe Transpose, juste à l'intérieur de la routine build, placez le code ci-dessus à droite.+Cela nous permet de créer la popup plus tard. Maintenant, dans la classe Transpose, juste à l'intérieur de la routine build, placez le code ci-dessus à droite.
  
-La routine ChargeEtiquettes nous donnera les étiquettes de couleur (BoundedLabel) et la capacité d'échange. Vous avez pratiquement tout vu la dernière fois. Nous passons une valeur au paramètre « w » pour déterminer quel texte est affiché. La ligne l=BoundedLabel est à peu près la même que la dernière fois, à l'exception que cette fois nous utilisons un widget BoundedLabel au lieu d'un widget bouton. Les « ChargeEtiquettes » seront principalement appelés depuis la routine suivante, Echanger. Placez ce code (à droite) en dessous de ChargeEtiquettes.+La routine ChargeEtiquettes nous donnera les étiquettes de couleur (BoundedLabel) et la capacité d'échange. Vous avez pratiquement tout vu la dernière fois. Nous passons une valeur au paramètre « w » pour déterminer quel texte est affiché. La ligne l=BoundedLabel est à peu près la même que la dernière fois, sauf que, cette fois, nous utilisons un widget BoundedLabel au lieu d'un widget Bouton. Les « ChargeEtiquettes » seront principalement appelés depuis la routine suivante, Echanger. Placez ce code (à droite) en dessous de ChargeEtiquettes.
  
 Vous pouvez voir que cette routine est assez explicite. Nous utilisons une variable (self.quelsens) pour déterminer « dans quel sens » les étiquettes s'affichent... de Guitare vers Piano ou de Piano vers Guitare. Vous pouvez voir que cette routine est assez explicite. Nous utilisons une variable (self.quelsens) pour déterminer « dans quel sens » les étiquettes s'affichent... de Guitare vers Piano ou de Piano vers Guitare.
  
-Assurez-vous de sauvegarder votre travail maintenant, car nous allons faire beaucoup de changements à partir de là.+Assurez-vous de sauvegarder votre travail maintenant, car nous allons faire beaucoup de changements à partir de maintenant.
  
 **Replace the lines defining text1 and text two with the lines shown above. **Replace the lines defining text1 and text two with the lines shown above.
Ligne 83: Ligne 83:
 Nous réglons self.quelsens à 0 qui sera notre valeur par défaut pour la procédure d'échange. Ensuite, nous définissons quatre chaînes au lieu des deux que nous avions la dernière fois. Vous remarquerez peut-être que les chaînes texte3 et texte4 sont en fait texte1 et texte2 à l'envers. Nous réglons self.quelsens à 0 qui sera notre valeur par défaut pour la procédure d'échange. Ensuite, nous définissons quatre chaînes au lieu des deux que nous avions la dernière fois. Vous remarquerez peut-être que les chaînes texte3 et texte4 sont en fait texte1 et texte2 à l'envers.
  
-Maintenant, nous allons modifier la définition de la ligne racine. Changez-le de...+Maintenant, nous allons adapter la définition de la ligne racine. Changez-le de :
  
   root = GridLayout(orientation='vertical', spacing=10, cols=1,rows=3)   root = GridLayout(orientation='vertical', spacing=10, cols=1,rows=3)
  
-à+à :
  
   root = GridLayout(orientation='vertical', spacing=6, cols=1, rows=4, row_default_height=40)   root = GridLayout(orientation='vertical', spacing=6, cols=1, rows=4, row_default_height=40)
  
-Nous avons changé l'espacement de 10 à 6 et réglé la hauteur de ligne par défaut à 40 pixels. Changez le texte de l'étiquette (ligne suivante) en « text ='Transposer Ver 0.8.0' ». Tout le reste reste identique sur cette ligne.+Nous avons changé l'espacement de 10 à 6 et réglé la hauteur de ligne par défaut à 40 pixels. Changez le texte de l'étiquette (ligne suivante) en « text='Transposer Ver 0.8.0' ». Pour le reste, rien n'a changé sur cette ligne.
  
 **Now change the button definition line from... **Now change the button definition line from...
Ligne 116: Ligne 116:
   background_color=[0.39,0.07,.92,1])**   background_color=[0.39,0.07,.92,1])**
  
-Maintenant changez la définition du bouton de...+Maintenant changez la définition du bouton de :
  
   btn1 = Button(text = "  " + text1,size=(680,40),   btn1 = Button(text = "  " + text1,size=(680,40),
Ligne 124: Ligne 124:
   padding=(20,20))   padding=(20,20))
  
-à+à :
  
   btn1 = Button(text = "    " + self.text1,size=(780,20),   btn1 = Button(text = "    " + self.text1,size=(780,20),
Ligne 145: Ligne 145:
 Remarquez que j'ai changé le format de la première définition pour plus de clarté. Les gros changements sont la taille qui passe de 680,40 à 780,20 et la couleur de fond du bouton. Rappelez-vous, on peut changer la couleur de fond pour les boutons, mais pas pour les étiquettes « standards ». Remarquez que j'ai changé le format de la première définition pour plus de clarté. Les gros changements sont la taille qui passe de 680,40 à 780,20 et la couleur de fond du bouton. Rappelez-vous, on peut changer la couleur de fond pour les boutons, mais pas pour les étiquettes « standards ».
  
-Ensuite, nous allons définir trois widgets AnchorLayout pour les trois boutons que nous ajouterons plus tard. Je l'ai nommées al0 (AnchorLayout0), al1 et al2. Nous ajoutons également le code pour le Popup « à propos », et définissons nos boutons avec les paramètres de liaison (bind). Ceci est illustré à la page suivante, en haut à gauche.+Ensuite, nous allons définir trois widgets AnchorLayout pour les trois boutons que nous ajouterons plus tard. Je les ai nommés al0 (AnchorLayout0), al1 et al2. Nous ajoutons également le code pour le Popup « à propos » et définissons nos boutons avec les paramètres de liaison (bind). Ceci est illustré à la page suivante, en haut à gauche.
  
 Trouvez la ligne « s = GridLayout » et modifiez l'espacement de 10 à 4. Ensuite, ajoutez la ligne suivante après la ligne s.bind (juste avant la boucle for) : Trouvez la ligne « s = GridLayout » et modifiez l'espacement de 10 à 4. Ensuite, ajoutez la ligne suivante après la ligne s.bind (juste avant la boucle for) :
Ligne 151: Ligne 151:
   ChargeEtiquettes(0)   ChargeEtiquettes(0)
  
-Ceci appelle la routine ChargeEtiquettes avec notre « quelsens» par défaut qui vaut 0.+Ceci appelle la routine ChargeEtiquettes avec notre « quelsens » par défaut qui vaut 0.
  
 **Next, comment out the entire for loop code. This starts with “for i in range(0,19):” and ends with “s.add_widget(btn)”. We don’t need this since the LoadLabels routine does this for us. **Next, comment out the entire for loop code. This starts with “for i in range(0,19):” and ends with “s.add_widget(btn)”. We don’t need this since the LoadLabels routine does this for us.
Ligne 161: Ligne 161:
 sv.size = (720, 320)** sv.size = (720, 320)**
  
-Ensuite, commentez la totalité du code de la boucle for. Cela commence par « for i in range(0,19): » et se termine par « s.add_widget(btn) ». Nous n'avons pas besoin de cette routine puisque ChargeEtiquettes fait cela pour nous.+Ensuite, commentez la totalité du code de la boucle for. Cela commence par « for i in range(0,19): » et se termine par « s.add_widget(btn) ». Nous n'avons pas besoin de cette routine puisque ChargeEtiquettes le fait pour nous.
  
-Maintenant, enregistrez votre code et essayer de l'exécuter. Vous devriez voir un bouton violet sur le dessus, et nos BoundLabels d'un joli bleu. De plus, vous remarquerez que les BoundLabels dans la fenêtre de défilement sont plus rapprochés, ce qui facilite grandement la lecture.+Maintenant, enregistrez votre code et essayez de l'exécuter. Vous devriez voir un bouton violet foncé en haut et nos BoundLabels d'un joli bleu. De plus, vous remarquerez que les BoundLabels dans la fenêtre de défilement sont plus rapprochés, ce qui en facilite grandement la lecture.
  
-Nous sommes presque au bout de notre code, mais il nous reste quelques petites choses à faire. Après la ligne « sv = ScrollView », ajoutez la ligne suivante...+Nous sommes presque au bout de notre code, mais il nous reste quelques petites choses à faire. Après la ligne « sv = ScrollView », ajoutez la ligne suivante :
  
   sv.size = (720, 320)   sv.size = (720, 320)
Ligne 181: Ligne 181:
 That’s it. Save and run the code. If you click on the About button, you will see the simple popup. Just click anywhere outside of the popup to make it go away.** That’s it. Save and run the code. If you click on the About button, you will see the simple popup. Just click anywhere outside of the popup to make it go away.**
  
-Ceci définit la taille du widget ScrollView à 720 sur 320 - ce qui le rend plus large à l'intérieur de la fenêtre racine. Maintenant, avant la ligne « return racine », ajoutez le code que vous voyez en haut à droite.+Cela définit la taille du widget ScrollView à 720 sur 320, ce qui le rend plus large à l'intérieur de la fenêtre racine. Maintenant, avant la ligne « return racine », ajoutez le code que vous voyez en haut à droite.
  
-Ici nous ajoutons les trois boutons aux widgets AnchorLayout, créons un GridLayout pour contenir les AnchorLayouts, et enfin ajoutons les AnchorLayouts au GridLayout.+Ici nous ajoutons les trois boutons aux widgets AnchorLayout, créons un GridLayout pour contenir les AnchorLayouts et enfin ajoutons les AnchorLayouts au GridLayout.
  
-Retournez juste en dessous de la routine « def Echange » et ajoutez ce qui suit...+Retournez juste en dessous de la routine « def Echange » et ajoutez ce qui suit :
  
   def AfficheAPropos(instance):   def AfficheAPropos(instance):
Ligne 202: Ligne 202:
 Maintenant, notre code est écrit. Vous pouvez trouver le code complet ici : http://pastebin.com/T0kJ0q5z Maintenant, notre code est écrit. Vous pouvez trouver le code complet ici : http://pastebin.com/T0kJ0q5z
  
-Ensuite, nous devons créer notre paquet android... mais cela devra attendre pour la prochaine fois.+Ensuite, nous devons créer notre paquet android... mais cela devra attendre la prochaine fois.
  
 Si vous voulez vous préparer et essayer d'empaqueter pour Android avant le mois prochain, allez sur http://kivy.org/docs/guide/packaging-android.html pour trouver la documentation à ce sujet. Assurez-vous de suivre attentivement la documentation. Si vous voulez vous préparer et essayer d'empaqueter pour Android avant le mois prochain, allez sur http://kivy.org/docs/guide/packaging-android.html pour trouver la documentation à ce sujet. Assurez-vous de suivre attentivement la documentation.
issue65/python.1350766740.txt.gz · Dernière modification : 2012/10/20 22:59 de fredphil91