Ceci est une ancienne révision du document !
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.
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.
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()
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.
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
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))
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.
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) #—————————-
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.
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
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!