Before I begin, I want to note that this article marks three years of the Beginning Programming using Python series. I want to thank Ronnie and the entire staff of Full Circle Magazine for all their support and especially, you, the readers. I NEVER thought that this would continue this long. I also want to take a second to note that there has been some comments floating around the ether that, after three years, the word “Beginning” might be misplaced in the title of this series. After all, after three years, would you still be a beginner? Well, on some levels, I agree. However, I still get comments from readers saying that they just found the series and Full Circle Magazine, and that they are now running back to the beginning of the series. So, those people ARE beginners. So, as of part 37, we’ll drop “Beginning” from the series title. Now to the actual meat of this article… more on Kivy.
Avant de commencer, je tiens à souligner que cet article marque les trois ans de la série d'articles sur la programmation Python pour débutants. Je tiens à remercier Ronnie et l'ensemble des personnes du magazine Full Circle pour leur soutien et surtout vous, les lecteurs. Je n'ai jamais pensé que cela continuerait aussi longtemps.
Je tiens aussi à saisir l'occasion de faire une brève remarque au sujet de quelques commentaires flottant dans l'air, suggérant que, après trois ans, le mot « débutant » est peut être déplacé dans le titre de cette série. Après tout, au bout de trois ans, êtes-vous toujours un débutant ? Eh bien, à certains niveaux, je suis d'accord. Cependant, je reçois encore des commentaires de lecteurs disant qu'ils viennent de découvrir la série et le magazine Full Circle, et qu'ils sont maintenant en train de lire toute la série à partir du début. Ces gens sont donc bien des débutants. Quoi qu'il en soit, à partir de la partie 37, nous enlèverons « débutant » du titre de la série.
Maintenant place au contenu de cet article… la suite sur Kivy.
Imagine you play guitar. Not air guitar, but an actual guitar. However, you aren’t the best guitar player, and some chords are problematical for you. For example, you know the standard C, E, G, F type chords, but some chords – like F# minor or C# minor – while doable, are hard to get your fingers set in a fast song. What do you do, especially if the gig is only a couple of weeks away and you HAVE to be up to speed TODAY? The workaround for this is to use the Capo (that funny clippy thing that you see sometimes on the neck of the guitar). This raises the key of the guitar and you use different chords to match the rest of the band. This is called transposing. Sometimes, you can transpose on the fly in your head. Sometimes, it’s easier to sit down on paper and work out that if, for example, the chord is F# minor and you put the capo on fret 2, you can simply play an E minor. But that takes time. Let’s make an app that allows you to simply scroll through the fret positions to find the easiest chords to play. Our app will be fairly simple. A title label, a button with our basic scale as the text, a scrollview (a wonderful parent widget that holds other controls and allows you to “fling” the inside of the control to scroll) holding a number of buttons that have repositioned scales as the text, and an exit button. It will look SOMETHING like the text below.
Imaginez que vous jouez de la guitare. Pas de la « air guitare » (en faisant semblant), mais avec une guitare réelle. Cependant, vous n'êtes pas un très bon joueur de guitare et quelques accords vous posent problème. Par exemple, vous connaissez les accord standards de Do, Mi, Sol, Fa, mais quelques accords - comme Fa# mineur ou Do# mineur - bien que faisables, sont difficiles à faire pendant un morceau rapide. Que faites-vous, surtout si le concert est dans seulement quelques semaines et que vous devez être au point AUJOURD'HUI ? Vous pouvez contourner ce problème en utilisant le capo (cette drôle de pince que vous voyez parfois sur le manche de la guitare). Cela relève la tonalité de la guitare et vous utilisez alors des accords différents pour être comme le reste du groupe. C'est ce qu'on appelle la transposition. Parfois, vous pouvez transposer à la volée dans votre tête. Parfois, il est plus facile de s'asseoir et de travailler sur le papier ; par exemple, si l'accord est Fa# mineur et que vous placez le capo sur la frette 2, vous pouvez simplement jouer un Mi mineur. Mais cela prend du temps. Fabriquons une application qui vous permettra tout simplement de faire défiler la position sur les frettes pour trouver les accords les plus faciles à jouer.
Notre application va être assez simple. Une étiquette de titre, un bouton avec la gamme de base comme texte, une vue défilante « scrollview » (un widget parent merveilleux qui contient d'autres commandes et vous permet de « lancer » ce qu'il contient pour le faire défiler) contenant un certain nombre de boutons qui ont des gammes repositionnées comme texte et un bouton de sortie. Cela ressemblera À PEU PRÈS au texte ci-dessous.
Start with a new python file named main.py. This will be important if/when you decide to create an Android app from Kivy. Now we’ll add our import statements which are shown on the next page, top right. Notice the second line, “kivy.require(‘1.0.8’)”. This allows you to make sure that you can use the latest and greatest goodies that Kivy provides. Also notice that we are including a system exit (line 3). We’ll eventually include an exit button. Here is the beginning of our class called “Transpose”. class Transpose(App): def exit(instance): sys.exit()
Commencez avec un nouveau fichier Python nommé main.py. Ce nom sera important si/quand vous décidez de créer une application Android avec Kivy. Maintenant, nous allons ajouter nos instructions d'importation qui sont indiquées en haut à droite de la page suivante.
Remarquez la deuxième ligne, « kivy.require('1.0.8') ». Cela vous permet de vous assurer que vous pouvez utiliser les fonctionnalités les plus récentes et les meilleures fournies par Kivy. Notez également que nous incluons une instruction système pour quitter (ligne 3). Plus tard nous aurons un bouton pour quitter.
Voici le début de notre classe appelée « Transpose ».
class Transpose(App):
def exit(instance):
sys.exit()
Now we work on our build routine (middle right). This is needed for every Kivy app. This looks rather confusing. Unfortunately, the editor doesn’t always keep spaces correct even in a mono-spaced font. The idea is that the text1 string is a simple scale starting with the note “C”. Each should be centered within 5 spaces. Like the text shown bottom right. The text2 string should be the same thing but repeated. We will use an offset into the text2 string to fill in the button text within the scrollview widget.
Maintenant, travaillons sur notre routine « build » (au milieu à droite). Elle est nécessaire pour toutes les applications Kivy.
Cela semble confus. Malheureusement, l'éditeur ne garde pas toujours les espaces correctement, même avec une police à espacement fixe. L'idée est que la chaîne texte1 est une simple gamme commençant par la note « Do ». Chacune doit être centrée dans 5 espaces. Comme le texte affiché en bas à droite.
La chaîne texte2 devrait être la même chose, mais répétée. Nous allons utiliser un décalage dans la chaîne texte2 pour remplir le texte du bouton à l'intérieur du widget scrollview.
Now we create the root object (which is our main window) containing a GridLayout widget. If you remember WAY back when we were doing other GUI development for Glade, there was a grid view widget. Well, the GridLayout here is pretty much the same. In this case, we have a grid that has one column and three rows. In each of the cells created in the grid, we can put other widgets. Remember, we can’t define which widget goes where other than in the order in which we place the widgets. root = GridLayout(orientation='vertical', spacing=10, cols=1,rows=3) In this case, the representation is as follows…. —————————– (0) title label —————————– (1) main button —————————– (2) scrollview —————————–
Nous créons maintenant l'objet racine (qui est notre fenêtre principale) contenant un widget GridLayout. Si vous vous souvenez, il y a TRÈS longtemps, quand nous faisions d'autres développements d'interfaces pour Glade, il y avait un widget grille (« grid view »). Eh bien, le GridLayout ici est à peu près la même chose. Dans notre cas, nous avons une grille qui contient une colonne et trois lignes. Dans chaque cellule de la grille, on peut mettre d'autres widgets. Rappelez-vous, nous ne pouvons pas choisir où va chaque widget autrement que par l'ordre dans lequel on les ajoute.
racine = GridLayout(orientation='vertical', spacing=10, cols=1,rows=3)
Dans ce cas, la représentation est la suivante…
- —————————-
(0) étiquette titre
- —————————-
(1) bouton principal
- —————————-
(2) scrollview
- —————————-
The scrollview contains multiple items – in our case buttons. Next, we create the label which will be at the top of our application. lbl = Label(text='Transposer Ver 0.1', font_size=20, size_hint=(None,None), size=(480,20), padding=(10,10))
La vue scrollview contient plusieurs éléments ; dans notre cas ce sont des boutons. Ensuite, on crée l'étiquette qui sera tout en haut de notre application.
etiquette = Label(text='Transposer Ver 0.1',
font_size=20,
size_hint=(None,None),
size=(480,20),
padding=(10,10))
The properties that are set should be fairly self-explanatory. The only ones that might give you some trouble would be the padding and size_hint properties. The padding is the number of pixels around the item in an x,y reference. Taken directly from the Kivy documentation size_hint (for X which is same as Y) is defined as: X size hint. Represents how much space the widget should use in the direction of the X axis, relative to its parent’s width. Only Layout and Window make use of the hint. The value is in percent as a float from 0. to 1., where 1. means the full size of his parent. 0.5 represents 50%. In this case, size_hint is set to none, which defaults to 100% or 1. This will be more important (and convoluted) later on.
Les propriétés qui sont définies devraient être assez explicites. Les seules qui pourraient vous poser problème sont celles de « padding » (remplissage) et de « size_hint ». Le remplissage est le nombre de pixels autour de l'élément dans un repère x,y. On lit dans la documentation Kivy que « size_hint » (pour X, mais c'est identique pour Y) est défini comme suit :
X size hint. Représente la quantité d'espace que le widget doit utiliser selon la direction de l'axe X, par rapport à la largeur de son parent. Seuls Layout et Window utilisent cette propriété. La valeur est indiquée en pourcentage sous forme d'un nombre compris entre 0 et 1, où 1 signifie la taille totale de son parent et 0,5 représente 50 %.
Dans notre cas, size_hint est défini à « none » (aucun), qui vaut par défaut 100 % ou 1. Ce sera plus important (et compliqué) plus tard.
Now we define our “main” button (next page, top right). This is a static reference for the scale. Again, most of this should be fairly clear. Now we add the widgets to the root object, which is the GridLayout widget. The label (lbl) goes in the first cell, the button (btn1) goes in the second. #—————————- root.add_widget(lbl) root.add_widget(btn1) #—————————-
Maintenant, nous définissons notre bouton « principal » (en haut à droite de la page suivante). Il s'agit d'une référence statique pour la gamme.
Encore une fois, tout devrait être assez clair.
Maintenant, nous ajoutons les widgets à l'objet racine, qui est le widget GridLayout. L'étiquette va dans la première cellule, le bouton (btn1) va dans la seconde.
#—————————- racine.add_widget(etiquette) racine.add_widget(btn1) #—————————-
Now comes some harder-to-understand code. We create another GridLayout object and call it “s”. We then bind it to the height of the next widget which, in this case, will be the ScrollView, NOT the buttons. s = GridLayout(cols=1, spacing = 10, size_hint_y = None) s.bind(minimum_height=s.setter('height')) Now (middle right) we create 20 buttons, fill in the text property, and then add it to the GridLayout.
Arrive maintenant du code plus difficile à comprendre. Nous créons un autre objet GridLayout et l'appelons « s ». Nous le lions ensuite à la hauteur du widget suivant qui, dans ce cas, se trouve être la ScrollView, PAS les boutons.
s = GridLayout(cols=1, spacing = 10, size_hint_y = None) s.bind(minimum_height=s.setter('height'))
Maintenant (au milieu à droite), nous créons 20 boutons, remplissons la propriété « texte », puis les ajoutons au GridLayout.
Now we create the ScrollView, set its size, and add it to the root GridLayout. sv = ScrollView(size_hint=(None, None), size=(600,400)) sv.center = Window.center root.add_widget(sv) Lastly, we add the GridLayout that holds all our buttons into the ScrollView, and return the root object to the application. sv.add_widget(s) return root
Maintenant nous créons le ScrollView, définissons sa taille, et l'ajoutons au GridLayout racine.
sv = ScrollView(size_hint=(None, None), size=(600,400)) sv.center = Window.center racine.add_widget(sv)
Enfin, nous ajoutons le GridLayout, qui contient tous nos boutons dans le ScrollView, et retournons l'objet racine à l'application.
sv.add_widget(s) return racine
Finally, we have our “if name” routine. Notice that we are setting ourselves up for the possibility of using the application as an android app. if name in ('main','android'): Transpose().run() Now you might wonder why I used buttons instead of labels for all our textual objects. That’s because labels in Kivy don’t have any kind of visible border by default. We will play with this in the next installment. We will also add an exit button and a little bit more. The source code can be found on PasteBin at http://pastebin.com/hsicnyt1 Until next time, enjoy and thank you for putting up with me for three years!
Enfin, nous avons notre routine « if name ». Remarquez que nous nous réservons la possibilité d'utiliser l'application comme une application android.
if __name__ in ('__main__','__android__'):
Transpose().run()
Maintenant, vous vous demandez peut-être pourquoi j'ai utilisé des boutons au lieu d'étiquettes pour tous nos objets textuels. C'est parce que les étiquettes dans Kivy n'ont aucune sorte de bordure visible par défaut. Nous jouerons avec cela dans le prochain épisode. Nous allons également ajouter un bouton pour quitter et d'autres petites choses.
Le code source peut être trouvé sur Pastebin : http://pastebin.com/8jTJSmLR
Jusqu'à la prochaine fois, amusez-vous et je vous remercie de m'avoir suivi pendant trois ans !