729G46 Informationsteknologi och programmering. Tema 5. Föreläsning 1

729G46 Informationsteknologi och programmering

Tema 5. Föreläsning 1

Översikt

⁃ Tema 5

Temauppgift 5

Algoritmseminarium 2 / Algoritmrapport 2

⁃ Mer om funktioner: default-värden och funktionsobjekt

⁃ Grafiska gränssnitt och händelsedriven programmering

Vad är ett GUI?

Olika former av programflöde

GUI-programmering i Python med Tkinter

Tema 5

Grafiska gränssnitt

instanser av olika widget-klasser

händelsebaserat flöde

Temauppgift 5

⁃ Grafiska gränssnitt med Tkinter

⁃ Utplacering av kvadrater i rader/kolumner

⁃ Kodkrav

Variabelnamn

Hårdkodade värden

Kommentarer för alla satser som är två eller fler rader (dvs alla if-satser, loop-konstruktioner m.m.)

⁃ Rekommendation: dela upp kod i funktioner för att öva och att visa att ni vet hur man gör

Algoritmseminarium 2 och Algoritmrapport 2

⁃ Dela upp problem i delproblem.

⁃ Seminarium: diskutera hur delar av er kod skulle kunna brytas ut

⁃ Algoritmrapport: bryta ut funktioner från befintlig kod

⁃ Algoritmrapport 2 kommer att uppdateras!

Tips! f-strängar (Python 3.6+)

# Från Python 3.6 finns f-strängar (f-strings)

# Jag kommer också kalla dessa för formatsträng

# Används genom att använda f som prefix framför en sträng.

fstring = f"Detta är en f-sträng"

# I f-strängar kan vi skriva pythonuttryck innanför måsvingar med

# automatisk konvertering till strängar!

# Mycket smidigt för att skriva ut variabler!

l = ["en", "lista", "med", "värden"]

print(f"första värdet: {l[0]}")

Default-värden för

funktionsargument

Default-värden

⁃ Funktioner med valfria argument; argument med defaultvärden

⁃ Syntax

def funktionsnamn(arg1, arg2=10, arg3=20):

print(f"arg1: {arg1}, arg2: {arg2}, arg3: {arg3}")

⁃ Argument utan default-värde (positionella argument) måste alltid anges (i rätt ordning)

⁃ Argument med default-värde kan hoppas över eller anges explicit (nyckelordsargument)

⁃ Positionella argument måste användas före nyckelordsargument.

Användning av default-argument

⁃ När man vill ha ett standardbeteende, men ge utrymme för variation.

⁃ Exempel:

print() open()

print()

Exempel

print("hej", end="") print("då")

open()

Funktionsdefinitioner, defaultvärden

def skriv_ut_hälsning1(namn):

print("Hej " + namn + "!")

print("Du har ett fint namn, {}.".format(namn)) def skriv_ut_hälsning2(namn="Eggbert"):

print("Hej " + namn + "!")

print("Du har ett fint namn, {}.".format(namn))

def skriv_ut_hälsning3(namn="Eggbert", hälsning="Hej"):

print(hälsning + " " + namn + "!") skriv_ut_hälsning1("Yoda")

skriv_ut_hälsning2()

skriv_ut_hälsning3(hälsning="Tjena") skriv_ut_hälsning3("Tjena")

skriv_ut_hälsning3(hälsning="Tjena", "Eggbert")

# output

# Hej Yoda!

# Du har ett fint namn, Yoda.

# Hej Eggbert!

# Du har ett fint namn, Eggbert.

# Tjena Eggbert!

# Tjena Tjena!

# ERROR

Funktionsobjekt

.. även funktioner är objekt i Python

Funktions/Metodobjekt

⁃ Klasser kan instansieras och producera objekt

⁃ I Python kan man även behandla funktions-"namn" som objekt.

⁃ En funktion:


def hejsan():


print("Hejsan")

⁃ Ett funktionanrop: ^hejsan()

⁃ Funktionsobjektet: ^hejsan

Exempel på funktionsobjekt

def print_hello():

print("Hello World!") bacon = print_hello

bacon()

# utskrift

# Hello World!

Grafiska gränssnitt

GUI = Graphical User Interface

⁃ Grafiskt gränssnitt

⁃ Gränssnitt - något som ligger mellan två andra saker.

⁃ I vårt fall: det mellan användaren och programmet

Widgets (window gadgets)

Button 1 Button 2

Drop Down

Radio Button 1 Radio Button 2 Radio Button 3 Text input field Label

Text input field Label

Selected Checkbox Unselected Checkbox Selected Checkbox Unselected Checkbox

"Bakom" kulisserna

⁃ Widgets, instanser av olika typer av GUI-element.

⁃ Olika typer av fönster: dialogrutor, öppna dokument etc

⁃ Behållare (Containers) som kan innehålla widgets: ^Frame,

Panel, Canvas

⁃ Funktionalitet för att ordna layout av widgets etc

⁃ Koppling mellan widgets och funktioner/metoder.

Program- och

interaktionsflöde för

textbaserade gränssnitt

Exempel: Textbaserat gränssnitt

> ^ls

program.py saga.txt saga2.txt

> ^avsluta

Ogiltigt kommando.

> redigera fil

Ogiltigt kommando.

Exempel: Textbaserat gränssnitt

Enter name: Amanda

Enter title: Giant Slayer Enter sex (m/f): f

Choose appearance
 1. unwashed


2. sparkling
 3. retro

> 1

Do you have a magic bag (y/n)? y Are you happy (y/n)? n

Do you have a secret (y/n)? n

Generate story (y=yes, n=no, start over)? n

Programflöde: Textbaserat gränssnitt

⁃ Linjär/hierarkisk interaktion

⁃ Visa alternativ för användaren

⁃ Ta emot kommando från användaren.

⁃ Ta eventuellt emot ytterligare information från användaren.

⁃ Interaktion mha tangentbord

⁃ Typisk interaktion

Kör kommando Välj ett alternativ Svara på en fråga

Program- och

interaktionsflöde för

grafiska gränssnitt

Exempel: GUI

Exempel: GUI

This is the story of Amanda, the Giant Slayer.

Ever since the day she was born, Amanda had a unwashed look.

Amanda had a magic bag.

Sadly, there is not much else to say about her.

Name Amanda

Appearance unwashed Female

Male Sex

has magic bag is happy

Other

has secret

Reset Quit

Title the Giant Slayer

Programflöde: GUI

⁃ Icke-linjär interaktion

⁃ Reaktivt gränssnitt - tät återkoppling

⁃ Interaktion via mus och tangentbord

⁃ Interaktion med en begränsad och standardiserad uppsättning widgets (oftast)

Syfte med att skapa grafiska

gränssnitt i Python med tkinter

⁃ Introduktion till GUI-programmering

⁃ Widgets i tkinter

⁃ få saker att hända när man interagerar med widgets

⁃ bestämma layout för widgets i ett GUI

Om tkinter

⁃ Olika widgetklasser finns: faktiska gränssnittskomponenter är instanser av klasserna

⁃ Olika inställningar kan ges när man skapar en widget.

⁃ Widgets kan placeras i ett GUI på tre sätt - det finns tre

"geometry managers" (i andra språk också kallade för

"layout managers").

Widgets

http://pythonwiki.tiddlyspot.com/#%5B%5BVisual%20Guide%20to%20Tkinter%20widgets%5D%5D

Objektorienterat GUI

Struktur på en GUI-applikation med Tkinter

⁃ Importera tkinter

import tkinter as tk

⁃ Ett rot-fönster

root = tk.Tk()

⁃ Widgets läggs in i rot-fönstret

button = tk.Button(root, text="Press me!")

⁃ Widgets layoutas

button.pack()

⁃ Huvudloopen startas

root.mainloop()

button.py

# importera tkinter-modulen import tkinter as tk

# skapa ett Tk-fönster root = tk.Tk()

button = tk.Button(root, text="Press Me!") button.pack()

# starta GUI-loopen root.mainloop()

Var finns min widget?

⁃ En widget ligger alltid i en "container" (behållare).

⁃ Vissa widgets är containers, t.ex. fönster och Frames.

Widgets i Tkinter

Button A simple button, used to execute a command or other operation.

Canvas

Structured graphics. This widget can be used to draw graphs and plots, create graphics editors, and to implement custom

widgets.

Checkbutton Represents a variable that can have two distinct values. Clicking the button toggles between the values.

Entry A text entry field.

Frame

A container widget. The frame can have a border and a

background, and is used to group other widgets when creating an application or dialog layout.

Label Displays a text or an image.

Listbox Displays a list of alternatives. The listbox can be configured to get radiobutton or checklist behavior.

Menu A menu pane. Used to implement pulldown and popup menus.

Menubutton A menubutton. Used to implement pulldown menus.

Message Display a text. Similar to the label widget, but can automatically wrap text to a given width or aspect ratio.

Radiobutton

Represents one value of a variable that can have one of many values. Clicking the button sets the variable to that value, and clears all other radiobuttons associated with the same variable.

Scale Allows you to set a numerical value by dragging a "slider".

Scrollbar Standard scrollbars for use with canvas, entry, listbox, and text widgets.

Text

Formatted text display. Allows you to display and edit text with various styles and attributes. Also supports embedded images and windows.

Toplevel A container widget displayed as a separate, top-level window.

Exempel på

widgetanvändning

window.py

# importera tkinter-modulen from tkinter import *

# skapa ett Tk-fönster window = Tk()

# starta GUI-loopen mainloop()

Ett fönster i Tkinter är ett objekt av typen Tk. För att utritning av

fönster etc ska göras, måste man starta GUI:ts huvudloop: mainloop()

Flera fönster

# windows.py

from tkinter import *

# Skapa det första fönstret root = Tk()

# Skapa det andra fönstret top = Toplevel()

# Starta Tk-loopen root.mainloop()

För att skapa fler än ett fönster används klassen Toplevel fönster utöver det första.

Skapa widgets

# utan att spara referens

Widget(parent, attribute1=v1, attribute2=v2, ...)

# med referensen sparad

w = Widget(parent, attribute1=v1, attribute2=v2, ...)

När man skapar en widget, skapar en instans av en widgetklass, måste man ange dess förälder. Föräldern (parent) är ett fönster eller en

widget som kan agera "behållare".

Button

⁃ En knapp.

⁃ Knappar kan ha text på

⁃ Knappar kan tryckas på

⁃ Knappar kan vara avstängda (disabled)

⁃ http://effbot.org/tkinterbook/button.htm

button.py

# importera tkinter-modulen import tkinter as tk

# skapa ett Tk-fönster root = tk.Tk()

button = tk.Button(root, text="Press Me!") button.pack()

# starta GUI-loopen root.mainloop()

Få något att hända när man trycker på knappen

⁃ Koppla beteende till en widget genom att koppla ett funktionsobjekt/metodobjekt till det.

⁃ Ett funktionsobjekt/metodobjekt är "namnet" på en funktion/metod.

⁃ Vi kan koppla ihop ett funktionsobjekt som ett kommando som körs när vi aktiverar en widget.

⁃ Vi kan binda ihop en viss händelse relaterat till widgeten med ett funktionsobjekt.

Ange widget-kommando

⁃ Man kan koppla ett kommando till vissa widgets, t.ex.

knappar:


button = tk.Button(root, text="OK", command=do_this)


där ^do_this är ett funktionsobjekt.

button-command.py

# importera tkinter-modulen import tkinter as tk

def callback():

"""Denna funktion skriver ut något när den blir anropad."""

print("Something happened!")

# skapa ett Tk-fönster root = tk.Tk()

button = tk.Button(root, text="Press Me!", command=callback) button.pack()

# starta GUI-loopen root.mainloop()

Händelser

⁃ Förutom att vissa widgets kan ha kommandon kopplade till sig, kan olika former av interaktion med GUI:t producera

händelser (en. events).

⁃ Dessa händelser kan kopplas till funktionsobjekt.

⁃ En händelse beskrivs med hjälp av en sträng, t.ex.

"<Button-1>" som betyder att musknapp 1 har tryckts ner.

⁃ Man binder en händelse till ett funktionsobjekt med

bind()-metoden:


widget.bind("<Button-1>", function_object)

Händelser forts.

def key_handler(event):


print("A key was pressed")

⁃ Funktionsobjektet man binder till ett event ska ta in en instans av klassen Event som parameter

⁃ Från ett Event-objekt kan man läsa av diverse information. För mer information, läs referensmaterialet.

Exempel på händelser

⁃ Nedan följer några exempel på händelser man kan binda:

<Enter> när musen förs in i över en widget

<Leave> när musen lämnar en widget

<KeyPress> när en tangent trycks ner

<KeyRelease> när en tangent åker upp igen

<Button-1> när musknapp 1 trycks

<Button-2> när musknapp 2 trycks

button-event.py

# button-event.py

import tkinter as tk

def callback():

print("Something happened!") def over_me(event):

print("You are over me!") def left_me(event):

print("You left me!")

# skapa ett Tk-fönster root = tk.Tk()

button = tk.Button(root, text="Press Me!", command=callback) button.bind("<Enter>", over_me)

button.bind("<Leave>", left_me) button.pack()

# starta GUI-loopen root.mainloop()

Label

⁃ En Label-instans används som etiketter i ett GUI.

⁃ T.ex. för att berätta vad som ska skrivas i ett textfält.

⁃ Man kan välja om texten i Labeln ska var centrerad eller höger- eller vänsterjusterad. Standard är vänsterjusterad.

Entry

⁃ Ett Entry är ett textfält som har en rad.

⁃ Vi läser från ett Entry genom att anropa på dess metod

get()

⁃ Vi ändrar texten som står i ett entry genom att använda metoderna ^insert() och ^delete().

⁃ insert() behöver ett start-index och en sträng, t.ex.

entry1.insert(0, "hej")

⁃ delete() behöver ett start-index.

⁃ Läs mer i referenslitteraturen.

entry.py

import tkinter as tk

# skapa och placera en frame i ett fönster root = tk.Tk()

def key(event):

"""Skriv ut debugutskrifter för textfält."""

if event.widget == entry1:

print(entry1.get())

if event.widget == entry2:

print("Entry 2 changed")

# Entry 1

entry1 = tk.Entry(root)

entry1.bind("<KeyRelease>", key) entry1.pack()

# Entry 2

entry2 = tk.Entry(root)

entry2.bind("<KeyRelease>", key) entry2.pack()

root.mainloop()

Frame

⁃ En behållare (eng container) för andra widgets.

⁃ Ett användningsområde för ^Frames är att gruppera widgets.

⁃ T.ex. kan flera widgets läggas in i en Frame. Sen lägger man till den ^frame:n till ett fönster.

Layout

⁃ Det finns sätt att bestämma hur widgets ska organiseras i en container.

⁃ Följande metoder kan användas för att placera ut

pack grid place

⁃ Vi ska koncentrera oss på ^grid.

Grid

⁃ Vi lägger ut våra widgets i en matris/tabell/rutnät.

⁃ Matrisen har rader och kolumner av celler.

⁃ En ^widget placeras på en viss rad, i en viss kolumn.

⁃ En ^widget kan uppta en eller fler rader eller kolumner.

0 1 0

1 2 3

Exempel på label, textfält och knapp

Name Bob

Ok Game Bob's Great Adventure

The best game character ever

Grid forts

⁃ En widget kan sträcka sig över fler än en rad/kolumn.

⁃ Vi kan fästa en widget i t.ex. ett hörn eller vid en kant där den stannar om en cell skulle vara större än den widget som finns inuti den.

⁃ Läs mer om ^Grid i referensmaterialet.

0 1 0

1 2 3

Exempel på label, textfält och knapp

⁃ Widget som sträcker sig över två kolumner

Name Bob

Ok Game Bob's Great Adventure

The best game character ever

grid.py

import tkinter as tk

# Framen läggs automatisk in i en tk.Tk() frame = tk.Frame()

# placera frame i fönstret med hjälp av pack() frame.pack()

# titel-label

title_label = tk.Label(frame, text="The best game character ever", background="red")

title_label.grid(row=0, column=0, columnspan=2,sticky=tk.E+tk.W+tk.N+tk.S)

# namn-label

name_label = tk.Label(frame, text="Name")

name_label.grid(row=1, column=0, sticky=tk.NW)

# name-textfält

name_entry = tk.Entry(frame)

name_entry.grid(row=1, column=1, sticky=tk.NW)

# game-label

game_label = tk.Label(frame, text="Game")

game_label.grid(row=2, column=0, sticky=tk.NW)

# name-textfält

game_entry = tk.Entry(frame)

game_entry.grid(row=2, column=1, sticky=tk.NW)

# knapp

button = tk.Button(frame, text="Ok")

button.grid(row=3, column=1, sticky=tk.SE) frame.mainloop()

Radiobutton

⁃ En grupp av knappar där endast en kan vara aktiv.

⁃ Knappar grupperas ihop genom att de tilldelas samma Tk-variabel att lagra sitt värde i.

⁃ Ett funktionsobjekt kan anges som ett kommando till varje radioknapp.

Tk-variabler

⁃ Tk-variabler är objekt av som Tkinter använder för att lagra värden.

⁃ T.ex. finns

StringVar som tar hand om strängar IntVar som tar hand om int:ar

⁃ Exempel:


s = tk.StringVar()
 s.set("hej")


print(s.get())

⁃ Referens: http://effbot.org/tkinterbook/variable.htm

radio.py

def radio():

"""Skriv ut värdet hos radio-knappen."""

print(radio_value.get())

# Tk-variabel att lagra radioknapp-gruppens värde i radio_value = tk.StringVar()

radio_value.set("inget valt")

# knapp 1

radio_button1 = tk.Radiobutton(root, text="Hejsan", variable=radio_value, value="hejsan", command=radio)

radio_button1.pack()

# knapp 2

radio_button2 = tk.Radiobutton(root, text="Hoppsan", variable=radio_value, value="hoppsan", command=radio)

radio_button2.pack()

# knapp 3

radio_button3 = tk.Radiobutton(root, text="Svejsan", variable=radio_value, value="svejsan", command=radio)

radio_button3.pack() root.mainloop()

Checkbutton

⁃ En knapp som antingen är på eller av.

⁃ Värdet avläses från en Tkinter-variabel (^IntVar) som man kopplar till knappen.

Tk-variabler forts

⁃ En Tk-variabel kan anropa ett funktionsobjekt när

förändring sker, antingen när någon läser från den, eller när någon skriver till den.

⁃ Exempel:

def hello(name, index, mode):


print(v.get())


v = tk.StringVar() v.set("eggs")


v.trace('w', hello)
 v.set("bacon")

checkbox.py

import tkinter as tk

root = tk.Tk()

def check_changed(name, index, mode):

"""Skriv ut debug-utskrifter för checkboxar."""

# name är namnet på den variabeln som triggade check_trace

# i detta exempel finns två kandidater, check_val1 som har namnet "check1"

# och check_val2 som har namnet "check2".

if name == "check1":

print("check 1: " + str(check_val1.get())) elif name == "check2":

print("check 2: " + str(check_val2.get()))

# skapa en instans av IntVar som får namnet "check1"

check_val1 = tk.IntVar(name="check1")

# när värdet på check_val1 ändras, kör funktionen check_changed() check_val1.trace('w', check_changed)

# skapa en instans av IntVar som får namnet "check2"

check_val2 = tk.IntVar(name="check2")

# när värdet på check_val2 ändras, kör funktionen check_changed() check_val2.trace('w', check_changed)

# skapa två checkbuttons, koppla ihop dem med var sin variabel checkbutton1 = tk.Checkbutton(root, variable=check_val1,

text="box of check I am") checkbutton2 = tk.Checkbutton(root, variable=check_val2, text="box of check I am too")

# lägg till knapparna till layouten checkbutton1.pack()

checkbutton2.pack() root.mainloop()

OptionMenu

⁃ Rullgardinsmeny

⁃ har ett värde

⁃ använder en StringVar

optionmenu.py

import tkinter as tk

root = tk.Tk()

var = tk.StringVar(root)

var.set("one") # initial value

option = tk.OptionMenu(root, var, "one", "two", "three", "four") option.pack()

def ok():

print("value is", var.get())

button = tk.Button(root, text="OK", command=ok) button.pack()

tk.mainloop()