بناء الواجهات الرسومية بلغة البايثون | الوحدة الرابعة| الدرس الثالث

بناء الواجهات الرسومية بلغة البايثون هو عنوان الدرس الثالث من الوحدة الثالثة التي تحمل اسم “البرمجة المتقدمة قي بايثون” في الفصل الدراسي الأول من مقرر “ثالث متوسط”.

ستتعرف في هذا الموضوع على كيفية بناء الواجهات الرسومية بلغة بايثون باستخدام النموذج البرمجي تكينتر، وذلك بإنشاء نافذة الرسم، واستخدام الألوان معها، ومعرفة نظام الإحداثيات في بايثون، ورسم الخطوط والأشكال، والتعامل مع أحداث الفأرة ولوحة المفاتيح في واجهة المُستخدِم في بايثون.

لذا قم بقراءة نواتج التعلُّم بعناية، ثم أعد قراءتها وتأكَّد من تحصيل كافة محتوياتها بعد انتهائك من دراسة الموضوع.

نواتج التعلُّم

• معرفة ماهية واجهة المُستخدِم الرسومية والنموذج tkinter البرمجي.
• إنشاء نافذة الرسم في بايثون.
• استخدام الألوان في بايثون.
• معرفة نظام الإحداثيات في بايثون.
• رسم الخطوط على لوحة الرسم القماشية.
• التعامل مع أحداث الفأرة ولوحة المفاتيح في واجهة المُستخدِم في بايثون.
• رسم الأشكال في بايثون.

هيا لنبدأ!

مقدمة – بناء الواجهات الرسومية بلغة البايثون

هناك العديد من الأمور الشيقة التي يمكِنك القيام بها من خلال البرمجة، على سبيل المثال، يمكِنك رسم أشكال ورسومات رائعة على نافذة واجهة المُستخدِم.

تقدم لك لغة برمجة بايثون عددًا من المقاطع البرمجية الجاهزة التي تسمى النماذج البرمجية، وواحد منها النموذج البرمجي تكينتر (tkinter).

لاحظ أن

واجهة المُستخدِم الرسومية (GUI) القصيرة، هي نوع من أنواع واجهة جهاز الحاسب الرسومية التي تسمح لك بالتفاعل مع جهاز حاسب أو جهاز آخر باستخدام الصور، والرموز، والعناصر الرسومية الأخرى، بدلًا من النص فقط.

لمعرفة المزيد من المعلومات عن واجهة المُستخدِم الرسومية (GUI)، قم بالاطّلاع على الرابط التالي:

واجهة مستخدم رسومية – ويكيبيديا

النموذج البرمجي تكينتر

يحتوي النموذج البرمجي النمطي تكينتر (tkinter) على نصوص برمجية جاهزة يمكن استخدامها في مقطع برمجي دون الحاجة إلى كتابتها.

لبدء العمل بواسطة دوال تكينتر، عليك استخدام مجموعة محددة من الأوامر.

يتم الرسم في تكينتر على أداة لوحة الرسم القماشية (Canvas)، والتي تتمثل بمنطقة مستطيلة مخصصة لرسم الصور أو التخطيطات المعقدة الأخرى.

يمكِنك وضع رسومات أو نصوص أو عناصر واجهة مستخدِم أو إطارات في هذه اللوحة، ولكن قبل البدء بالرسم، يجب عليك تحديدها، ثم يمكِنك اختيار حجمها ولون خلفيتها وعنوانًا لها.

لمعرفة المزيد من المعلومات عن النموذج البرمجي تكينتر، قم بالاطّلاع على الرابط التالي:

تكينتر – ويكيبيديا

إنشاء نافذة الرسم

لإنشاء نافذة الرسم الخاصة بك، عليك استخدام الأوامر الآتية:

الألوان في بايثون

تتوفر في النموذج البرمجي تكينتر جميع الألوان مع درجاتها، وهناك طريقتان لتحديد هذه الألوان:

1. يمكِنك استخدام اسم لون معياري محدد، وستكون الألوان الآتية متاحة دائمًا:
   “أبيض” و”أسود” و”أحمر” و”أزرق” و”أخضر” و”سماوي” و”أصفر” و”أرجواني”.
2. يمكِنك أيضًا استخدام 3 أرقام تحدد نسبة الأحمر والأخضر والأزرق في نموذج ألوان RGB.

نموذج ألوان RGB

الغرض الرئيسي من نموذج ألوان RGB هو استشعار الصور وتمثيلها وعرضها في الأنظمة الإلكترونية، مثل أجهزة التلفزيون وأجهزة الحاسب، إضافة إلى استخدامه أيضًا في التصوير الفوتوغرافي التقليدي.

قبل العصر الإلكتروني، كان لنموذج الألوان RGB بالفعل نظرية قوية تستند إلى الإدراك البشري للألوان.

لاحظ أن

يتم تحديد قيمة ألوان RGB تبعًا للألوان الثلاثة، الأحمر، والأخضر، والأزرق. يحدد كل عامل (أحمر، وأخضر، وأزرق). كثافة اللون كعدد صحيح بين 0 و255.

الإحداثيات في بايثون

تَستخدِم أداة لوحة الرسم القماشية نظام إحداثي لتحديد العناصر الموجودة عليها، ولكن يختلف هذا النظام عن نظام الإحداثيات الديكارتية المعتاد الذي تستخدمه في الرياضيات، فهو أشبه بنظام إحداثيات معكوس الاتّجاهات.

تكون النقطة ذات الإحداثيات (0 , 0) موجودة في الزاوية اليسرى العليا من اللوحة، وتكون إحداثيات x كإحداثيات النظام الديكارتي، أي أن تلك الأكبر تكون أقرب إلى جهة اليمين وتلك الأصغر تكون أقرب إلى جهة اليسار.

أما بالنسبة لإحداثيات y فهي مختلفة في هذا النظام، بحيث تكون تلك الأكبر في الأسفل وليست في الأعلى كما هو الحال في النظام الديكارتي.

لاحظ أن

النموذج الأساسي لهذا النظام هو البكسل، مع وجود الإحداثيات ذات البكسل الأعلى على جهة اليسار (0 , 0). دائمًا ما يتم التعبير عن الإحداثيات التي يتم تحديدها كأعداد صحيحة بنماذج البكسل.

رسم الخطوط

حان الوقت الآن للرسم على لوحة الرسم القماشية. يمكِنك البدء برسم خط بدائي هندسي بسيط، وللقيام بذلك، يمكِنك استخدام دالة canvas.create_line( ) الموجودة في النموذج البرمجي لوحة الرسم القماشية:

الأرقام الموجودة بين قوسين في دالة canvas.create_line( ) هي إحداثيات x وy لبداية ونهاية كل سطر (بداية x، بداية y، نهاية x، نهاية y).

يمكِنك أيضًا استخدام عوامل التعبئة والعرض لتغيير لون وعرض “القلم”، مثال:

اكتب مقطعًا برمجيًا لإنشاء لوحة رسومية ملونة، تحوي عددًا من الخطوط الأفقية بأحجام مختلفة.

بإمكانك مراجعة محتوى موضوع “بناء الواجهات الرسومية بلغة البايثون” من بدايته وحتى نهاية هذا القسم، من خلال الرابط التالي:

التعامل مع أحداث الفأرة ولوحة المفاتيح

يمكِنك ربط دوال وطرق بايثون لكل عنصر في واجهة مستخدِم بالأحداث. على سبيل المثال، لمطابقة أحداث المُستخدِم مع عنصر واجهة المُستخدِم ستحصل على النتيجة الآتية widget.bind(event, handler).

إذا كان هناك حدث يطابق وصف الحدث في عنصر واجهة المُستخدِم، يتم استدعاء المعامل المحدد مع كائن يصف الحدث.

لرسم شكل باستخدام النموذج البرمجي تكينتر، سيكون من المفيد معرفة الإحداثيات.

في المثال أدناه، عند تشغيل المقطع البرمجي والضغط في النافذة، تظهر رسالة تخبرك بإحداثيات النقطة التي قمت بضغط زر الفأرة عليها.

رسم الأشكال

رسم مثلث

لرسم مثلث، يمكِنك استخدام دالة create_line( )، ويمكِن استخدام هذه الدالة لرسم عدة أشكال.

في المثال أدناه، يتم رسم مثلثٍ من خلال الخطوط.

رسم مستطيل

لرسم مستطيل على لوحة الرسم القماشية، يمكِنك استخدام دالة canvas.create_rectangle( )

الأرقام الموجودة بين قوسين هي إحداثيات x وy للنقطتين المحيطتين: أعلى اليسار ونقطة أسفل اليمين.

يمكِنك استخدام المُخطَّط التفصيلي والمُعامِلات للتحكُّم في لون وعرض المُخطَّط التفصيلي للمستطيل. توفر معاملة التعبئة لونًا للجزء الداخلي من المستطيل.

يمكِنك إلقاء نظرة على المثال الآتي:

رسم شكل بيضاوي

لرسم شكل بيضاوي على لوحة الرسم القماشية، يمكِنك استخدام الدالة الآتية:

يتسع الرسم البيضاوي المرسوم داخل مستطيل المحدد أبعاده من خلال إحداثيات الدالة:

• (x1, y1) هي الزاوية اليسرى العلوية للمستطيل.
• (x2, y2) هي الزاوية اليمنى السفلية للمستطيل.

إذا كانت أبعاد هذا المستطيل تشكِّل مربعًا، فالشكل الذي ستحصل عليه هو دائرة.

رسم مضلع

المضلع في الهندسة هو عبارة عن شكل مستوٍ يتم وسفه بواسطة عدة خطوط مستقيمة متصلة لتشكيل شكل متعدد الأضلاع مغلق.

يُطلق على المقاطع ذات الشكل المضلع حوافها أو جوانبها، والنقاط التي تلتقي فيها الحافتان اسم زوايا المضلع، كما يُطلق أحيانًا اسم جسم المضلع على الجزء الداخلي منه.

يوفر النموذج البرمجي تكينتر دوالًا جاهزة للاستخدام لرسم أشكال أكثر تعقيدًا، مثل المضلعات والأقواس وما إلى ذلك.

اكتب مقطعًا برمجيًا لرسم مضلع باستخدام النموذج البرمجي تكينتر.

بإمكانك مراجعة محتوى موضوع “بناء الواجهات الرسومية بلغة البايثون” بدايةً من عنوان “التعامل مع أحداث الفأرة ولوحة المفاتيح” وحتى نهاية الموضوع، من خلال الرابط التالي:

اختبر تحصيلك لمحتوى الموضوع من خلال الرابط التالي:

الواجب الإلكتروني

إلى هنا يكون قد انتهى موضوع “بناء الواجهات الرسومية بلغة البايثون“، لا تنسوا مراجعة نواتج التعلُّم أعلى المقال، وانتظرونا في الموضوع القادم!

روابط هامة

مقررات الفصل الدراسي الأول