Inf109 Programmering for realister Uke 5. I denne leksjonen skal vi se på hvordan vi kan lage våre egne vinduer og hvordan vi bruker disse.

Transkript

1 Inf109 Programmering for realister Uke 5 I denne leksjonen skal vi se på hvordan vi kan lage våre egne vinduer og hvordan vi bruker disse. Før du starter må du kopiere filen graphics.py fra og lagre denne i samme katalog som du skal lage dine programmer i. Denne filen inneholder metoder som vi kommer til å bruke. For å få tilgang til metodene i graphics.py må du alltid begynne med å skrive >>> from graphics import * Dette må du også legge inn som første linje i program du lager. Denne kommandoen henter inn alle metoder som ligger i graphics.py ( * = alle metoder). a) Opprette vinduer Du kan nå lage ditt første vindu med å skrive >>> win = GraphWin() GraphWin() er metoden (fra graphics.py) som oppretter vinduet og win er ditt håndtak til det (på samme måte som en filpeker var et håndtak til en fil). For å stenge ned vinduet skriver du >>> win.close() Vinduet du laget var 200 piksler brett og 200 piksler høyt og hadde overskriften Graphics Window (dette er standard-verdier). En piksel er det minste punktet på en skjerm som vi kan kontrollere og brukes som måleenhet for å angi størrelsen til et vindu (og dessuten skjermer). Du kan selv bestemme ulike egenskaper til vinduet du oppretter. Skriver du GraphWin(tekst,x,y) får du et vindu med tekst-strengen tekst øverst som er x piksler brett og y piksler høyt. Lar du være å ta med verdiene blir standard-verdiene brukt. Du kan også endre bakgrunnsfargen på vinduet ved å skrive >>> win.setbackground(farge) Der farge er en tekststreng som sier hvilken farge vinduet skal ha, så som red, green, blue etc. Du kan også få nyanser ved å skrive red1, red2,... Opprett et par vinduer av ulik størrelse i Python-skallet og se at du klarer å forandre bakgrunnsfargen på de før du stenger de ned. 1

2 Lag en metode som oppretter 10 standard-vinduer (vha en løkke) uten å stenge de ned. Hvordan skal du bli kvitt vinduene? Lag et vindu som er omtrent like stort som skjermen og anslå hvor mange piksler skjermen din er på. b) Tegne i vinduer Null-punktet (0,0) i et vindu sitter øverst til venstre. Dvs. at første koordinaten øker mot høyre og andre koordinaten øker nedover. Vi har metoder for å tegne følgende: Figur Punkt Linje Sirkel Oval Rektangel Polygon (mangekant) Tekst (sentrert) Metode Point(x,y) Line(punkt1,punkt2) Circle(midtpunkt, radius) Oval(punkt1, punkt2) Rectangle(punkt1, punkt2) Polygon(punkt1, punkt2,,) Text(midtpunkt, streng) Hver av metodene er nærmere beskrevet i kapittel (i 1. utgave, kap i andre utgave) og er relativt intuitive å bruke. Merk at for å opprette en sirkel så må du også lage senterpunktet. Dvs. for å lage en sirkel med senter (50,50) og med radius 10 kan du skrive: >>> punkt = Point(50,50) >>> minsirkel = Circle(punkt,10) Du kunne også opprettet punktet du trenger samtidig som du lager sirkelen: >>> minsirkel = Circle(Point(5,10),10) Det er ikke tilstrekkelig å bare opprette en figur for at den skal bli tegnet i ditt vindu. For å få det til må du spesifikt gi beskjed om hvilket vindu sirkelen skal tegnes i. Det gjør du på følgende måte: >>> minsirkel.draw(win) Da vil sirkelen bli tegnet i vinduet win (som du allerede har opprettet). Du kan også sette ulike egenskaper til figurene du lager, som for eksempel farge, linjebredde og linjefarge. Det gjør du på følgende måte: >>> minsirkel.setfill( red ) >>> minsirkel.setoutline( blue ) >>> minsirkel.setwidth(4) 2

3 Du får nå en sirkel med rødt fyll og med blå kant som er 4 piksler bred. Lag et grafisk vindu og tegn inn minst en hver av de ulike figurene. Det er ofte lettere å forholde seg til data grafisk enn som enkelt-verdier. En av de enkleste måtene å vise data er som to-dimensjonale plott, der x-aksen representerer data punkt (punkt 1, 2 osv) og der y-aksen viser størrelsen til hvert punkt. Last ned filen data.txt fra katalogen Fillager -> Prosjekter. Denne filen inneholder linjer med tekst. Hver linje består av 4 heltall. De første tre posisjonene i hver linje er reservert til det første tallet, posisjonene 4 t.o.m. 6 til det andre, fra 8 t.o.m. 10 til det tredje og fra 12 t.o.m. 14 til det fjerde. Lag et program som tolker hver linje som fire heltall x1, y1, x2, y2 og som tegner en linje i et grafisk vindu mellom punktene (x1, y1) og (x2, y2). Lag et program som leser inn 10 positive verdier (ikke større enn høyden til ditt grafiske vindu) og som for den i te verdien y i tegner en rød sirkel med senter i punktet (i *10, y i ) og med radius 5. Modifiser foregående program slik at det i tillegg tegner en linje mellom punkt i og punkt i +1. Hint, hvis du bruker en løkke der du leser inn og tegner ut ett og ett punkt så må du behandle det første punktet før løkken. c) Koordinatsystem Hver gang figurer og tekst skal plasseres i et vindu må vi selv regne ut deres posisjon i forhold til hvor stort vinduet er. Man må også passe på å skalere figuren slik at den passer til størrelsen på vinduet. Dette kan fort bli en del knoting ut av, særlig hvis man senere vil endre størrelsen på vinduet. For eksempel, dersom man vil dele opp et standard 200x200 vindu i fire like store ruter må man tegne en linje mellom (100,0) og (100,200) og en linje mellom (0,100) og (200,100). Hvis man nå endrer størrelsen på vinduet til 300x300 må man også forandre tilsvarende på hvordan linjene blir tegnet. For å håndtere slike situasjoner finnes det en metode som gjør at man selv kan definere og bruke et eget koordinatsystem oppå vinduet og som automatisk tilpasses størrelsen til vinduet uansett hvor stort det egentlig er. Kommandoen >>> win.setcoords(0,0,2,2) setter opp et koordinatsystem der nederste venstre hjørne har koordinatene (0,0) og øverste høyre hjørne har koordinatene (2,2). Tegner vi nå en linje mellom (1,0) og (1,2) og mellom (0,1) og (2,1) så blir vinduet delt i fire uansett hvor stort vinduet egentlig er. Lag et program som deler opp ditt grafiske vindu i et 3x3 rutemønster, passende for å spille tre-på-rad. 3

4 I et koordinat-system er det vanlig at man setter opp verdier langs x og y-aksen med passende avstand slik at det skal være lettere å vurdere de plottede verdiene. Man pleier også å sette opp benevningen som brukes for hver av aksene. For å få plass til til slike ting uten at det går ut over plassen som er satt av til å vise dataene kan man gjøre koordinatsystemet større enn det man egentlig trenger. For eksempel kan man skrive win.setcoords(-1,-1,3,3) mens man fremdeles bare bruker området mellom (0,0) og (2,2). Modifiser det foregående programmet du laget slik at du får plass til å skrive 1, 2, 3 langs y-aksen og a, b, c under rutene langs x-aksen (slik man ville gjort på et sjakk-brett). Pass på at hvert tegn kommer mitt på den rekken eller kolonnen det tilhører. d) Interaktive vinduer I mange sammenhenger er det hensiktsmessig å la brukeren gi tilbakemeldinger gjennom vinduer. Det kan være gjennom at brukeren klikker et bestemt sted, for eksempel på en knapp, eller at hun skriver tekst i et eget felt. Det finnes egne metoder for å håndtere dette. >>> p = win.getmouse() får Python-skallet (eller metoden du kjører) til å stoppe opp og vente på at brukeren venstre-klikker i det grafiske vinduet win før utførelsen går videre. win.getmouse() returnerer et punkt som man kan se på med p.getx() og p.gety() som gir henholdsvis x og y koordinatene til der man klikket. Lag et tegne-program som lar brukeren tegne 10 sammenhengende linjer i et vindu (dvs. linje to skal begynne der linje en slutter osv). Får du tid kan du la programmet skrive ut koordinatene til det sist klikkede punktet (lag et tekst objekt og bruk metoden settext() for å endre koordinatene). Utskriften kan gjøres nederst til venstre i det grafiske vinduet. Entry(punkt,lengde) er en metode som setter opp et skrivbart tekst-felt startende fra punkt og med plass til lengde tegn. For å kunne bruke tekst-feltet må vi ha en egen referanse til det. Det får vi gjennom å skrive >>> input = Entry(punkt,lengde) >>> input.draw(win) Dersom brukeren har skrevet noe i tekst-feltet kan vi nå hente det ut med >>> svar = input.gettext() Vi kan også endre det som står i tekst-feltet med input.settext(streng) som erstatter det som måtte stå i tekst-feltet med streng. Modifiser foregående program slik at brukeren gir puntene via to tekst-felter istedenfor via musen. Brukeren må likevel klikke i vinduet for hver gang hun 4

5 har skrevet inn nye verdier. 5