{"id":113,"date":"2020-11-03T09:31:34","date_gmt":"2020-11-03T09:31:34","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/?post_type=chapter&p=113"},"modified":"2020-12-29T08:40:29","modified_gmt":"2020-12-29T08:40:29","slug":"pysimplegui-joonistamine","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/chapter\/pysimplegui-joonistamine\/","title":{"raw":"LISA: PySimpleGUI joonistamine","rendered":"LISA: PySimpleGUI joonistamine"},"content":{"raw":"Sarnaselt tkinter-ile saab PySimpleGUI-s joonistada erinevaid kujundeid, m\u00e4\u00e4rata nende asukohta, suurust, v\u00e4rvi jne.\r\n\r\nVaatame samm-sammult, kuidas luua programmi, mis kuvab ekraanile graafikaakna koos taustapildi ja maja kujutisega.\r\n\r\nEsmalt peame importima k\u00f5ik PySimpleGUI klassid ja funktsioonid, nagu juba teame.\r\n
import PySimpleGUI as sg<\/pre>\r\nLoome akna paigutuse. Sarnaselt tkinter-ile kasutame elementide paigutamise jaoks koordinaatteljestikku. Koordinaadid x ja y suurenevad vasakust nurgast selliselt:\r\n\r\n\"\"\r\n\r\nM\u00e4\u00e4rame sg.Graph()<\/strong><\/em>-i abil l\u00f5uendi suuruse, selle alumise vasaku nurga ning parema \u00fclemise nurga koordinaadid (x,y). Samuti lisame l\u00f5uendi alla veel \u00fche rea, kuhu paneme nupu, millele vajutades suletakse programm.\r\n\r\nPS! Pane t\u00e4hele, et SimpleGUI-s saab m\u00e4\u00e4rata ainult alumise vasaku ning \u00fclemise parema nurga! Seega, kuna meie tahame, et \u00fclemise vasaku nurga koordinaadid oleksid (x=0,y=0), peame hoolikalt j\u00e4lgima, missugused koordinaadid siin m\u00e4\u00e4rame:\r\n
paigutus = [[sg.Graph(\r\n            canvas_size =(400, 400),\r\n            graph_bottom_left=(0, 400),\r\n            graph_top_right=(400, 0),\r\n            key=\"l\u00f5uend\")],\r\n            [sg.Cancel('V\u00e4lju')]]<\/pre>\r\nN\u00fc\u00fcd loome graafikaakna ning ka muutuja minu_l\u00f5uend<\/code>, mille abil saame meie loodud l\u00f5uendi aknasse lisada.\r\n
aken = sg.Window(\"Joonistame!\", paigutus)\r\naken.Finalize()\r\n\r\nminu_l\u00f5uend = aken.Element(\"l\u00f5uend\")<\/pre>\r\nSellesse muutujasse saame omakorda hakata lisama erinevaid elemente.\r\n\r\nEsmalt v\u00f5iksime l\u00f5uendile panna .png formaadis taustapildi, mis asub meie Pythoni failiga samas kaustas. Kuna tahame, et pilt kataks terve akna, m\u00e4\u00e4rame alguskohaks l\u00f5uendi \u00fclemise vasaku nurga koordinaadid (x=0, y=0).\r\n\r\n\"\"\r\n
minu_l\u00f5uend.DrawImage(filename=\"minupilt.png\", location=(0, 0))<\/pre>\r\nPS! Sellisel kujul saab graafikaaknas kuvada ainult .png formaadis pilte! Kui tahaksime kasutada n\u00e4iteks .jpg formaadis pilte, peaksime need enne kasutamist PIL mooduli abil .png formaati teisendama.\r\n\r\nSelle jaoks peame importima PIL moodulist Image<\/em> klassid ning seej\u00e4rel saame avada oma pildi ning selle .png formaati teisendada:\r\n
from PIL import Image\r\nfail = Image.open('minupilt.jpg')\r\nfail = fail.save('minupilt.png')<\/pre>\r\nN\u00fc\u00fcd saamegi anda selle pildifaili .DrawImage<\/strong><\/em> argumendiks:\r\n
taustapilt = minu_l\u00f5uend.DrawImage(filename='minupilt.png', location=(0, 0))<\/pre>\r\nOn aeg hakata joonistama maja! Selle jaoks kasutame erinevaid kujundeid. Kujundite loomisel tuleb \u00e4ra m\u00e4\u00e4rata nende alguspunkt (x,y) ning l\u00f5pppunkt (x,y) ning samuti saame m\u00e4\u00e4rata ka kujundi joone v\u00e4rvi ning v\u00e4rvi, millega tahame kujundi t\u00e4ita.\r\n\r\nN\u00e4iteks, kui tahame luua \u00fche ristk\u00fcliku, peame esmalt paika panema selle alumise vasakpoolse tipu ning seej\u00e4rel \u00fclemise vasakpoolse tipu koordinaadid (seega diagonaalsed tipud):\r\n
minu_l\u00f5uend.DrawRectangle((200,200), (350,380))<\/pre>\r\nN\u00fc\u00fcd lisamegi l\u00f5uendile erinevaid kujundeid:\r\n
#ristk\u00fclik\r\nmaja = minu_l\u00f5uend.DrawRectangle((200,200), (350,380), line_color='black', fill_color='darkgrey')\r\n\r\nkatus = minu_l\u00f5uend.DrawRectangle((180,200), (370,150), line_color='black', fill_color='darkgrey')\r\n\r\n#punkt - m\u00e4\u00e4rame punkti keskpunkti koordinaadid (275,250) ning suuruse (50)\r\nmaja_aken = minu_l\u00f5uend.DrawPoint((275, 250), 50, color='blue')\r\n\r\nuks = minu_l\u00f5uend.DrawRectangle((260, 380), (290,320), line_color='black', fill_color='brown')<\/pre>\r\nMaja k\u00f5rvale v\u00f5iksime lisada ka n\u00e4iteks \u00fche inimese kriipsujuku n\u00e4ol.\r\n\r\nSelleks kasutame .DrawLine((x,y), (x,y))<\/strong><\/em>, kus esimesteks koordinaatideks on joone alguspunkt ning teisteks joone l\u00f5pppunkt. Joone paksust saab ka muuta, kasutades n\u00e4iteks width=2<\/em> saab joont paksemaks teha (vaikimisi on width<\/em> v\u00e4\u00e4rtuseks 1, mis on k\u00f5ige peenem joon).\r\n
#inimene\r\njalg = minu_l\u00f5uend.DrawLine((40, 370), (50, 340), color=\"black\", width=2)\r\njalg2 = minu_l\u00f5uend.DrawLine((50, 340), (60, 370), color=\"black\", width=2)\r\nkeha = minu_l\u00f5uend.DrawLine((50, 340), (50, 320), color=\"black\", width=2)\r\npea = minu_l\u00f5uend.DrawOval((40, 300), (60, 320), fill_color=\"black\")\r\nk\u00e4ed = minu_l\u00f5uend.DrawLine((30, 330), (70, 330), color=\"black\", width=2)<\/pre>\r\nProgrammi l\u00f5ppu kirjutame juba tuttavad read:\r\n
while True:\r\n    syndmus, v22rtused = aken.read()\r\n    if syndmus == sg.WIN_CLOSED or syndmus == 'V\u00e4lju':\r\n            break\r\naken.close()\r\n<\/pre>\r\nJa meie maja ongi valmis! Proovi n\u00fc\u00fcd ka ise siin koodis muuta n\u00e4iteks elementide suurust, v\u00e4rvi v\u00f5i asukohta.\r\n\r\nKogu programm n\u00e4eb seega v\u00e4lja selline:\r\n
import PySimpleGUI as sg\r\n\r\npaigutus = [\r\n    [sg.Graph(\r\n            canvas_size =(400, 400),\r\n            graph_bottom_left=(0, 400),\r\n            graph_top_right=(400, 0),\r\n            key=\"l\u00f5uend\")],\r\n            [sg.Cancel('V\u00e4lju')]]\r\n\r\naken = sg.Window(\"Joonistame!\", paigutus)\r\naken.Finalize()\r\nminu_l\u00f5uend = aken.Element(\"l\u00f5uend\")\r\n\r\ntaustapilt = minu_l\u00f5uend.DrawImage(filename=\"minupilt.png\", location=(0, 0))\r\n\r\nmaja = minu_l\u00f5uend.DrawRectangle((200,200), (350,380), line_color='black', fill_color='darkgrey')\r\n\r\nkatus = minu_l\u00f5uend.DrawRectangle((180,200), (370,150), line_color='black', fill_color='darkgrey')\r\n\r\nmaja_aken = minu_l\u00f5uend.DrawPoint((275, 250), 50, color='black')\r\n\r\nuks = minu_l\u00f5uend.DrawRectangle((260, 380), (290,320), line_color='black', fill_color='brown')\r\n\r\n#inimene\r\njalg = minu_l\u00f5uend.DrawLine((40, 370), (50, 340), color=\"black\", width=2)\r\njalg2 = minu_l\u00f5uend.DrawLine((50, 340), (60, 370), color=\"black\", width=2)\r\nkeha = minu_l\u00f5uend.DrawLine((50, 340), (50, 320), color=\"black\", width=2)\r\npea = minu_l\u00f5uend.DrawOval((40, 300), (60, 320), fill_color=\"black\")\r\nk\u00e4ed = minu_l\u00f5uend.DrawLine((30, 330), (70, 330), color=\"black\", width=2)\r\n\r\nwhile True:\r\n    syndmus, v22rtused = aken.Read()\r\n    if syndmus == sg.WIN_CLOSED or syndmus == 'V\u00e4lju':\r\n        break\r\n                \r\naken.close()<\/pre>\r\nEkraanile kuvatakse selline graafikaaken:\r\n\r\n\"\"\r\n
Joonistamise lisafunktsioonid<\/h2>\r\nTutvume paari lihtsa lisafunktsiooniga, mida meie joonistatud kujunditega teha saaks. Muudame elementide v\u00e4rve ja muudame pilte interaktiivsemaks, lisades v\u00f5imaluse elemente liigutada.\r\n\r\n1) Elemendi v\u00e4rvi muutmine<\/strong>\r\n\r\nLisame eelmise maja joonistamise n\u00e4ite\u00fclesande juurde nupu, millele vajutades saab \u201ctoas tule p\u00f5lema panna\u201d ehk nupule vajutades muudetakse akende v\u00e4rv kollaseks. Teisele nupule vajutades saab \u201ctuled j\u00e4lle kustu panna\u201d.\r\n
paigutus = [[sg.Graph(\r\n            canvas_size =(400, 400),\r\n            graph_bottom_left=(0, 400),\r\n            graph_top_right=(400, 0),\r\n            key=\"l\u00f5uend\")],\r\n            [sg.Text('Lisavalikud:')],\r\n            [sg.Button('Tuled p\u00f5lema!'), sg.Button('Tuled kustu!')],\r\n            [sg.Cancel('V\u00e4lju')]]<\/pre>\r\nNupuvajutuse t\u00f6\u00f6lepanemiseks lisame koodi l\u00f5pus olevasse while<\/em>-ts\u00fcklisse tingimuse, et kui seda nuppu vajutatakse, muudetakse akende v\u00e4rvi.\r\n
if syndmus == 'Tuled p\u00f5lema!':\r\n        minu_l\u00f5uend.TKCanvas.itemconfig(maja_aken, fill = 'yellow')\r\nif syndmus == 'Tuled kustu!':\r\n        minu_l\u00f5uend.TKCanvas.itemconfig(maja_aken, fill = 'black')<\/pre>\r\nK\u00e4ivita programm ja proovi, kas nupuvajutused t\u00f6\u00f6tavad!\r\n\r\n2) Elemendi asukoha muutmine<\/strong>\r\n\r\nKui on soov teha pilti natukene interaktiivsemaks, siis saame lisada veel kaks nuppu, millele vajutades saab elemente liigutada:\r\n
paigutus = [[sg.Graph(\r\n            canvas_size =(400, 400),\r\n            graph_bottom_left=(0, 400),\r\n            graph_top_right=(400, 0),\r\n            key=\"l\u00f5uend\")],\r\n            [sg.Text('Lisavalikud:')],\r\n            [sg.Button('Muuda akna v\u00e4rvi')],\r\n            [sg.Button('Liiguta inimest paremale'), sg.Button('Liiguta inimest vasakule')],\r\n            [sg.Cancel('V\u00e4lju')]]<\/pre>\r\nLisame uued tingimused while<\/em>-ts\u00fcklisse. Inimese paremale liigutamise jaoks muudame kehaosade x-koordinaati 5 v\u00f5rra, vasakule liigutamise jaoks -5 v\u00f5rra. Kui tahaksime elementi liigutada \u00fcles-alla, peaksime muutma y-koordinaati; diagonaalis liigutamiseks aga m\u00f5lemat koordinaati.\r\n
if syndmus == 'Liiguta inimest paremale':\r\n        minu_l\u00f5uend.MoveFigure(jalg, 5,0)\r\n        minu_l\u00f5uend.MoveFigure(jalg2, 5,0)\r\n        minu_l\u00f5uend.MoveFigure(keha, 5,0)\r\n        minu_l\u00f5uend.MoveFigure(pea, 5,0)\r\n        minu_l\u00f5uend.MoveFigure(k\u00e4ed, 5,0)\r\nif syndmus == 'Liiguta inimest vasakule':\r\n        minu_l\u00f5uend.MoveFigure(jalg, -5,0)\r\n        minu_l\u00f5uend.MoveFigure(jalg2, -5,0)\r\n        minu_l\u00f5uend.MoveFigure(keha, -5,0)\r\n        minu_l\u00f5uend.MoveFigure(pea, -5,0)\r\n        minu_l\u00f5uend.MoveFigure(k\u00e4ed, -5,0)<\/pre>\r\nKatseta ja vaata, mis juhtub! P\u00fc\u00fca pildile veel lisada (liigutatavaid) objekte, n\u00e4iteks lisa veel juurde aknaid, korsten, katuse kaunistused, uksele aken (selle jaoks saad kasutada sg.DrawOval<\/strong><\/em>) jne. N\u00e4iteks v\u00f5iks l\u00f5pptulemus v\u00e4lja n\u00e4ha selline:\r\n\r\n\"\"","rendered":"
Sarnaselt tkinter-ile saab PySimpleGUI-s joonistada erinevaid kujundeid, m\u00e4\u00e4rata nende asukohta, suurust, v\u00e4rvi jne.<\/p>\n
Vaatame samm-sammult, kuidas luua programmi, mis kuvab ekraanile graafikaakna koos taustapildi ja maja kujutisega.<\/p>\n
Esmalt peame importima k\u00f5ik PySimpleGUI klassid ja funktsioonid, nagu juba teame.<\/p>\n
import PySimpleGUI as sg<\/pre>\n
Loome akna paigutuse. Sarnaselt tkinter-ile kasutame elementide paigutamise jaoks koordinaatteljestikku. Koordinaadid x ja y suurenevad vasakust nurgast selliselt:<\/p>\n
\"\"<\/p>\n
M\u00e4\u00e4rame sg.Graph()<\/strong><\/em>-i abil l\u00f5uendi suuruse, selle alumise vasaku nurga ning parema \u00fclemise nurga koordinaadid (x,y). Samuti lisame l\u00f5uendi alla veel \u00fche rea, kuhu paneme nupu, millele vajutades suletakse programm.<\/p>\n
PS! Pane t\u00e4hele, et SimpleGUI-s saab m\u00e4\u00e4rata ainult alumise vasaku ning \u00fclemise parema nurga! Seega, kuna meie tahame, et \u00fclemise vasaku nurga koordinaadid oleksid (x=0,y=0), peame hoolikalt j\u00e4lgima, missugused koordinaadid siin m\u00e4\u00e4rame:<\/p>\n
paigutus = [[sg.Graph(\r\n            canvas_size =(400, 400),\r\n            graph_bottom_left=(0, 400),\r\n            graph_top_right=(400, 0),\r\n            key=\"l\u00f5uend\")],\r\n            [sg.Cancel('V\u00e4lju')]]<\/pre>\n
N\u00fc\u00fcd loome graafikaakna ning ka muutuja minu_l\u00f5uend<\/code>, mille abil saame meie loodud l\u00f5uendi aknasse lisada.<\/p>\n
aken = sg.Window(\"Joonistame!\", paigutus)\r\naken.Finalize()\r\n\r\nminu_l\u00f5uend = aken.Element(\"l\u00f5uend\")<\/pre>\n
Sellesse muutujasse saame omakorda hakata lisama erinevaid elemente.<\/p>\n
Esmalt v\u00f5iksime l\u00f5uendile panna .png formaadis taustapildi, mis asub meie Pythoni failiga samas kaustas. Kuna tahame, et pilt kataks terve akna, m\u00e4\u00e4rame alguskohaks l\u00f5uendi \u00fclemise vasaku nurga koordinaadid (x=0, y=0).<\/p>\n
\"\"<\/p>\n
minu_l\u00f5uend.DrawImage(filename=\"minupilt.png\", location=(0, 0))<\/pre>\n
PS! Sellisel kujul saab graafikaaknas kuvada ainult .png formaadis pilte! Kui tahaksime kasutada n\u00e4iteks .jpg formaadis pilte, peaksime need enne kasutamist PIL mooduli abil .png formaati teisendama.<\/p>\n
Selle jaoks peame importima PIL moodulist Image<\/em> klassid ning seej\u00e4rel saame avada oma pildi ning selle .png formaati teisendada:<\/p>\n
from PIL import Image\r\nfail = Image.open('minupilt.jpg')\r\nfail = fail.save('minupilt.png')<\/pre>\n
N\u00fc\u00fcd saamegi anda selle pildifaili .DrawImage<\/strong><\/em> argumendiks:<\/p>\n
taustapilt = minu_l\u00f5uend.DrawImage(filename='minupilt.png', location=(0, 0))<\/pre>\n
On aeg hakata joonistama maja! Selle jaoks kasutame erinevaid kujundeid. Kujundite loomisel tuleb \u00e4ra m\u00e4\u00e4rata nende alguspunkt (x,y) ning l\u00f5pppunkt (x,y) ning samuti saame m\u00e4\u00e4rata ka kujundi joone v\u00e4rvi ning v\u00e4rvi, millega tahame kujundi t\u00e4ita.<\/p>\n
N\u00e4iteks, kui tahame luua \u00fche ristk\u00fcliku, peame esmalt paika panema selle alumise vasakpoolse tipu ning seej\u00e4rel \u00fclemise vasakpoolse tipu koordinaadid (seega diagonaalsed tipud):<\/p>\n
minu_l\u00f5uend.DrawRectangle((200,200), (350,380))<\/pre>\n
N\u00fc\u00fcd lisamegi l\u00f5uendile erinevaid kujundeid:<\/p>\n
#ristk\u00fclik\r\nmaja = minu_l\u00f5uend.DrawRectangle((200,200), (350,380), line_color='black', fill_color='darkgrey')\r\n\r\nkatus = minu_l\u00f5uend.DrawRectangle((180,200), (370,150), line_color='black', fill_color='darkgrey')\r\n\r\n#punkt - m\u00e4\u00e4rame punkti keskpunkti koordinaadid (275,250) ning suuruse (50)\r\nmaja_aken = minu_l\u00f5uend.DrawPoint((275, 250), 50, color='blue')\r\n\r\nuks = minu_l\u00f5uend.DrawRectangle((260, 380), (290,320), line_color='black', fill_color='brown')<\/pre>\n
Maja k\u00f5rvale v\u00f5iksime lisada ka n\u00e4iteks \u00fche inimese kriipsujuku n\u00e4ol.<\/p>\n
Selleks kasutame .DrawLine((x,y), (x,y))<\/strong><\/em>, kus esimesteks koordinaatideks on joone alguspunkt ning teisteks joone l\u00f5pppunkt. Joone paksust saab ka muuta, kasutades n\u00e4iteks width=2<\/em> saab joont paksemaks teha (vaikimisi on width<\/em> v\u00e4\u00e4rtuseks 1, mis on k\u00f5ige peenem joon).<\/p>\n
#inimene\r\njalg = minu_l\u00f5uend.DrawLine((40, 370), (50, 340), color=\"black\", width=2)\r\njalg2 = minu_l\u00f5uend.DrawLine((50, 340), (60, 370), color=\"black\", width=2)\r\nkeha = minu_l\u00f5uend.DrawLine((50, 340), (50, 320), color=\"black\", width=2)\r\npea = minu_l\u00f5uend.DrawOval((40, 300), (60, 320), fill_color=\"black\")\r\nk\u00e4ed = minu_l\u00f5uend.DrawLine((30, 330), (70, 330), color=\"black\", width=2)<\/pre>\n
Programmi l\u00f5ppu kirjutame juba tuttavad read:<\/p>\n
while True:\r\n    syndmus, v22rtused = aken.read()\r\n    if syndmus == sg.WIN_CLOSED or syndmus == 'V\u00e4lju':\r\n            break\r\naken.close()\r\n<\/pre>\n
Ja meie maja ongi valmis! Proovi n\u00fc\u00fcd ka ise siin koodis muuta n\u00e4iteks elementide suurust, v\u00e4rvi v\u00f5i asukohta.<\/p>\n
Kogu programm n\u00e4eb seega v\u00e4lja selline:<\/p>\n
import PySimpleGUI as sg\r\n\r\npaigutus = [\r\n    [sg.Graph(\r\n            canvas_size =(400, 400),\r\n            graph_bottom_left=(0, 400),\r\n            graph_top_right=(400, 0),\r\n            key=\"l\u00f5uend\")],\r\n            [sg.Cancel('V\u00e4lju')]]\r\n\r\naken = sg.Window(\"Joonistame!\", paigutus)\r\naken.Finalize()\r\nminu_l\u00f5uend = aken.Element(\"l\u00f5uend\")\r\n\r\ntaustapilt = minu_l\u00f5uend.DrawImage(filename=\"minupilt.png\", location=(0, 0))\r\n\r\nmaja = minu_l\u00f5uend.DrawRectangle((200,200), (350,380), line_color='black', fill_color='darkgrey')\r\n\r\nkatus = minu_l\u00f5uend.DrawRectangle((180,200), (370,150), line_color='black', fill_color='darkgrey')\r\n\r\nmaja_aken = minu_l\u00f5uend.DrawPoint((275, 250), 50, color='black')\r\n\r\nuks = minu_l\u00f5uend.DrawRectangle((260, 380), (290,320), line_color='black', fill_color='brown')\r\n\r\n#inimene\r\njalg = minu_l\u00f5uend.DrawLine((40, 370), (50, 340), color=\"black\", width=2)\r\njalg2 = minu_l\u00f5uend.DrawLine((50, 340), (60, 370), color=\"black\", width=2)\r\nkeha = minu_l\u00f5uend.DrawLine((50, 340), (50, 320), color=\"black\", width=2)\r\npea = minu_l\u00f5uend.DrawOval((40, 300), (60, 320), fill_color=\"black\")\r\nk\u00e4ed = minu_l\u00f5uend.DrawLine((30, 330), (70, 330), color=\"black\", width=2)\r\n\r\nwhile True:\r\n    syndmus, v22rtused = aken.Read()\r\n    if syndmus == sg.WIN_CLOSED or syndmus == 'V\u00e4lju':\r\n        break\r\n                \r\naken.close()<\/pre>\n
Ekraanile kuvatakse selline graafikaaken:<\/p>\n
\"\"<\/p>\n
Joonistamise lisafunktsioonid<\/h2>\n
Tutvume paari lihtsa lisafunktsiooniga, mida meie joonistatud kujunditega teha saaks. Muudame elementide v\u00e4rve ja muudame pilte interaktiivsemaks, lisades v\u00f5imaluse elemente liigutada.<\/p>\n
1) Elemendi v\u00e4rvi muutmine<\/strong><\/p>\n
Lisame eelmise maja joonistamise n\u00e4ite\u00fclesande juurde nupu, millele vajutades saab \u201ctoas tule p\u00f5lema panna\u201d ehk nupule vajutades muudetakse akende v\u00e4rv kollaseks. Teisele nupule vajutades saab \u201ctuled j\u00e4lle kustu panna\u201d.<\/p>\n
paigutus = [[sg.Graph(\r\n            canvas_size =(400, 400),\r\n            graph_bottom_left=(0, 400),\r\n            graph_top_right=(400, 0),\r\n            key=\"l\u00f5uend\")],\r\n            [sg.Text('Lisavalikud:')],\r\n            [sg.Button('Tuled p\u00f5lema!'), sg.Button('Tuled kustu!')],\r\n            [sg.Cancel('V\u00e4lju')]]<\/pre>\n
Nupuvajutuse t\u00f6\u00f6lepanemiseks lisame koodi l\u00f5pus olevasse while<\/em>-ts\u00fcklisse tingimuse, et kui seda nuppu vajutatakse, muudetakse akende v\u00e4rvi.<\/p>\n
if syndmus == 'Tuled p\u00f5lema!':\r\n        minu_l\u00f5uend.TKCanvas.itemconfig(maja_aken, fill = 'yellow')\r\nif syndmus == 'Tuled kustu!':\r\n        minu_l\u00f5uend.TKCanvas.itemconfig(maja_aken, fill = 'black')<\/pre>\n
K\u00e4ivita programm ja proovi, kas nupuvajutused t\u00f6\u00f6tavad!<\/p>\n
2) Elemendi asukoha muutmine<\/strong><\/p>\n
Kui on soov teha pilti natukene interaktiivsemaks, siis saame lisada veel kaks nuppu, millele vajutades saab elemente liigutada:<\/p>\n
paigutus = [[sg.Graph(\r\n            canvas_size =(400, 400),\r\n            graph_bottom_left=(0, 400),\r\n            graph_top_right=(400, 0),\r\n            key=\"l\u00f5uend\")],\r\n            [sg.Text('Lisavalikud:')],\r\n            [sg.Button('Muuda akna v\u00e4rvi')],\r\n            [sg.Button('Liiguta inimest paremale'), sg.Button('Liiguta inimest vasakule')],\r\n            [sg.Cancel('V\u00e4lju')]]<\/pre>\n
Lisame uued tingimused while<\/em>-ts\u00fcklisse. Inimese paremale liigutamise jaoks muudame kehaosade x-koordinaati 5 v\u00f5rra, vasakule liigutamise jaoks -5 v\u00f5rra. Kui tahaksime elementi liigutada \u00fcles-alla, peaksime muutma y-koordinaati; diagonaalis liigutamiseks aga m\u00f5lemat koordinaati.<\/p>\n
if syndmus == 'Liiguta inimest paremale':\r\n        minu_l\u00f5uend.MoveFigure(jalg, 5,0)\r\n        minu_l\u00f5uend.MoveFigure(jalg2, 5,0)\r\n        minu_l\u00f5uend.MoveFigure(keha, 5,0)\r\n        minu_l\u00f5uend.MoveFigure(pea, 5,0)\r\n        minu_l\u00f5uend.MoveFigure(k\u00e4ed, 5,0)\r\nif syndmus == 'Liiguta inimest vasakule':\r\n        minu_l\u00f5uend.MoveFigure(jalg, -5,0)\r\n        minu_l\u00f5uend.MoveFigure(jalg2, -5,0)\r\n        minu_l\u00f5uend.MoveFigure(keha, -5,0)\r\n        minu_l\u00f5uend.MoveFigure(pea, -5,0)\r\n        minu_l\u00f5uend.MoveFigure(k\u00e4ed, -5,0)<\/pre>\n
Katseta ja vaata, mis juhtub! P\u00fc\u00fca pildile veel lisada (liigutatavaid) objekte, n\u00e4iteks lisa veel juurde aknaid, korsten, katuse kaunistused, uksele aken (selle jaoks saad kasutada sg.DrawOval<\/strong><\/em>) jne. N\u00e4iteks v\u00f5iks l\u00f5pptulemus v\u00e4lja n\u00e4ha selline:<\/p>\n
\"\"<\/p>\n","protected":false},"author":17,"menu_order":5,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-113","chapter","type-chapter","status-publish","hentry"],"part":102,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/113","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters"}],"about":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/types\/chapter"}],"author":[{"embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/users\/17"}],"version-history":[{"count":3,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/113\/revisions"}],"predecessor-version":[{"id":603,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/113\/revisions\/603"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/parts\/102"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/113\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/media?parent=113"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapter-type?post=113"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/contributor?post=113"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/license?post=113"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}