{"id":119,"date":"2020-11-03T09:33:31","date_gmt":"2020-11-03T09:33:31","guid":{"rendered":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/?post_type=chapter&#038;p=119"},"modified":"2024-01-13T20:39:04","modified_gmt":"2024-01-13T20:39:04","slug":"kasutajaliidese-planeerimine","status":"publish","type":"chapter","link":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/chapter\/kasutajaliidese-planeerimine\/","title":{"raw":"Tkinteri kasutajaliidese planeerimine","rendered":"Tkinteri kasutajaliidese planeerimine"},"content":{"raw":"<h1>Kasutajaliidese planeerimine<\/h1>\r\n<img class=\"alignnone size-full wp-image-470\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_1.png\" alt=\"\" width=\"411\" height=\"207\" \/>\r\n\r\nElemente sellele kasutajaliidesele saab paigutada nii meetodiga place() kui ka grid(). J\u00e4rgnevalt vaatamegi m\u00f5lemat varianti.\r\n<h1>Kasutajaliidese disainimine paigutusmeetodiga <strong>place<\/strong><\/h1>\r\n<ul>\r\n \t<li>Funktsioon ttk.Entry loob \u00fche <strong>tekstisisestuskasti<\/strong> (vidina teksti sisestamiseks): <img class=\"alignnone size-full wp-image-471\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_2.png\" alt=\"\" width=\"77\" height=\"29\" \/><\/li>\r\n<\/ul>\r\nFunktsiooni esimese argumendiga n\u00e4itame, et me soovime seda silti kasutada loodud raamis. K\u00e4sk place(...) paigutab loodud tekstisisestuskasti soovitud koordinaatidele (\u00fchikuteks on pikslid, punkt (0,0) paikneb akna sisuosa \u00fclemises vasakus nurgas ning koordinaadid kasvavad paremale\/alla liikudes).\r\n\r\n<img class=\"alignnone size-full wp-image-472\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_3.png\" alt=\"\" width=\"248\" height=\"204\" \/>\r\n\r\nJoonis 1. Koordinaadid aknas\r\n<ul>\r\n \t<li>J\u00e4rgmises plokis loome ja seame paika <strong>tekstisildid<\/strong> (ttk.Label), mis on vidiad teksti n\u00e4itamiseks. Nende paigutamisel n\u00e4itame \u00e4ra ka soovitud laiuse. Sarnaselt tekstisisestuskastile kasutatakse ka siin vidinate koordinaatidega raami asetamist.<\/li>\r\n \t<li>Kolmanda komponendina lisatakse koordinaatide abiga ekraanile ka <strong>nupp<\/strong> (ttk.Button), millel kuvatakse ka tekst \u201cArvuta!\u201d.<\/li>\r\n<\/ul>\r\nLisaks on programmis read, mis olid juba eelmise osa n\u00e4idetes ja on \u00fcldjuhul olemas igas Tkinteri programmis. Programmi sisuline olemus s\u00f5ltub sellest, milliseid vidinaid aknasse paigutatakse ning kuidas kasutaja tegevustele reageeritakse. V\u00f5imalike vidinate valimiseks v\u00f5id uurida lehek\u00fclge aadressil <a href=\"http:\/\/www.tkdocs.com\/tutorial\/widgets.html\">http:\/\/www.tkdocs.com\/tutorial\/widgets.html<\/a>.\r\n\r\nProgrammi n\u00e4ide kasutades paigutusmeetodit place n\u00e4eks v\u00e4lja selline:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">from tkinter import *\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # tkinteri p\u00f5hivahendid\r\nfrom tkinter import ttk\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # platvormi \u00fchise stiili saamiseks\r\nraam = Tk()\r\nraam.title(\"Meetrite teisendamine\")\r\nraam.geometry(\"300x150\")\r\n\r\ntekstikast = ttk.Entry(raam, width = 7)\r\ntekstikast.place(x = 100, y = 0)\r\n\r\ntekstisilt1 = ttk.Label(raam)\r\ntekstisilt1.place(x = 200, y = 50)\r\nnupp = ttk.Button(raam, text=\"Arvuta!\")\r\nnupp.place(x = 200, y = 100)\r\n\r\ntekstisilt2 = ttk.Label(raam, text=\"meetrit\")\r\ntekstisilt2.place(x = 200, y = 0)\r\ntekstisilt3 = ttk.Label(raam, text=\"on v\u00f5rdne\")\r\ntekstisilt3.place(x = 0, y = 50)\r\ntekstisilt4 = ttk.Label(raam, text=\"kilomeetriga.\")\r\ntekstisilt4.place(x = 200, y = 50)\r\n\r\nraam.mainloop()\r\n<\/pre>\r\nTulemus peaks olema selline:\r\n\r\n<img class=\"alignnone size-full wp-image-473\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_4.png\" alt=\"\" width=\"308\" height=\"197\" \/>\r\n\r\n<strong>PS!<\/strong> Selles programmis pole nupu funktsionaalsust veel programmeeritud! Nupule funktsionaalsuse lisamist ja kasutajaliidese v\u00e4ljan\u00e4gemise kohendamist vaatame j\u00e4rgmises osas.\r\n<h2>Pildi lisamine<\/h2>\r\nPildi lisamiseks kasutajaliidesesse saab kasutada PIL moodulit (Thonnys Tools -&gt; Manage Packages... -&gt; Otsida \"pillow\") ja lisada programmi algusesse mooduli importimine:\r\n<pre>from PIL import Image, ImageTk<\/pre>\r\nPildi smiley.png programmi lugemine:\r\n<pre>pilt = Image.open(\"smiley.png\").resize((300,205))\r\npilt = ImageTk.PhotoImage(pilt)<\/pre>\r\nSellisel juhul saame kasutajaliidesesse pildisildi lisada nagu tavalise sildi:\r\n<pre>pildisilt = ttk.Label(image=pilt)\r\npildisilt.place(x=10, y=120)\r\n\r\n<\/pre>\r\nKogu programm p\u00e4rast pildi lisamist oleks siis selline:\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">from tkinter import *\r\nfrom tkinter import ttk\r\nfrom PIL import Image, ImageTk\r\n\r\nraam = Tk()\r\nraam.title(\"Meetrite teisendamine\")\r\nraam.geometry(\"300x150\")\r\n\r\ntekstikast = ttk.Entry(raam, width = 7)\r\ntekstikast.place(x = 100, y = 0)\r\ntekstisilt1 = ttk.Label(raam)'\r\ntekstisilt1.place(x = 200, y = 50)\r\nnupp = ttk.Button(raam, text=\"Arvuta!\")\r\nnupp.place(x = 200, y = 100)\r\ntekstisilt2 = tk.Label(raam, text=\"meetrit\")\r\ntekstisilt2.place(x = 200, y = 0)\r\ntekstisilt3 = ttk.Label(raam, text=\"on v\u00f5rdne\")\r\ntekstisilt3.place(x = 0, y = 50)\r\ntekstisilt3 = ttk.Label(raam, text=\"kilomeetriga.\")\r\ntekstisilt3.place(x = 200, y = 50)\r\n\r\npilt = Image.open(\"smiley.png\").resize((250,200))\r\npilt = ImageTk.PhotoImage(pilt)\r\npildisilt = ttk.Label(image=pilt)\r\npildisilt.place(x=30, y=150)\r\n\r\nraam.mainloop()<\/pre>\r\n<h1>Kasutajaliidese disainimine paigutusmeetodiga grid<\/h1>\r\nEelmist n\u00e4iteprogrammi k\u00e4ivitades ei pruugi olla k\u00f5ige mugavam vidinaid paigutada koordinaatide abil sest paigutuse muutmiseks tuleb pidevalt arvutada etteantud koordinaate ja komponentide m\u00f5\u00f5tmeid. Lisaks sellele on pikselhaaval timmimine t\u00e4namatu t\u00f6\u00f6, kuna m\u00f5nes teises operatsioonis\u00fcsteemis (v\u00f5i teistsuguste seadetega arvutis) ei pruugi paigutus samasugune v\u00e4lja n\u00e4ha.\r\n\r\nVidinate paigutust on v\u00f5imalik muuta \u00fcldisemalt kui pikslite tasemel, lubades Tkinteril valida vastavalt olukorrale k\u00f5ige parema konkreetse paigutuse. J\u00e4rgnevas programmis on vidinate paigutamiseks kasutatud meetodi place asemel meetodit <strong>grid<\/strong>, mis jagab kasutajaliidese m\u00f5tteliselt ruudustikuks ning paigutab iga vidina soovitud lahtrisse vastavalt argumentidele column ja row.\r\n\r\nSelleks tuleks planeerida kasutajaliidese disain kasutades nn ruudustikulist disaini, kus elemendid paigutuksid ruudustikku j\u00e4rgnevalt:\r\n\r\n<img class=\"alignnone size-full wp-image-474\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_5.png\" alt=\"\" width=\"411\" height=\"207\" \/>\r\n\r\nPane t\u00e4hele, et:\r\n<ul>\r\n \t<li><strong>esimesel real<\/strong> on tekstisisestuskast (2. veerus) ja tekstisilt (3. veerus),<\/li>\r\n \t<li><strong>teisel real<\/strong> on kolm tekstisilti (1., 2. ja 3. veerus) ja<\/li>\r\n \t<li><strong>kolmandal real<\/strong> on nupp (3. veerus)<\/li>\r\n<\/ul>\r\nSelle programmi n\u00e4ide kasutades grid paigutusmeetodit n\u00e4eks v\u00e4lja selline\r\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">from tkinter import *\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # tkinteri p\u00f5hivahendid\r\nfrom tkinter import ttk\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # platvormi \u00fchise stiili saamiseks\r\nraam = Tk()\r\nraam.title(\"Meetrite teisendamine\")\r\n\r\ntekstikast = ttk.Entry(raam, width=7)\r\ntekstikast.grid(column=2, row=1)\r\n\r\ntekstisilt1 = ttk.Label(raam)\r\ntekstisilt1.grid(column=2, row=2)\r\nnupp = ttk.Button(raam, text=\"Arvuta!\")\r\nnupp.grid(column=3, row=3)\r\n\r\ntekstisilt2 = ttk.Label(raam, text=\"meetrit\")\r\ntekstisilt2.grid(column=3, row=1)\r\ntekstisilt3 = ttk.Label(raam, text=\"on v\u00f5rdne\")\r\ntekstisilt3.grid(column=1, row=2)\r\ntekstisilt4 = ttk.Label(raam, text=\"kilomeetriga.\")\r\ntekstisilt4.grid(column=3, row=2)\r\n\r\nraam.mainloop()\r\n<\/pre>\r\nTulemus peaks olema selline:\r\n\r\n<img class=\"alignnone size-full wp-image-475\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_6.png\" alt=\"\" width=\"217\" height=\"107\" \/>\r\n\r\n<strong>PS!<\/strong> Selles programmis pole nupu funktsionaalsust veel programmeeritud! Nupule funktsionaalsuse lisamist ja kasutajaliidese v\u00e4ljan\u00e4gemise kohendamist vaatame j\u00e4rgmises osas.\r\n\r\nLisaks meetoditele place ja grid v\u00f5ib kohata veel paigutusmeetodit pack. Rohkem infot saab siit: <a href=\"http:\/\/www.tkdocs.com\/tutorial\/concepts.html#geometry\">http:\/\/www.tkdocs.com\/tutorial\/concepts.html#geometry<\/a>.","rendered":"<h1>Kasutajaliidese planeerimine<\/h1>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-470\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_1.png\" alt=\"\" width=\"411\" height=\"207\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_1.png 411w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_1-300x151.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_1-65x33.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_1-225x113.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_1-350x176.png 350w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/p>\n<p>Elemente sellele kasutajaliidesele saab paigutada nii meetodiga place() kui ka grid(). J\u00e4rgnevalt vaatamegi m\u00f5lemat varianti.<\/p>\n<h1>Kasutajaliidese disainimine paigutusmeetodiga <strong>place<\/strong><\/h1>\n<ul>\n<li>Funktsioon ttk.Entry loob \u00fche <strong>tekstisisestuskasti<\/strong> (vidina teksti sisestamiseks): <img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-471\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_2.png\" alt=\"\" width=\"77\" height=\"29\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_2.png 77w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_2-65x24.png 65w\" sizes=\"auto, (max-width: 77px) 100vw, 77px\" \/><\/li>\n<\/ul>\n<p>Funktsiooni esimese argumendiga n\u00e4itame, et me soovime seda silti kasutada loodud raamis. K\u00e4sk place(&#8230;) paigutab loodud tekstisisestuskasti soovitud koordinaatidele (\u00fchikuteks on pikslid, punkt (0,0) paikneb akna sisuosa \u00fclemises vasakus nurgas ning koordinaadid kasvavad paremale\/alla liikudes).<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-472\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_3.png\" alt=\"\" width=\"248\" height=\"204\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_3.png 248w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_3-65x53.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_3-225x185.png 225w\" sizes=\"auto, (max-width: 248px) 100vw, 248px\" \/><\/p>\n<p>Joonis 1. Koordinaadid aknas<\/p>\n<ul>\n<li>J\u00e4rgmises plokis loome ja seame paika <strong>tekstisildid<\/strong> (ttk.Label), mis on vidiad teksti n\u00e4itamiseks. Nende paigutamisel n\u00e4itame \u00e4ra ka soovitud laiuse. Sarnaselt tekstisisestuskastile kasutatakse ka siin vidinate koordinaatidega raami asetamist.<\/li>\n<li>Kolmanda komponendina lisatakse koordinaatide abiga ekraanile ka <strong>nupp<\/strong> (ttk.Button), millel kuvatakse ka tekst \u201cArvuta!\u201d.<\/li>\n<\/ul>\n<p>Lisaks on programmis read, mis olid juba eelmise osa n\u00e4idetes ja on \u00fcldjuhul olemas igas Tkinteri programmis. Programmi sisuline olemus s\u00f5ltub sellest, milliseid vidinaid aknasse paigutatakse ning kuidas kasutaja tegevustele reageeritakse. V\u00f5imalike vidinate valimiseks v\u00f5id uurida lehek\u00fclge aadressil <a href=\"http:\/\/www.tkdocs.com\/tutorial\/widgets.html\">http:\/\/www.tkdocs.com\/tutorial\/widgets.html<\/a>.<\/p>\n<p>Programmi n\u00e4ide kasutades paigutusmeetodit place n\u00e4eks v\u00e4lja selline:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">from tkinter import *\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # tkinteri p\u00f5hivahendid\r\nfrom tkinter import ttk\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # platvormi \u00fchise stiili saamiseks\r\nraam = Tk()\r\nraam.title(\"Meetrite teisendamine\")\r\nraam.geometry(\"300x150\")\r\n\r\ntekstikast = ttk.Entry(raam, width = 7)\r\ntekstikast.place(x = 100, y = 0)\r\n\r\ntekstisilt1 = ttk.Label(raam)\r\ntekstisilt1.place(x = 200, y = 50)\r\nnupp = ttk.Button(raam, text=\"Arvuta!\")\r\nnupp.place(x = 200, y = 100)\r\n\r\ntekstisilt2 = ttk.Label(raam, text=\"meetrit\")\r\ntekstisilt2.place(x = 200, y = 0)\r\ntekstisilt3 = ttk.Label(raam, text=\"on v\u00f5rdne\")\r\ntekstisilt3.place(x = 0, y = 50)\r\ntekstisilt4 = ttk.Label(raam, text=\"kilomeetriga.\")\r\ntekstisilt4.place(x = 200, y = 50)\r\n\r\nraam.mainloop()\r\n<\/pre>\n<p>Tulemus peaks olema selline:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-473\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_4.png\" alt=\"\" width=\"308\" height=\"197\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_4.png 308w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_4-300x192.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_4-65x42.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_4-225x144.png 225w\" sizes=\"auto, (max-width: 308px) 100vw, 308px\" \/><\/p>\n<p><strong>PS!<\/strong> Selles programmis pole nupu funktsionaalsust veel programmeeritud! Nupule funktsionaalsuse lisamist ja kasutajaliidese v\u00e4ljan\u00e4gemise kohendamist vaatame j\u00e4rgmises osas.<\/p>\n<h2>Pildi lisamine<\/h2>\n<p>Pildi lisamiseks kasutajaliidesesse saab kasutada PIL moodulit (Thonnys Tools -&gt; Manage Packages&#8230; -&gt; Otsida &#8220;pillow&#8221;) ja lisada programmi algusesse mooduli importimine:<\/p>\n<pre>from PIL import Image, ImageTk<\/pre>\n<p>Pildi smiley.png programmi lugemine:<\/p>\n<pre>pilt = Image.open(\"smiley.png\").resize((300,205))\r\npilt = ImageTk.PhotoImage(pilt)<\/pre>\n<p>Sellisel juhul saame kasutajaliidesesse pildisildi lisada nagu tavalise sildi:<\/p>\n<pre>pildisilt = ttk.Label(image=pilt)\r\npildisilt.place(x=10, y=120)\r\n\r\n<\/pre>\n<p>Kogu programm p\u00e4rast pildi lisamist oleks siis selline:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">from tkinter import *\r\nfrom tkinter import ttk\r\nfrom PIL import Image, ImageTk\r\n\r\nraam = Tk()\r\nraam.title(\"Meetrite teisendamine\")\r\nraam.geometry(\"300x150\")\r\n\r\ntekstikast = ttk.Entry(raam, width = 7)\r\ntekstikast.place(x = 100, y = 0)\r\ntekstisilt1 = ttk.Label(raam)'\r\ntekstisilt1.place(x = 200, y = 50)\r\nnupp = ttk.Button(raam, text=\"Arvuta!\")\r\nnupp.place(x = 200, y = 100)\r\ntekstisilt2 = tk.Label(raam, text=\"meetrit\")\r\ntekstisilt2.place(x = 200, y = 0)\r\ntekstisilt3 = ttk.Label(raam, text=\"on v\u00f5rdne\")\r\ntekstisilt3.place(x = 0, y = 50)\r\ntekstisilt3 = ttk.Label(raam, text=\"kilomeetriga.\")\r\ntekstisilt3.place(x = 200, y = 50)\r\n\r\npilt = Image.open(\"smiley.png\").resize((250,200))\r\npilt = ImageTk.PhotoImage(pilt)\r\npildisilt = ttk.Label(image=pilt)\r\npildisilt.place(x=30, y=150)\r\n\r\nraam.mainloop()<\/pre>\n<h1>Kasutajaliidese disainimine paigutusmeetodiga grid<\/h1>\n<p>Eelmist n\u00e4iteprogrammi k\u00e4ivitades ei pruugi olla k\u00f5ige mugavam vidinaid paigutada koordinaatide abil sest paigutuse muutmiseks tuleb pidevalt arvutada etteantud koordinaate ja komponentide m\u00f5\u00f5tmeid. Lisaks sellele on pikselhaaval timmimine t\u00e4namatu t\u00f6\u00f6, kuna m\u00f5nes teises operatsioonis\u00fcsteemis (v\u00f5i teistsuguste seadetega arvutis) ei pruugi paigutus samasugune v\u00e4lja n\u00e4ha.<\/p>\n<p>Vidinate paigutust on v\u00f5imalik muuta \u00fcldisemalt kui pikslite tasemel, lubades Tkinteril valida vastavalt olukorrale k\u00f5ige parema konkreetse paigutuse. J\u00e4rgnevas programmis on vidinate paigutamiseks kasutatud meetodi place asemel meetodit <strong>grid<\/strong>, mis jagab kasutajaliidese m\u00f5tteliselt ruudustikuks ning paigutab iga vidina soovitud lahtrisse vastavalt argumentidele column ja row.<\/p>\n<p>Selleks tuleks planeerida kasutajaliidese disain kasutades nn ruudustikulist disaini, kus elemendid paigutuksid ruudustikku j\u00e4rgnevalt:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-474\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_5.png\" alt=\"\" width=\"411\" height=\"207\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_5.png 411w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_5-300x151.png 300w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_5-65x33.png 65w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_5-225x113.png 225w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_5-350x176.png 350w\" sizes=\"auto, (max-width: 411px) 100vw, 411px\" \/><\/p>\n<p>Pane t\u00e4hele, et:<\/p>\n<ul>\n<li><strong>esimesel real<\/strong> on tekstisisestuskast (2. veerus) ja tekstisilt (3. veerus),<\/li>\n<li><strong>teisel real<\/strong> on kolm tekstisilti (1., 2. ja 3. veerus) ja<\/li>\n<li><strong>kolmandal real<\/strong> on nupp (3. veerus)<\/li>\n<\/ul>\n<p>Selle programmi n\u00e4ide kasutades grid paigutusmeetodit n\u00e4eks v\u00e4lja selline<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"python\">from tkinter import *\u00a0 \u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # tkinteri p\u00f5hivahendid\r\nfrom tkinter import ttk\u00a0 \u00a0 \u00a0 \u00a0\u00a0\u00a0 # platvormi \u00fchise stiili saamiseks\r\nraam = Tk()\r\nraam.title(\"Meetrite teisendamine\")\r\n\r\ntekstikast = ttk.Entry(raam, width=7)\r\ntekstikast.grid(column=2, row=1)\r\n\r\ntekstisilt1 = ttk.Label(raam)\r\ntekstisilt1.grid(column=2, row=2)\r\nnupp = ttk.Button(raam, text=\"Arvuta!\")\r\nnupp.grid(column=3, row=3)\r\n\r\ntekstisilt2 = ttk.Label(raam, text=\"meetrit\")\r\ntekstisilt2.grid(column=3, row=1)\r\ntekstisilt3 = ttk.Label(raam, text=\"on v\u00f5rdne\")\r\ntekstisilt3.grid(column=1, row=2)\r\ntekstisilt4 = ttk.Label(raam, text=\"kilomeetriga.\")\r\ntekstisilt4.grid(column=3, row=2)\r\n\r\nraam.mainloop()\r\n<\/pre>\n<p>Tulemus peaks olema selline:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-475\" src=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_6.png\" alt=\"\" width=\"217\" height=\"107\" srcset=\"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_6.png 217w, https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-content\/uploads\/sites\/18\/2020\/11\/2_6-65x32.png 65w\" sizes=\"auto, (max-width: 217px) 100vw, 217px\" \/><\/p>\n<p><strong>PS!<\/strong> Selles programmis pole nupu funktsionaalsust veel programmeeritud! Nupule funktsionaalsuse lisamist ja kasutajaliidese v\u00e4ljan\u00e4gemise kohendamist vaatame j\u00e4rgmises osas.<\/p>\n<p>Lisaks meetoditele place ja grid v\u00f5ib kohata veel paigutusmeetodit pack. Rohkem infot saab siit: <a href=\"http:\/\/www.tkdocs.com\/tutorial\/concepts.html#geometry\">http:\/\/www.tkdocs.com\/tutorial\/concepts.html#geometry<\/a>.<\/p>\n","protected":false},"author":17,"menu_order":7,"template":"","meta":{"pb_show_title":"on","pb_short_title":"","pb_subtitle":"","pb_authors":[],"pb_section_license":""},"chapter-type":[],"contributor":[],"license":[],"class_list":["post-119","chapter","type-chapter","status-publish","hentry"],"part":451,"_links":{"self":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/119","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":12,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/119\/revisions"}],"predecessor-version":[{"id":1042,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/119\/revisions\/1042"}],"part":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/parts\/451"}],"metadata":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapters\/119\/metadata\/"}],"wp:attachment":[{"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/media?parent=119"}],"wp:term":[{"taxonomy":"chapter-type","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/pressbooks\/v2\/chapter-type?post=119"},{"taxonomy":"contributor","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/contributor?post=119"},{"taxonomy":"license","embeddable":true,"href":"https:\/\/web.htk.tlu.ee\/digitaru\/tarkvara2\/wp-json\/wp\/v2\/license?post=119"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}