P1 – Kapitel 5

Grafiskt gränssnitt

För att göra det lättare för dig som nybörjare har vi bara gjort textbaserade program. Men som du vet är har flesta program och webbplatser knappar, textrutor och andra grafiska element. I Python kan du också göra grafiska program med TkInter. När du installerade Python bör du fått med TkInter. (uttalas tea-kay-inter) För att vara säker skriv nedanstående i IDLE. Får du upp 8.5 eller högre är du klar för att fortsätta. Tidigare i kursen har har jag använt detta sätt att skriva print(‘talA är ‘, talA, ‘ och talB är ‘,talB) . I denna delen använder jag detta sättprint(‘talA är ‘ + str(talA) + ‘ och talB är ‘+str(talB)) ibland eftersom annars tror Python att när jag skriver ett komma (,) ska jag använda fler parametrar.  OBS kolla om alla exempel funkar OCH om tkinter funkar direkt på Windows

>>> import tkinter
>>> tkinter.TkVersion
8.5
>>>

Om något inte fungerar titta på http://www.tkdocs.com/tutorial/install.html. Skapa programmet tkinter_hello_world.py

from tkinter import *
root = Tk()
Button(root, text="Hello World").grid()
root.mainloop()
Fönster

Du bör få upp denna programfönster med en klickbar knapp. I Python kallar man etiketter, knappar, inmatningsrutor för widgets som gemensamt namn.

tkinter hello world

Den första raden importerar allt som finns i tkinter modulen i Python. Den andra raden sätter igång rotfönstret. Man kan kalla den för vad man vill men oftast skriver man root eller parent. Den tredje raden skapar en knapp i root-fönstret med texten “Hello World”. grid() i slutet anger hur man vill placera knappen. I tkinter finns tre olika sätt att placera widgets: pack, grid och place. I denna kurs kommer vi bara att titta på grid. Till sist har man med root.mainloop() eller parent.mainloop(). Det beror vad du kallade rotfönstret. I princip är det en loop som ritar allt, tar emot data som finns i fönstret tills användaren stänger fönstret.

from tkinter import *
root = Tk()
Button(root, text="row=1, column=0").grid(row=0, column=0)
Button(root, text="row=1, column=0").grid(row=1, column=0)
root.mainloop()

Du kommer att få göra om några tidigare textbaserade program till program med enkla grafiska gränssnitt. Men innan ska vi se ut grid fungerar i tkinter.  Skapa programmet grid_fyra_knappar.py. Grid fungerar som en tabell med rader och kolumner. Man startar numreringen på 0:e raden och 0:e kolumnen.

from tkinter import *
root = Tk()
Button(root, text="row=0, column=0").grid(row=0, column=0)
Button(root, text="row=1, column=0").grid(row=1, column=0)
Button(root, text="row=0, column=1").grid(row=0, column=1)
Button(root, text="row=1, column=1").grid(row=1, column=1)
root.mainloop()
Fönster

 

grid_fyra_knappar.py

Det räcker inte att lägga allt i lika stora celler i tabellform. Ibland behöver man låta widgets dräcka sig över flera kolumner eller rader. Gör programmet grid_columnspan.py. När man skriver columnspan=2 så sträcker sig den aktuella widgeten över två kolumner.

from tkinter import *
root = Tk()
Button(root, text="r=0, c=0, colspan=2").grid(row=0, column=0, columnspan=2)
Button(root, text="row=1, column=0").grid(row=1, column=0)
Button(root, text="row=1, column=1").grid(row=1, column=1)
root.mainloop()
Fönster

grid_columnspan.py

I programmet grid_rowspan.py sträcker sig en knapp över två rader istället. experimentera gärna med att skapa olika fönster med olika knappar.

from tkinter import *
root = Tk()
Button(root, text="r=0, c=0, rowspan=2").grid(row=0, column=0, rowspan=2)
Button(root, text="row=0, column=1").grid(row=0, column=1)
Button(root, text="row=1, column=1").grid(row=1, column=1)
root.mainloop()
Fönster

 

grid_rowspan.py

I Kapitel 2 gjorde du programmet om_mig.py. Nu ska vi göra om det med ett grafiskt gränssnitt så det ser ut så här

tkinter_om_mig.py

Koden i det textbaserade varianten såg ut så här

print('Hej')
print('Vad är ditt förnamn ')
fornamn = input()
print('Vad är ditt efternamn ')
efternamn = input()
print('Hej!',fornamn.title(),efternamn.title())
print('Ditt förnamn:',fornamn.title(),'har',len(fornamn),'bokstäver')

 

Grunden för ett program med tkinter ser ut så här. Denna kan du utgå från i dina kommande program.

from tkinter import *
def show():  #En metod (du kan kalla den för något annat) som körs när användaren trycker på en knapp
   kod kod

parent = Tk()
parent.title('Titel på programmet')# Här kan du sätta titeln som finns ovanför fönstret
enVariabel = StringVar() #Här definieras variabler i tkinter. I dessa lagras tex det som användaren
                          #skrivit i en textruta
parent.mainloop() 

Skapa en fil som heter tkinter_om_mig.py. I funktionen show() används set() och get() funktioner för att sätta och hämta data från olika widgets. namn.set() sätts strängen “Hej! Adam Bertilsson” om du satt Adam som förnamn och Bertilsson som efternamn i etiketten (Label) som har textvariable=namn. På liknade sätt sätter fornamnLangd.set() data i etiketten som har textvariable=fornamnLangd

from tkinter import *

def show():
    namn.set('Hej! ' + str(fornamn.get().title()) + ' ' + str(efternamn.get().title()))
    fornamnLangd.set('Ditt förnamn: '+ fornamn.get().title() + ' har ' + str(len(fornamn.get())) + ' bokstäver')

parent = Tk()
parent.title('Om mig')

fornamn = StringVar()
efternamn = StringVar()
namn = StringVar()
fornamnLangd = StringVar()

Label(parent, text="Hej").grid(row=0, column=0)

Label(parent, text="Vad är ditt förnamn?").grid(row=1, column=0)
Entry(parent, width=20, textvariable=fornamn).grid(row=1, column=1)

Label(parent, text="Vad är ditt efternamn?").grid(row=2, column=0)
Entry(parent, width=20, textvariable=efternamn).grid(row=2, column=1)

Label(parent, textvariable=namn).grid(row=3, column=0,columnspan=9)
Label(parent, textvariable=fornamnLangd).grid(row=4, column=0,columnspan=9)

Button(parent, text="Klicka här",command=show).grid(row=5, column=0)

parent.mainloop()
Övningar

Övning 5.1

Gör om övning 2.4 så den använder tkinter. Övningen där du matar in tre filmer. Så här kan det se ut.

Tips. Det kan bli många widgets. Dela upp dem i grupper och kommentera vilka widgets som tillhör vilken film

Övning 5.2

Gör om övning 3.2så den använder tkinter. Övningen om åldersgränser. Så här kan det se ut om du matar in 16 år

ovning5_1.py

 

För att göra om sten_sax_pase_03.py från kapitel 4 behöver man använda något som kan skicka ett värde till show-funktionen. I tkinter och Python finns lambda som kan ta ett värde. Så om användaren klickar på en knapp “sten”, så kan det se ut så här

Button(parent, text='sten', command=lambda: show(1)).grid(row=3, column=0)

Dessutom behöver man ha ett argument efter show(). I exemplet nedan kallar jag argumentet för dittVal. För att hålla koll på vem som vinner används två räknare: poangAnvandare och poangDator. För att dessa två variablers värden inte ska förloras varje gång man trycker på en knapp kan man skriva global framför. Om man inte gjorde det skulle variablerna vara lokala. Globala och lokala variabler togs upp i kapitel 4.

from tkinter import *
import random

def show(dittVal):

    #sätt dessa variabler till global så de går att komma åt utanför funktionen show(dittVal)
    global poangAnvandare
    global poangDator

    #funktion som visar i ord vad ett val i heltal är
    def getVal(val):
        if val == 1:
            return 'sten'
        if val == 2:
            return 'sax'
        if val == 3:
            return 'påse'

    duValde.set('Du valde '+str(getVal(dittVal))) #sätt
    datorVal = random.randint(1,3)
    print('dittVal:'+ str(dittVal))
    datorValde.set('Datorn valde '+getVal(datorVal))

    if(dittVal==datorVal):
        resultat.set('Båda valde '+getVal(dittVal)+'. Lika')
    elif(dittVal==1 and datorVal==2):
        resultat.set('Du vann!')
        poangAnvandare += 1
    elif(dittVal==1 and datorVal==3):
        resultat.set('Dator vann.')
        poangDator += 1
    elif(dittVal==2 and datorVal==1):
        resultat.set('Dator vann.')
        poangDator += 1
    elif(dittVal==2 and datorVal==3):
        resultat.set('Du vann!')
        poangAnvandare += 1
    elif(dittVal==3 and datorVal==1):
        resultat.set('Dator vann!')
        poangDator += 1
    elif(dittVal==3 and datorVal==2):
        resultat.set('Du vann!')
        poangAnvandare += 1

    lblAnvandarePoang.set(poangAnvandare)
    lblDatorPoang.set(poangDator)

parent = Tk()
parent.title('Sten sax påse')

poangAnvandare = 0
poangDator = 0


sten = StringVar()
duValde = StringVar()
datorValde = StringVar()
resultat = StringVar()
lblAnvandarePoang = StringVar()
lblDatorPoang = StringVar()

Label(parent, text="Välkommen till sten sax påse").grid(row=0, column=0,columnspan=5)
Label(parent, text="Din motståndare är datorn").grid(row=1, column=0,columnspan=5)
Label(parent, text="Välj sten, sax eller påse").grid(row=2, column=0,columnspan=5)

Button(parent, text='sten', command=lambda: show(1)).grid(row=3, column=0)
Button(parent, text='sax', command=lambda: show(2)).grid(row=3, column=1)
Button(parent, text='påse', command=lambda: show(3)).grid(row=3, column=2)

Label(parent, textvariable=duValde).grid(row=5, column=0, columnspan=5)
Label(parent, textvariable=datorValde).grid(row=6, column=0,columnspan=5)
Label(parent, textvariable=resultat).grid(row=7, column=0,columnspan=5)

Label(parent, text="Din poäng").grid(row=8, column=1)
Label(parent, text="Dator poäng").grid(row=8, column=0)
Label(parent, textvariable=lblAnvandarePoang).grid(row=9, column=1)
Label(parent, textvariable=lblDatorPoang).grid(row=9, column=0)

parent.mainloop()

Lämna en kommentar