نحوه ساخت اپلیکیشن تخته سفید با پایتون و Tkinter

در این آموزش یاد خواهید گرفت که چگونه با استفاده از Python و Tkinter یک اپلیکیشن وایت برد ساده بسازید.

چند ماه پیش در حال تدریس یک دوره پایتون بودم. من برای انتقال مفاهیم خاصی مشکل داشتم زیرا این یک دوره آنلاین بود و نمی توانستم از تخته سفید یا حتی تخته سنتی استفاده کنم. ویژگی تخته سفید داخلی در Google Meet نیز برای استفاده و اشتراک گذاری بسیار پیچیده بود.

بنابراین، تصمیم گرفتم در گوگل جستجو کنم تا ببینم آیا مخازن GitHub با برنامه های تخته سفید وجود دارد یا خیر.

من بسیاری از این مخازن را پیدا کردم. اما پس از آزمایش بسیاری از آنها، متوجه شدم که برنامه ها اغلب برای نیازهای من بسیار پیچیده هستند. من چیز ساده‌تری می‌خواستم، جایی که بتوانم رنگ‌ها و اندازه‌های خطوط را انتخاب کنم و بعد بتوانم طراحی را خودم انجام دهم.

خب من چیکار کردم؟ تصمیم گرفتم برنامه خودم را کدنویسی کنم. و برای این فرآیند، من استفاده از Python و Tkinter را انتخاب کردم، جعبه ابزار پیش‌فرض GUI (رابط کاربری گرافیکی) که همراه پایتون ارائه می‌شود.

نتیجه نهایی؟

بنابراین در این آموزش، من شما را از طریق این فرآیند راهنمایی می کنم تا بتوانید خودتان آن را بسازید. این به شما کمک می کند تا مهارت های پایتون خود را تقویت کنید و در مورد Tkinter نیز بیاموزید.

نحوه ساخت عملکرد برنامه

محیط توسعه خود را تنظیم کنید

ساخت این برنامه بسیار ساده است. شما به آخرین نسخه پایتون نیاز دارید که می توانید آن را از اینجا دانلود و نصب کنید:

به Python.org خوش آمدید

خانه رسمی زبان برنامه نویسی پایتون

Python.org

اگر کاربر لینوکس هستید، نیازی به نصب آن نخواهید داشت که همراه با توزیع شما است. همچنین، شما باید درک اولیه ای از پایتون داشته باشید و نحوه ایجاد توابع را بدانید.

پس از تأیید اینکه قبلاً پایتون را روی رایانه خود نصب کرده اید، Visual Studio Code یا ویرایشگر کد دلخواه خود را باز کنید تا شروع به نوشتن کد کنید.

نحوه ساخت ویژگی طراحی

یک فایل پایتون ایجاد کنید و با وارد کردن ماژول های Tkinter و انتخابگر رنگ شروع کنید، مانند این:

import tkinter as tk
from tkinter.colorchooser import askcolor

پس از وارد کردن Tkinter و ماژول colorchooser، که یک مدال برای انتخاب ترکیب رنگ های RGB ما باز می کند، می توانید نوشتن توابع را برای کارکرد این تخته سفید آغاز کنید.

ابتدا یک تابع برای شروع طراحی ایجاد کنید، مانند این:

def start_drawing(event):
    global is_drawing, prev_x, prev_y
    is_drawing = True
    prev_x, prev_y = event.x, event.y

این کد تابعی را با نام تعریف می کند start_drawing این به معنای مدیریت شروع یک عمل ترسیمی در یک برنامه رابط کاربری گرافیکی (GUI) است.

بیایید کاری کنیم که این تابع چه کاری انجام می دهد:

1. def start_drawing(event):: این خط تابعی را با نام تعریف می کند start_drawing که طول می کشد event به عنوان پارامتر آن در برنامه نویسی رابط کاربری گرافیکی، رویدادها اعمال یا رخدادهایی هستند (مانند کلیک ماوس، فشار دادن کلیدها و غیره) که هنگام وقوع، عملکردهای خاصی را فعال می کنند.
2. global is_drawing, prev_x, prev_y: این خط اعلام می کند که متغیرها is_drawing، prev_x، و prev_y متغیرهای جهانی هستند. در پایتون، متغیرهای سراسری از هر کجای کد قابل دسترسی هستند و می‌توان آن‌ها را در توابع تغییر داد. این خط تضمین می کند که این متغیرها در داخل تابع قابل دسترسی هستند.
3. is_drawing = True: این خط را تنظیم می کند is_drawing متغیر به True. این متغیر معمولاً برای نشان دادن اینکه آیا یک عمل ترسیمی در حال انجام است استفاده می شود. با تنظیم آن بر روی True، تابع سیگنال می دهد که یک عمل ترسیم شروع شده است.
4. prev_x, prev_y = event.x, event.y: این خط مختصات فعلی نشانگر ماوس را در زمانی که start_drawing تابع نامیده می شود. را اختصاص می دهد x و y مختصات مکان نما ماوس در آن لحظه به prev_x و prev_y متغیرها این متغیرها برای ردیابی نقطه شروع عمل ترسیم استفاده می شوند.

بنابراین هنگامی که این تابع فراخوانی می شود (معمولاً در پاسخ به یک رویداد کلیک ماوس)، آن را تنظیم می کند is_drawing پرچم به True برای نشان دادن اینکه یک عمل ترسیمی در حال انجام است و موقعیت اولیه مکان نما ماوس را با استفاده از علامت ثبت می کند prev_x و prev_y متغیرها سپس از این متغیرها در اقدامات ترسیم بعدی استفاده می شود تا نقطه شروع را با موقعیت مکان نما فعلی وصل کنند تا یک نقاشی روی بوم ایجاد شود.

حالا بیایید به کدنویسی ادامه دهیم. در مرحله بعد، باید تابعی بنویسیم تا در واقع روی تخته سفید رسم کند، مانند این:

def draw(event):
    global is_drawing, prev_x, prev_y
    if is_drawing:
        current_x, current_y = event.x, event.y
        canvas.create_line(prev_x, prev_y, current_x, current_y, fill=drawing_color, width=line_width, capstyle=tk.ROUND, smooth=True)
        prev_x, prev_y = current_x, current_y

نقاشی اساساً ترکیبی از نقاط پر از رنگ است که به عنوان یک بردار عمل می کند. برای کار به عنوان یک بردار، باید یک نقطه شروع و پایان داشته باشد. بنابراین پس از ایجاد یک تابع برای شروع طراحی، به یک تابع برای توقف طراحی نیاز دارید، مانند این:

def stop_drawing(event):
    global is_drawing
    is_drawing = False

نحوه ساخت ویژگی تغییر رنگ

اکنون که قابلیت طراحی اولیه را دارید، گام بعدی اجرای تابع تغییر رنگ است. این یک تابع ساده است که askcolor ماژول، که در حال حاضر بخشی از Tkinter است، مانند این:

def change_pen_color():
    global drawing_color
    color = askcolor()[1]
    if color:
        drawing_color = color

برای آخرین عملکرد، یک تابع برای تنظیم عرض خط ایجاد می کنید که به شما امکان می دهد ضخامت خطوط خود را انتخاب کنید. در اینجا نحوه پیاده سازی آن آمده است:

def change_line_width(value):
    global line_width
    line_width = int(value)

اکنون توابع را تکمیل کرده اید. در مرحله بعد، از Tkinter برای ایجاد پنجره ای برای برنامه و دکمه هایی برای انتخاب رنگ ها، پاک کردن وایت برد و انتخاب عرض خط خود استفاده می کنید.

نحوه ساخت رابط کاربری گرافیکی

رابط کاربری گرافیکی مخفف عبارت Graphical User Interface است که نمایانگر پنجره‌هایی است که در رایانه، تلفن هوشمند، تبلت و غیره با آنها تعامل دارید.

هنگام کدنویسی یک برنامه دسکتاپ با استفاده از Python و Tkinter، اندازه، موقعیت، دکمه ها و هر عنصر دیگری را که می خواهید برای برنامه خود تعریف می کنید. در این مورد، شما باید دارایی های زیر را ایجاد کنید:

• عنوانی برای اپلیکیشن شما
• یک بوم سفید سفید برای طراحی.
• فریمی برای نگه داشتن کنترل های برنامه شما در یک خط.
• یک دکمه رنگی
• یک دکمه بوم شفاف برای پاک کردن تمام کارهای شما و شروع دوباره کشیدن.
• یک نوار لغزنده برای انتخاب عرض خط.

چگونه پنجره خود را بسازیم

با ایجاد یک پنجره با عنوان و یک بوم سفید شروع کنید:

root = tk.Tk()
root.title("Whiteboard App")

canvas = tk.Canvas(root, bg="white")
canvas.pack(fill="both", expand=True)

is_drawing = False
drawing_color = "black"
line_width = 2

root.geometry("800x600")

بیایید کارهایی که هر قسمت انجام می دهد را بشکنیم:

1. root = tk.Tk(): این خط پنجره اصلی برنامه را ایجاد می کند. یک برنامه Tkinter را مقداردهی اولیه می کند و آن را به متغیر اختصاص می دهد root. این پنجره به عنوان محفظه ای برای تمام عناصر گرافیکی برنامه تخته سفید عمل می کند.
2. root.title("Whiteboard App"): عنوان پنجره برنامه را روی “برنامه Whiteboard” تنظیم می کند. عنوان در نوار عنوان پنجره ظاهر می شود و نامی برای برنامه ارائه می دهد.
3. canvas = tk.Canvas(root, bg="white"): این خط یک بوم نقاشی را در پنجره اصلی برنامه ایجاد می کند. بوم یک ناحیه مستطیلی سفید است که کاربران می توانند در آن نقاشی کنند. با رنگ پس زمینه سفید مقداردهی اولیه می شود. بوم به متغیر اختصاص داده می شود canvas.
4. canvas.pack(fill="both", expand=True): این بوم را طوری پیکربندی می کند که هم فضای افقی و هم فضای عمودی پنجره برنامه را پر کند. این به بوم اجازه می دهد تا کل پنجره را بسط داده و کل پنجره را اشغال کند.
5. is_drawing = False: این یک متغیر را مقداردهی اولیه می کند is_drawing به False. معمولاً برای ردیابی اینکه آیا کاربر در حال حاضر نقاشی می‌کشد یا خیر استفاده می‌شود. هنگامی که کاربر شروع به ترسیم می کند، این متغیر روی تنظیم می شود True برای نشان دادن یک عمل ترسیمی در حال انجام.
6. drawing_color = "black": این یک متغیر را مقداردهی اولیه می کند drawing_color به “سیاه”. رنگی را که برای طراحی روی بوم استفاده می شود مشخص می کند. با توابعی که بعداً در این آموزش اضافه خواهید کرد، می‌توانید این رنگ را در صورت نیاز برای طراحی با رنگ‌های مختلف تغییر دهید
7. line_width = 2: این یک متغیر را مقداردهی اولیه می کند line_width به 2. عرض خطوط یا سکته های مورد استفاده برای ترسیم را مشخص می کند. می توانید این مقدار را برای تغییر ضخامت خطوط تنظیم کنید.
8. root.geometry("800x600"): اندازه اولیه پنجره برنامه را روی 800 پیکسل در عرض و 600 پیکسل در ارتفاع تنظیم می کند. وقتی برای اولین بار نمایش داده می شود، ابعاد پنجره را مشخص می کند، اما می توانید اندازه پنجره و با آن، فضای بوم خود را تغییر دهید.

چگونه نوار ناوبری و کنترل های خود را بسازیم

کاری که باید انجام دهید این است که یک قاب برای نگه داشتن دکمه ها یا کنترل ها در همان خط ایجاد کنید. این راحت ترین راه برای داشتن دکمه است و به نوعی نوار ناوبری است.

controls_frame = tk.Frame(root)
controls_frame.pack(side="top", fill="x")

سپس، دو دکمه ایجاد کنید و به آنها موقعیت های ثابت پیش فرض را در صفحه نمایش خود بدهید، مانند این:

color_button = tk.Button(controls_frame, text="Change Color", command=change_pen_color)
clear_button = tk.Button(controls_frame, text="Clear Canvas", command=lambda: canvas.delete("all"))

color_button.pack(side="left", padx=5, pady=5)
clear_button.pack(side="left", padx=5, pady=5)

بنابراین، در حال حاضر، اگر برنامه خود را اجرا کنید، چیزی شبیه به این خواهید دید:

شما در حال حاضر دو دکمه اصلی را برای برنامه خود دارید، یکی برای تغییر رنگ و دیگری برای پاک کردن بوم. آخرین کنترلی که باید ایجاد کنید یک نوار لغزنده برای تابع عرض خط است. برای آن کد زیر را می نویسید:

line_width_label = tk.Label(controls_frame, text="Line Width:")
line_width_label.pack(side="left", padx=5, pady=5)

line_width_slider = tk.Scale(controls_frame, from_=1, to=10, orient="horizontal", command=lambda val: change_line_width(val))
line_width_slider.set(line_width)
line_width_slider.pack(side="left", padx=5, pady=5)

و دوباره، بیایید آنچه را که در اینجا می گذرد، مرور کنیم:

1. line_width_label = tk.Label(controls_frame, text="Line Width:"): این خط یک ویجت برچسب با متن “عرض خط” ایجاد می کند. این برچسب برای نمایش متن برای توصیف هدف لغزنده زیر (که عرض خط را کنترل می کند) در نظر گرفته شده است. در داخل قرار می گیرد controls_frame ویجت
2. line_width_label.pack(side="left", padx=5, pady=5): این خط محل قرارگیری برچسب را در داخل پیکربندی می کند controls_frame.
3. side="left": این برچسب را در سمت چپ قرار می دهد controls_frame. این تضمین می کند که برچسب در سمت چپ تراز باشد.
4. padx=5: بالشتک افقی 5 پیکسلی در اطراف برچسب اضافه می کند و مقداری فاصله ایجاد می کند.
5. pady=5: لایه های عمودی 5 پیکسلی را در اطراف برچسب اضافه می کند و فاصله ایجاد می کند.
6. line_width_slider = tk.Scale(controls_frame, from_=1, to=10, orient="horizontal", command=lambda val: change_line_width(val)): این خط یک ویجت لغزنده افقی (ویجت مقیاس) ایجاد می کند که به کاربر اجازه می دهد پهنای خط را انتخاب کند. دامنه لغزنده از حداقل مقدار 1 (from_=1) تا حداکثر مقدار 10 (to=10). را command گزینه برای فراخوانی تنظیم شده است change_line_width هر زمان که موقعیت لغزنده تغییر کند، با مقدار انتخاب شده عمل کنید.
7. line_width_slider.set(line_width): موقعیت اولیه اسلایدر را روی مقدار ذخیره شده در تنظیم می کند line_width متغیری که در ابتدا در کد مقداردهی اولیه شده است. این تضمین می کند که نوار لغزنده از عرض خط پیش فرض شروع می شود.
8. line_width_slider.pack(side="left", padx=5, pady=5): این خط محل قرارگیری اسلایدر را در داخل پیکربندی می کند controls_frame. در سمت چپ قرار می گیرد و برای ایجاد فاصله در اطراف لغزنده، بالشتک اضافه می شود.

بنابراین، اگر به این نقطه رسیدید، برنامه شما باید به شکل زیر باشد:

چگونه ویژگی های خود را با رابط کاربری گرافیکی خود متصل کنید

اما اگر دکمه‌ها را فشار دهید یا نوار لغزنده را برای عرض خط حرکت دهید، کار نمی‌کند، زیرا هنوز باید عملکردهایی را که در ابتدای این آموزش کدنویسی کرده‌اید، با دکمه‌ها و کنترل‌هایی که ایجاد کرده‌اید، پیوند دهید یا «پیوند» کنید.

برای این کار، این کد را می نویسید:

canvas.bind("<Button-1>", start_drawing)
canvas.bind("<B1-Motion>", draw)
canvas.bind("<ButtonRelease-1>", stop_drawing)

root.mainloop()

بنابراین، آخرین خلاصه برای درک انتهای کد خود:

• canvas.bind("<Button-1>", start_drawing): هنگامی که دکمه سمت چپ ماوس روی بوم کلیک می شود، باعث می شود start_drawing تابع.
• canvas.bind("<B1-Motion>", draw): در حالی که دکمه سمت چپ ماوس را نگه می دارید و ماوس را روی بوم حرکت می دهید، باعث می شود draw تابع.
• canvas.bind("<ButtonRelease-1>", stop_drawing): هنگامی که دکمه سمت چپ ماوس رها می شود (رویداد آزاد شدن دکمه)، باعث می شود stop_drawing تابع.
• و در نهایت، root.mainloop() حلقه اصلی برنامه را شروع می کند و به آن اجازه می دهد به تعاملات و رویدادهای کاربر پاسخ دهد.

بسته شدن

امیدوارم از خواندن این آموزش به همان اندازه که من از نوشتن آن لذت بردم لذت برده باشید و وایت برد در هر کاری که نیاز دارید به شما کمک کند.

اگر می خواهید برنامه را دانلود کنید، می توانید آن را در اینجا بررسی کنید:

GitHub – jpromanonet/white_board_py: یک ابزار تخته سفید که در پایتون با Tkinter نوشته شده است.

ابزار تخته سفید که در پایتون با Tkinter نوشته شده است. با ایجاد یک حساب کاربری در GitHub در توسعه jpromanonet/white_board_py مشارکت کنید.

jpromanonetGitHub

تا دفعه بعد! کد نویسی را خوشحال کنید و برای ایجاد یک نمونه کار جالب به کدنویسی ادامه دهید =D