Ceci est une ancienne révision du document !
Titre : Programming in Python – Part 37
Programmer en Python. Partie 37.
This month, we’ll finish up the transposer program that we wrote in Kivy. Hopefully, you saved the code from last time, because we’ll be building upon it. If not, grab the code from FCM#64. Let’s start by recapping what we did last month. We created an application that allows for a guitarist to quickly transpose from one key to the other. The ultimate goal is to be able to run this app not only on your Linux or Windows box, but on an android device as well. I take mine on my tablet whenever I go to band practice. I was going to deal with packaging our project for Android, but some things have changed in the method to do that, so we’ll work on that next month. The app, as we left it last time, looked like that shown below left. When we are done, it should look like the screen below right.
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.
L'application, telle que nous l'avons laissée la dernière fois, ressemblait à ce qui est ci-dessous à gauche.
Lorsque nous aurons terminé, elle devrait ressembler à l'écran ci-dessous à droite.
The first thing you will notice is that there are blue labels rather than boring gray ones. The next is that there are three buttons. Finally the scrollable labels are closer to the entire width of the window. Other than that, it’s pretty much (visually) the same. One of the buttons is an “about” button that will pop up simple information, but it explains how to make a simple popup. One of the buttons is an exit button. The other button will swap the label text to make it easy to transpose from piano to guitar or guitar to piano. Let’s get started by creating a .kv file (above right). This is what will give us the colored labels. It’s a very simple file. 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.
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.
Now that you have that completed, add the following lines just before the transpose class to the source file from last time: class BoundedLabel(Label): pass To make it work, all we need is a definition. Before we go any further, add the following line to the import section: from kivy.uix.popup import Popup
Maintenant que ceci est terminé, ajoutez les lignes suivantes juste avant la classe transpose dans le fichier source de la dernière fois :
class BoundedLabel(Label): pass
Pour que ça 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
This allows us to create the popup later on. Now, in the Transpose class, just inside the def build routine, place the code shown above right. The LoadLabels routine will give us the colored labels (BoundedLabel) and the swap ability. You saw most of this last time. We pass a value to the “w” parameter to determine which text is being displayed. The l=BoundedLabel line is pretty much the same line from last time, with the exception that, this time, we are using a BoundedLabel widget instead of a Button widget. The LoadLabels will mainly be called from the next routine, Swap. Place this code (shown right) below LoadLabels. You can see that this routine is pretty self explanatory. We use a variable (self.whichway) to determine “which way” the labels are displaying… from Guitar to Piano or Piano to Guitar. 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.
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.
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à.
Replace the lines defining text1 and text two with the lines shown above.
We set self.whichway to 0 which will be our default for the swap procedure. Then we define four strings instead of the two we had last time. You might notice that strings text3 and text4 are simple reversals of text1 and text2.
Now we will tweak the root line definition. Change it from…
root = GridLayout(orientation='vertical', spacing=10, cols=1,rows=3)
to
root = GridLayout(orientation='vertical', spacing=6, cols=1, rows=4, row_default_height=40)
We’ve changed the spacing from 10 to 6 and set the default row height to 40 pixels. Change the text for the label (next line) to “text='Transposer Ver 0.8.0'”. Everything else stays the same on this line.
Now change the button definition line from…
btn1 = Button(text = “ ” + text1,size=(680,40),
size_hint=(None,None),
halign='left', font_name='data/fonts/DroidSansMono.ttf',
padding=(20,20))
to:
btn1 = Button(text = “ ” + self.text1,size=(780,20),
size_hint=(None, None),
halign='left', font_name='data/fonts/DroidSansMono.ttf',
padding=(20,2), background_color=[0.39,0.07,.92,1])
Notice that I’ve changed the formatting of the first definition for clarity. The big changes are the size change from 680,40 to 780,20 and the background color for the button. Remember, we can change the background color for buttons, not “standard” labels.
Next, we will define three AnchorLayout widgets for the three buttons that we will add in later. I named them al0 (AnchorLayout0), al1 and al2. We also add the code for the About Popup, and define our buttons along with the bind statements. This is shown on the next page, top left.
Find the “s = GridLayout” line and change the spacing from 10 to 4. Next, add the following line after the s.bind line (right before the for loop):
LoadLabels(0)
This calls the LoadLabels routine with our default “which” of 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.
Now, save your code and try to run it. You should see a deep purple button at the top, and our pretty blue BoundLabels. Plus, you will notice that the BoundLabels in the scroll window are closer together, which makes it much easier to read.
We are almost through with our code, but we still have a few things to do. After the “sv = ScrollView” line add the following line…
sv.size = (720, 320)
This sets the size of the ScrollView widget to 720 by 320 – which makes it wider within the root window. Now, before the “return root” line, add the code shown top right.
Here we add the three buttons to the AnchorLayout widgets, create a GridLayout to hold the AnchorLayouts, and then finally add the AnchorLayouts to the GridLayout.
Go back just below the “def Swap” routine and add the following…
def ShowAbout(instance):
popup.open()
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.
Now our code is written. You can find the full code at http://pastebin.com/GftmjENs
Next, we need to create our android package… but that will have to wait for next time.
If you want to get set up and try packaging for Android before next month, you should go to http://kivy.org/docs/guide/packaging-android.html for the documentation on this. Be sure to follow the documentation carefully.
See you next month.