برنامه نویسی GUI در پایتون (مخصوص رزبری پای)
یکی از کاربردهای مهم و جذاب زبان های برنامه نیوسی، کار از طریق GUI ها هستش.
حالا GUI چیه ؟ همون رابط گرافیکی بین کاربر و برنامه. به جای اینکه کاربر بیاد با دستور و کد دادن یک سری کارهارو بکنه، از طریق رابط گرافیکی می تونه خیلی ساده تر اطلاعات خودش رو به برنامه وارد بکنه
در ابتدا دستورات زیر رو در ترمینال اجرا کنید.
در ادامه از توابع guizero برای ایجاد رابط گرافیکی استفاده خواهیم کرد، در نتیجه اگر به اینترنت وصل نیستید تا کتابخونه های guizero رو نصب کنید، و یا اینکه حالا به هر علتی نتونستید guizero رو نصب کنید، نمی تونید این آموزش رو ادامه بدید.
IDLE 3 رو باز کنید و یک پروژه ایجاد کنید.
دستورات زیر رو وارد کنید.
برنامه رو اجرا کنید، در صورت درست بودن، با همچنین تصویری روبرو میشید.
تبریک میگم! اولین رابط گرافیکی خودتون رو اجرا کردید
خوب، حالا می خوایم یک سری امکانات دیگه رو هم اضافه کنیم، امکاناتی مثل باکس، منو، نوشته و ... ( که به همگی اونها ویجت میگند)
برای اضافه کردن هر ویجت، باید در اول برنامه باید اون رو فراخوانی کنید. مثلا، می خواین یک نوشته اضافه بکنید، باید مثل دستور زیر، ویجت مورد نظرتون رو اول برنامه فراخوانی بکنید.
یکبار فراخوانی ویجت در ابتدای برنامه کافیه و بعد از اون هرچندبار که بخواین می تونید از اون استفاده بکنید.
تمامی کدهای مربوط به ویجت ها باید قبل از رویداد نوشته بشند.یعنی دقیقا بعد از خط مربوط به ایجاد ویجت و قبل از app.display ()
همانند شکل زیر
دلیل این کار اینه که اون حلقه هربارد داره انجام میشه و منتظر وارد کردن اطلاعات از طرف کاربر می مونه، اگر شما بعد یا قبل از اون اطلاعات مربوط به GUI رو وارد کنید، چون خارج از حلقه هستش، برنامه درست اجرا نمیشه !
در ادامه چند ویجت دیگه رو هم با هم اجرا می کنیم
ویجت نوشته (Text widget)
یکی از ساده ترین ویجت ها که توسط اون می تونید متن رو داخل رابط گرافیکیتون وارد کنید.
برای فراخوانی اون دستور زیر رو وارد کنید:
و برای استفاده از اون، کد زیر رو وارد کنید.
در اینجا ما یک ویجت متن با نام welcome_message ایجاد کردیم.
اگر برنامه رو اجرا کنید، خروجی شما باید همچین چیزی باشه
همچنین ما می تونیم، مشخصات متن رو تغییر بدیم. با اضافه کردن دستورات مورد نیاز
کد زیر
همونطور که میبینید، می تونیم رنگ و سایز و فونت نوشته رو تغییر بدیم.
ویجت باکس نوشته (TextBox)
ویجت TextBox همان کاری رو می کنه که در حالت عادی در برنامه input رو اجرا می کنید. برای وارد کردن اطلاعات توسط کاربر.
در ابتدا TextBox رو فراخوانی می کنیم و در ادامه از توابع اون استفاده می کنیم.
کد های زیر رو وارد کنید:
اگر برنامه را اجرا کنید، تصویر زیر برای شما نشان داده میشود، به همراه یک باکس نوشته کوچک.
ویجت دکمه (PushButton)
ویجت PushButton برای شما یک دکمه ایجاد می کنه که وقتی روی اون کلیک کنید، یک برنامه براتون اجرا میشه.
بهتر است قبل از کد برنامه GUI ( بهترین جا ابتدای برنامه بعد از فراخوانی کتابخانه ها) تابعی که قرار است اجرا کنید را بنویسید.
این تابع مربوط به ویجت متن (welcome_message) بوده و مقداری که در باکس نوشته TextBox باشد را برای شما برمیگرداند.
شما می توانید از توابع get () و set () و بسیاری دستورات دیگر برای دریافت اطلاعات از وجت ها استفاده بکنید.
تابع PushButton را فراخوانی کنیم و سپس برنامه مربوط به PushButton را وارد می کنیم.
در ابتدا GUI مربوط به کلید را فراخوانی می کنیم، با دو آرگمان بعدی، تابعی که قرار است اجرا شود و متن داخل PushButton را وارد می کنیم.
در صورت اجرای برنامه، باید تصویر زیر را مشاهده کنید:
شما یک رابط گرافیکی ساده طراحی کردید. در این برنامه شما با فشردن کلید، یک برنامه را اجرا می کنید، این برنامه می تواند هر چیزی باشد، حتی تغییرات گرافیکی در این پنجره. هر نوع عملیات که در تابع نوشته شده باشد، سریعا بعد از فشردن دکمه اجرا می شود.
ویجت اسلایدر (Slider)
در این ویجت کاربر می تواند مقدار از قبل تعیین شده را انتخاب کند.
قبل از نوشتن توابع اسلایدر، تابع مربوط به آن را بنویسید.
پارامتر اصلی آن slider_value می باشد. با انتخاب هر یک از مقادیر اسلایدر، مقدار مورد نظر بصورت مستقیم وار تابع می شود. در این برنامه، ما مقدار سایز فونت را از طریق این تابع تغییر می دهیم.
ویجت Slider را به برنامه خود اضافه کنید و سپس برنامه زیر را وارد کنید.
در این برنامه، ما با انتخاب بیشترین و کمترین مقدار اسلایدر، بیشترین و کمترین حد را برای برنامه مشخص کردیم تا فونت خیلی بزرگ یا خیلی کوچک نشود.
برنامه را اجرا کنید.
ویجت عکس (Picture)
توسط این ویجت، می توانیم یک عکس را در برنامه خود لود کنیم.
ابتدا ویجت Picture را فراخوانی می کنیم، سپس کدزیر را وارد کنید.
توجه داشته باشید که فایل عکس در کنار فایل برنامه شما باشد.
برنامه را اجرا کنید.
شما هم اکنون یک برنامه GUI ساده طراحی کردید، کد برنامه کامل شما:
برای ادامه کار با مابقی ویجت ها، یک برنامه جدید ایجاد کنید.
خط زیر را برای اضافه نمودن کلاس APP وارد کنید
حالا کد های زر رو وارد کنید.
ایندفعه تعدادی از آرگومان های صفحه جدید رو از قبیل اندازه و طرحش رو مشخص کردیم.
ویجت کمبو (Combo)
این ویجت به شما اجازه میده تا تعدادی از مقادری رو از طریق یک کلید کشویی انتخاب کنید.
ویجت Combo رو به برنامتون اضافه کنید و کد زیر رو در برنامتون وارد کنید.
در ابتدا ویجت کمبو را با پارمترهای اصلی فراخوانی کردیم.
در قسمت options لیستی از مقادیری که می خواهیم در منوی کشویی قرار بگیره رو میزاریم
طرح صفحه رو بصورت layout=grid انتخاب کردیم. یعنی یک شبکه از نقطه 0:0 اون بالاترین قسمت دستت چپ هستش. شما زا این طریق می تونید جای هر ویجت رو مشخص کنید.
شما می توانید یک متن را برای بهتر شدن برنامه خودتان به منوی کشویی اضافه کنید. کد زیر را وارد کنید تا یک متن در مقابل منوی کشویی نشان داده شود.
film_description = Text(app, text="Which film?", grid=[0,0], align="left")
برنامه خود را اجرا کنید:
ویجت اخبار (CheckBox)
شما با تیک زدن ویجت چک باکس، می توانید درست یا غلط بودن (true or false) را دریافت کنید.
ویجت CheckBox را به برنامتون اضافه کنید، کد زیر رو وارد کنید.
همانطور که میبینید، با انتخاب مکان grid=[1,1] این ویجت را در زیر ویجت قبلی قرار دادیم
برنامه را اجرا کنید:
ویجت ButtonGroup
توسط این ویجت می توانید تعدادی گزینه را فعال و یا غیرفعال کنید.
ویجت ButtonGroup را به برنامه خود اضافه کرده و کد زیر را وارد کنید.
در ادامه ببینیم این کد از چه اجزایی تشکیل شده:
App : فرمان اصلی که نشوندهنده مقدار اصلی تابع هستش و بقیه مقادیر زیرمجموعه اون هستند.
Options: حاوی لیستی از دکمه ها، مقادیری که نمایش داده میشند و مقادیری نامریی که رمبوط به اونها هستند رو در خودش داره
Selected: انتخاب پیش فرض
Horizontal: حالت نمایش که در اینجا بصورت افقی هستش
Grid: مکان این دکمه ها
Align: جهت دکمه
همچنین یک ویجت متنی برای اینکه توضیح دهیم این دکمه ها چه چیزی هستند در مکان [2,:0] وارد کردیم.
برنامه را اجرا کنید:
در انتها یک PushButton به برنامه در مکان [3,1] با امکان فرواخوانی تابع do_booking ایجاد می کنیم.
تابع box info را به برنامه کلید جهت نمایش پیغام اضافه می کنیم
با اجرای دکمه، تابع do_booking که حاوی یک پیغام است نمایش داده میشود.
در صورتی که بخواهید مشاهده کنید کاربر چه گزینه هایی را انتخاب کرده است، می توانید دستورات زیر را وارد کنید:
لازم به ذکر است که ویجت CheckBox مقدار 1 برای فعال و صفر را برای غیرفعال انتخاب می کند. طبق برنامه ای که نوشته ایم، مقدار (F، M یا B) به برنامه برگشت داده می شود.
توی این آموزش که بر اساس آموزش های وب سایت رسمی خود رزبری پای بود، شما توانایی کار با ویجت های اولیه و ساده رو یاد گرفتید، اگر فکر می کنید مطلبی مونده که می تونه برای این آموزش مفید باشه، حتما بنویسید
حالا GUI چیه ؟ همون رابط گرافیکی بین کاربر و برنامه. به جای اینکه کاربر بیاد با دستور و کد دادن یک سری کارهارو بکنه، از طریق رابط گرافیکی می تونه خیلی ساده تر اطلاعات خودش رو به برنامه وارد بکنه
در ابتدا دستورات زیر رو در ترمینال اجرا کنید.
Sudo apt-get update && sudo pip3 install guizero
در ادامه از توابع guizero برای ایجاد رابط گرافیکی استفاده خواهیم کرد، در نتیجه اگر به اینترنت وصل نیستید تا کتابخونه های guizero رو نصب کنید، و یا اینکه حالا به هر علتی نتونستید guizero رو نصب کنید، نمی تونید این آموزش رو ادامه بدید.
IDLE 3 رو باز کنید و یک پروژه ایجاد کنید.
دستورات زیر رو وارد کنید.
from guizero import App
app = App(title="Hello world")
app.display()
برنامه رو اجرا کنید، در صورت درست بودن، با همچنین تصویری روبرو میشید.
خوب، حالا می خوایم یک سری امکانات دیگه رو هم اضافه کنیم، امکاناتی مثل باکس، منو، نوشته و ... ( که به همگی اونها ویجت میگند)
برای اضافه کردن هر ویجت، باید در اول برنامه باید اون رو فراخوانی کنید. مثلا، می خواین یک نوشته اضافه بکنید، باید مثل دستور زیر، ویجت مورد نظرتون رو اول برنامه فراخوانی بکنید.
[FONT=Yekan]from guizero import App, Text[/FONT]
یکبار فراخوانی ویجت در ابتدای برنامه کافیه و بعد از اون هرچندبار که بخواین می تونید از اون استفاده بکنید.
تمامی کدهای مربوط به ویجت ها باید قبل از رویداد نوشته بشند.یعنی دقیقا بعد از خط مربوط به ایجاد ویجت و قبل از app.display ()
همانند شکل زیر
دلیل این کار اینه که اون حلقه هربارد داره انجام میشه و منتظر وارد کردن اطلاعات از طرف کاربر می مونه، اگر شما بعد یا قبل از اون اطلاعات مربوط به GUI رو وارد کنید، چون خارج از حلقه هستش، برنامه درست اجرا نمیشه !
در ادامه چند ویجت دیگه رو هم با هم اجرا می کنیم
ویجت نوشته (Text widget)
یکی از ساده ترین ویجت ها که توسط اون می تونید متن رو داخل رابط گرافیکیتون وارد کنید.
برای فراخوانی اون دستور زیر رو وارد کنید:
from guizero import App, Text
welcome_message = Text(app, text="Welcome to my app")
اگر برنامه رو اجرا کنید، خروجی شما باید همچین چیزی باشه
همچنین ما می تونیم، مشخصات متن رو تغییر بدیم. با اضافه کردن دستورات مورد نیاز
کد زیر
welcome_message = Text(app, text="Welcome to my app", size=40, font="Times New Roman", color="lightblue")
ویجت باکس نوشته (TextBox)
ویجت TextBox همان کاری رو می کنه که در حالت عادی در برنامه input رو اجرا می کنید. برای وارد کردن اطلاعات توسط کاربر.
در ابتدا TextBox رو فراخوانی می کنیم و در ادامه از توابع اون استفاده می کنیم.
کد های زیر رو وارد کنید:
my_name = TextBox(app)
ویجت دکمه (PushButton)
ویجت PushButton برای شما یک دکمه ایجاد می کنه که وقتی روی اون کلیک کنید، یک برنامه براتون اجرا میشه.
بهتر است قبل از کد برنامه GUI ( بهترین جا ابتدای برنامه بعد از فراخوانی کتابخانه ها) تابعی که قرار است اجرا کنید را بنویسید.
def say_my_name():
welcome_message.set( my_name.get() )
شما می توانید از توابع get () و set () و بسیاری دستورات دیگر برای دریافت اطلاعات از وجت ها استفاده بکنید.
تابع PushButton را فراخوانی کنیم و سپس برنامه مربوط به PushButton را وارد می کنیم.
update_text = PushButton(app, command=say_my_name, text="Display my name")
در صورت اجرای برنامه، باید تصویر زیر را مشاهده کنید:
شما یک رابط گرافیکی ساده طراحی کردید. در این برنامه شما با فشردن کلید، یک برنامه را اجرا می کنید، این برنامه می تواند هر چیزی باشد، حتی تغییرات گرافیکی در این پنجره. هر نوع عملیات که در تابع نوشته شده باشد، سریعا بعد از فشردن دکمه اجرا می شود.
ویجت اسلایدر (Slider)
در این ویجت کاربر می تواند مقدار از قبل تعیین شده را انتخاب کند.
قبل از نوشتن توابع اسلایدر، تابع مربوط به آن را بنویسید.
def change_text_size(slider_value):
welcome_message.font_size(slider_value)
ویجت Slider را به برنامه خود اضافه کنید و سپس برنامه زیر را وارد کنید.
text_size = Slider(app, command=change_text_size, start=10, end=80)
برنامه را اجرا کنید.
ویجت عکس (Picture)
توسط این ویجت، می توانیم یک عکس را در برنامه خود لود کنیم.
ابتدا ویجت Picture را فراخوانی می کنیم، سپس کدزیر را وارد کنید.
my_cat = Picture(app, image="cat.gif")
برنامه را اجرا کنید.
شما هم اکنون یک برنامه GUI ساده طراحی کردید، کد برنامه کامل شما:
from guizero import App, Text, TextBox, PushButton, Slider, Picture
def say_my_name():
welcome_message.set(my_name.get())
def change_text_size(slider_value):
welcome_message.font_size(slider_value)
app = App(title="Hello world")
welcome_message = Text(app, text="Welcome to my app", size=40, font="Times new roman", color="lightblue")
my_name = TextBox(app, width=30)
update_text = PushButton(app, command=say_my_name, text="Display my name")
text_size = Slider(app, command=change_text_size, start=10, end=80)
my_cat = Picture(app, image="cat.gif")
app.display()
برای ادامه کار با مابقی ویجت ها، یک برنامه جدید ایجاد کنید.
خط زیر را برای اضافه نمودن کلاس APP وارد کنید
from guizero import App
app = App(title="My second GUI app", width=300, height=200, layout="grid")
app.display()
ویجت کمبو (Combo)
این ویجت به شما اجازه میده تا تعدادی از مقادری رو از طریق یک کلید کشویی انتخاب کنید.
ویجت Combo رو به برنامتون اضافه کنید و کد زیر رو در برنامتون وارد کنید.
film_choice = Combo(app, options=["Star Wars", "Indiana Jones", "Batman"], grid=[0,1], align="left")
در قسمت options لیستی از مقادیری که می خواهیم در منوی کشویی قرار بگیره رو میزاریم
طرح صفحه رو بصورت layout=grid انتخاب کردیم. یعنی یک شبکه از نقطه 0:0 اون بالاترین قسمت دستت چپ هستش. شما زا این طریق می تونید جای هر ویجت رو مشخص کنید.
شما می توانید یک متن را برای بهتر شدن برنامه خودتان به منوی کشویی اضافه کنید. کد زیر را وارد کنید تا یک متن در مقابل منوی کشویی نشان داده شود.
film_description = Text(app, text="Which film?", grid=[0,0], align="left")
برنامه خود را اجرا کنید:
شما با تیک زدن ویجت چک باکس، می توانید درست یا غلط بودن (true or false) را دریافت کنید.
ویجت CheckBox را به برنامتون اضافه کنید، کد زیر رو وارد کنید.
vip_seat = CheckBox(app, text="VIP seat?", grid=[1,1], align="left")
برنامه را اجرا کنید:
ویجت ButtonGroup
توسط این ویجت می توانید تعدادی گزینه را فعال و یا غیرفعال کنید.
ویجت ButtonGroup را به برنامه خود اضافه کرده و کد زیر را وارد کنید.
row_choice = ButtonGroup(app, options=[ ["Front", "F"], ["Middle", "M"],["Back", "B"] ],selected="M", horizontal=True, grid=[2,1], align="left")
App : فرمان اصلی که نشوندهنده مقدار اصلی تابع هستش و بقیه مقادیر زیرمجموعه اون هستند.
Options: حاوی لیستی از دکمه ها، مقادیری که نمایش داده میشند و مقادیری نامریی که رمبوط به اونها هستند رو در خودش داره
Selected: انتخاب پیش فرض
Horizontal: حالت نمایش که در اینجا بصورت افقی هستش
Grid: مکان این دکمه ها
Align: جهت دکمه
همچنین یک ویجت متنی برای اینکه توضیح دهیم این دکمه ها چه چیزی هستند در مکان [2,:0] وارد کردیم.
برنامه را اجرا کنید:
book_seats = PushButton(app, command=do_booking, text="Book seat", grid=[3,1], align="left")
def do_booking():
info("Booking", "Thank you for booking")
در صورتی که بخواهید مشاهده کنید کاربر چه گزینه هایی را انتخاب کرده است، می توانید دستورات زیر را وارد کنید:
print( film_choice.get() )
print( vip_seat.get_value() )
print( row_choice.get() )
لازم به ذکر است که ویجت CheckBox مقدار 1 برای فعال و صفر را برای غیرفعال انتخاب می کند. طبق برنامه ای که نوشته ایم، مقدار (F، M یا B) به برنامه برگشت داده می شود.
دیدگاه