Göm meny

Temauppgift 2

I temauppgift 2 ska ni konstruera er egen algoritm som placerar ut grafiska element enligt en specifik heuristik.

Allmänt

Betyg

För att få betyget VG på momentet för Tema 2 (PRA2) behöver man göra VG-delen av temauppgiften. Kursbetyget baseras på betyget i tema 1-3.

Redovisning och komplettering

Uppgiften redovisas på schemalagt redovisningstillfälle. Vid redovisningen visar ni att er kod fungerar korrekt, att den går igenom kontroll för PEP 8 och PEP 257 samt att ni förstår den kod ni skrivit.

Missat redovisningstillfälle kompletteras genom att skicka in en screencast där ni demonstrerar ovanstående. Screencastkomplettering skickas in individuellt.

Komplettering upp till VG: Ett specifikt tillfälle för VG-kompletteringsredovisningar kommer att hållas i slutet av kursen. Datumet är preliminärt 10-12, 245 i SU14. Anmäl dig senast fre 19 maj till jody.foo@liu.se om du önskar utnyttja detta tillfälle.

Kodstandard

Er kod ska följa standarderna PEP 8 och PEP 257. Kontrollera detta genom att köra koden genom pep8 och pep257 programmen. pep8 finns installerad för alla, men ni behöver skapa en virtuell miljö (virtualenv) och installera pep257.

Uppgift

I denna uppgift ska ni skapa en algoritm som får in en lista med tkinter.Label-objekt, samt höjd och bredd på den tkinter.Frame som de placeras ut i med hjälp av Place-geometri-hanteraren.

Er algoritm (som kan bestå av en eller flera funktioner) ska placera ut tkinter.Label-objekten så att de inte överlappar varandra. Ett visst mellanrum (hur exakt stort är upp till er) ska också finnas mellan fyrkanterna, både över, under, till vänster och till höger.

För att få VG på denna temauppgift ska er algoritm klara av uppgiften med fyrkanter som har olika storlek. Varje fyrkant ska läggas i mitten av dess tillgängliga utrymme. Börja dock med G uppgiften!

Uppdatering 2017-03-27: Ni ska inte använda funktionalitet från geometri-hanteraren Place (som t.ex. anchor), utan fyrkanterna ska placeras ut endast med .place(x=xpos, y=ypos).

Bilder från lektionen hittar ni under lektionssidan.

G-del

För att få betyget G ska algoritmen fungera för listor som innehåller Label-objekt (fyrkantiga) av samma storlek. Label-objekten i samma lista har alltså samma storlek, men olika listor kan fortfarande innehålla olika stora Label-objekt.

  • squares: Lista som innehåller tkinter.Label-objekt
  • squares_frame_height: Höjden (int) på den Frame som fyrkanterna ligger i.
  • squares_frame_width: Bredden (int) på den Frame som fyrkanterna ligger i.
  • start_left: Värdet True betyder att fyrkanterna ska placeras ut från vänster sida. Värdet False betyder att fyrkanterna ska placeras ut från höger (default: True).
  • start_top: Värdet True betyder att fyrkanterna ska börja placeras ut uppifrån. Värdet False betyder att fyrkanterna ska placeras ut från botten (default: True).

exempel på layout på G-nivå

VG-del

För att få betyget VG ska algoritmen även fungera för listor som innehåller innehåller fyrkanter av blandad storlek.

exempel på layout på VG-nivå

Redovisning och komplettering

Temauppgiften redovisas på redovisningstillfället tors 6 april. Tider hittar ni på gruppsidan.

Frånvaro vid redovisningstillfället kompletteras genom att en screencast på max 5 minuter skickas in där ni demonstrerar er kod och kortfattat berättar om er algoritm. Skicka också in all kod som behövs för att köra er algoritm. Film/länk till film + kod skickas till 729g75@ida.liu.se. Ha med ordet “Temauppgift 2”, era liu-idn, samt er handledarkod i ämnesraden.

Evelina Rennes: [evere22]
Jody Foo: [jodfo01]

Genomförande

Fundera på hur ni ska angripa problemet:

  • Vad för information behöver ni för att kunna ta fram vilken X- och Y-position som ni ska placera varje enskild fyrkant på.
  • Hur kan ni ta fram den informationen?
  • Testa er strategi på papper först innan ni börjar programmera för att se om den fungerar.
  • Innan ni börjar koda, läs igenom exempelkoden (se nedan).
  • Skriv ner er algoritm som kommentarer i er fil så att ni kan referera till dem när ni programmerar.

TIPS!: Titta på vilka olika options som man kan ange när man t.ex. använder Pack- eller Grid-geometrihanterarna från tkinter. Hur skulle ni lösa uppgiften om ni använda Grid-geometrihanteraren?

Kodskelett

När ni ska börja koda hittar ni de filer som hör till labben i ~729G75/kursmaterial/tema2/temauppgift2. Ett exempel på en algoritm som placerar ut fyrkanterna slumpmässigt hittar ni i random-layout.py. Läs denna fil och testkör den för att orientera er i kodupplägget. Ni testkör den med:

$ python3 random-layout.py

Det grafiska gränssnittet som visar hur fyrkanterna placeras hittar ni i temauppgift2.py. Titta gärna i den för exempel på hur man kan strukturera kod för grafiska gränssnitt.

Om koordinatsystemet och .place()-metoden

När .place() metoden används skickar man med nyckelordsargumenten x och y. Dessa är var det översta vänstra hörnet hos fyrkanten kommer att placeras. Exempel:

# Placera fyrkanten så att dess översta vänstra hörn är på (0, 100).
square.place(x=0, y=100)

Origo för koordinatsystemet ligger i fyrkanternas förälders översta vänstra hörn. Positiva värden på x ligger till höger om origo. Positiva värden på y ligger nedanför origo1

Hur stor är fyrkanten

För att ta reda på hur hög en tkinter-widget är, kan man använda sig av metoden .winfo_height(). För bredden använder man .winfo_width.

# spara fyrkantens höjd och bredd
square_width = square.winfo_height()
square_height = square.winfo_width()

  1. i ett “vanligt” koordinatsystem ligger positiva värden på y ovanför origo [return]

Algoritmer och grupper

På gruppindelningssidan ser ni en romersk siffra framför er grupp. Denna bestämmer vilken av nedanstående algoritmer som ni ska implementera.

I. Rad-algoritmen (kalla huvudfunktionen för row_layout)
II. Kolumn-algoritmen (kalla huvudfunktionen för column_layout)
III. Sick-sack-algoritmen (kalla huvudfunktionen för zigzag_layout)

row_layout

row_layout-algoritmen ska placera ut fyrkanterna radvis. Om inga andra argument anges, placeras den första fyrkanten ut i det översta vänstra hörnet. Nästa fyrkant läggs till höger om den första med ett visst mellanrum mellan dem. Algoritmen fortsätter så tills inga fler får plats på den raden. Nästa fyrkant som placeras ut ska ligga under den första fyrkanten, d.v.s. på nästa rad.

Om argumentet start_left är False, ska den första fyrkanten läggas i det högra hörnet istället för det vänstra. Nästa läggs till vänster om den.

Om argumentet start_top är False, ska den första fyrkanten läggas längst ner. Nästa rad är ovanför den första.

row_layout

column_layout

column_layout-algoritmen ska placera ut fyrkanterna kolumnvis. Om inga andra argument anges, placeras den första fyrkanten ut i det översta vänstra hörnet. Nästa fyrkant läggs nedanför den första med ett visst mellanrum mellan dem. Algoritmen fortsätter så tills inga fler får plats i den kolumnen. Nästa fyrkant som placeras ut ska ligga till höger om den första, d.v.s. i nästa kolumn.

Om argumentet start_left är False, ska den första fyrkanten läggas i det högra hörnet istället för det vänstra. Nästa kolumn ligger till vänster om den.

Om argumentet start_top är False, ska den första fyrkanten läggas längst ner. Nästa fyrkant placeras då ovanför den första.

column_layout

zigzag_layout

zigzag_layout-algoritmen ska placera ut fyrkanterna radvis, men när den kommer till slutet av en rad ändras riktningen som raderna läggs ut i. Om inga andra argument anges, placeras den första fyrkanten ut i det översta vänstra hörnet. Nästa fyrkant läggs till höger om den första med ett visst mellanrum mellan dem. Algoritmen fortsätter så tills inga fler får plats i den kolumnen. Nästa fyrkant som placeras ut ska ligga under den sista fyrkanten på föregående rad. Resterande fyrkanter på denna rad läggs ut från höger till vänster. Nästa rad läggs ut från vänster till höger osv.

Om argumentet start_left är False, ska den första fyrkanten läggas i det högra hörnet istället för det vänstra. Fyrkanterna på den första raden läggs ut från höger till vänster.

zigzag-layouten ignorerar värdet i start_top och börjar alltid uppifrån.

zigzag_layout


Sidansvarig: Jody Foo
Senast uppdaterad: 2017-05-03