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

IM رابط الدرس الرقمي الدرس الثالث: بناء الواجهات الرسومية بلغة البايثون رسم www.ien.edu.sa هناك العديد من الأمور الشيقة التي يمكنك القيام بها من خلال البرمجة، على سبيل المثال، يمكنك أشكال ورسومات رائعة على نافذة واجهة المستخدم. تقدم لك لغة برمجة بايثون عددًا من المقاطع البرمجية الجاهزة التي تسمى النماذج البرمجية، وواحد منها النموذج البرمجي تكينتر (tkinter). النموذج البرمجي تكينتر واجهة المستخدم الرسومية (GUI) القصيرة هي نوع من أنواع واجهة جهاز الحاسب الرسومية التي تسمح لك بالتفاعل مع جهاز حاسب أو جهاز آخر باستخدام الصور، والرموز والعناصر الرسومية الأخرى، بدلًا من النص فقط. يحتوي النموذج البرمجي النمطي تكينتر (tkinter) على نصوص برمجية جاهزة يمكن استخدامها في مقطع برمجي دون الحاجة إلى كتابتها. لبدء العمل بواسطة دوال تكينتر، عليك استخدام مجموعة محددة من الأوامر. يتم الرسم في تكينتر على أداة لوحة الرسم القماشية ( Canvas)، والتي تتمثل بمنطقة مستطيلة مخصصة لرسم الصور أو التخطيطات المعقدة الأخرى. يمكنك وضع رسومات أو نصوص أو عناصر واجهة مستخدم أو إطارات في هذه اللوحة، ولكن قبل البدء بالرسم، يجب عليك تحديدها ، ثم يمكنك اختيار حجمها ولون خلفيتها وعنوانًا لها. إنشاء نافذة الرسم لإنشاء نافذة الرسم الخاصة بك، عليك استخدام الأوامر الآتية: الأمر from tkinter import* window=Tk() canvas Canvas(bg="color", width=500,height=350) canvas.pack() هذه هي نافذة واجهة المستخدم التي سترسم فيها. الوصف يستورد نموذج تكينتر البرمجي. ينشئ نافذة أساسية جديدة على شاشتك حيث سيتم عرض رسوماتك. يضبط حجم ولون الخلفية لنافذة لوحة الرسم القماشية. يضع كل العناصر على النافذة. from tkinter import* window=Tk() canvas=Canvas(bg="teal",width=400,height=400) canvas.pack() window.mainloop() أبعاد لوحة الرسم القماشية. لون الخلفية. وزارة التعد13 Ministry of Education 2024-1446

138 الألوان في بايثون تتوفر في النموذج البرمجي تكينتر جميع الألوان مع درجاتها، وهناك طريقتان لتحديد هذه الألوان 1- يمكنك استخدام اسم لون معياري محدد، وستكون الألوان الآتية متاحة دائمًا: "أبيض" و "أسود" و "أحمر" و "أزرق" و "أخضر" و "سماوي" و "أصفر" و "أرجواني". 2 - يمكنك أيضًا استخدام 3 أرقام تحدد نسبة الأحمر والأخضر والأزرق في نموذج ألوان RGB قرص ألوان RGB أحمر نموذج ألوان RGB الغرض الرئيسي من نموذج ألوان RGB هو استشعار الصور وتمثيلها وعرضها في الأنظمة الإلكترونية، مثل أجهزة التلفزيون وأجهزة الحاسب، إضافة إلى استخدامه أيضًا في التصوير الفوتوغرافي التقليدي قبل العصر الإلكتروني، كان لنموذج الألوان RGB بالفعل نظرية قوية تستند إلى الإدراك البشري للألوان. يتم تحديد قيمة ألوان RGB تبعًا للألوان الثلاثة، الأحمر والأخضر والأزرق. يحدد كل عامل أحمر، وأخضر وأزرق) كثافة اللون كعدد صحيح بين 0 و 255. أصفر 0-255-255 أخضر 0-255-0 جدول ألوان RGB 0-0-255 سماوي 255-255-0 أرجواني 255-0-255 أزرق 255-0-0 Crimson (220,20,60) | Purple (128,0,128) SteelBlue (70,130,180) Red (255,0,0) | Lime (0,255,0) Blue (0,0,255) Coral (255,127,80) | Green (0,128,0) White (255,255,255) Chocolate (210,105,30) | Olive (128,128,0) | Gray (128,128,128) Yellow (255,255,0) | Teal (0,128,128) Black (0,0,0) Violet (238,130,238) | Cyan (0,255,255) | Magenta (255,0,255) وزارة التعليم Ministry of Education 2024-1446

الإحداثيات في بايثون تستخدم أداة لوحة الرسم القماشية نظام إحداثي لتحديد العناصر الموجودة عليها ، ولكن يختلف هذا النظام عن نظام الإحداثيات الديكارتية المعتاد الذي تستخدمه في الرياضيات، فهو أشبه بنظام إحداثيات معكوس الاتجاهات. 6 تكون النقطة ذات الإحداثيات (0) (0) موجودة في الزاوية اليسرى العليا من اللوحة، وتكون إحداثيات x كإحداثيات النظام الديكارتي أي أن تلك الأكبر تكون أقرب إلى جهة اليمين وتلك الأصغر تكون أقرب إلى جهة اليسار. أما بالنسبة لإحداثيات y فهي مختلفة في هذا النظام، بحيث تكون تلك الأكبر في الأسفل وليست في الأعلى كما هو الحال في النظام الديكارتي. tk x=100 x=200 □ X (x=0, y=0) x axis y axis y=200 (100,200) ⚫ (200,300) النموذج الأساسي لهذا النظام هو البكسل، مع وجود الإحداثيات ذات البكسل الأعلى على جهة اليسار (0،0). دائمًا ما يتم التعبير عن الإحداثيات التي يتم تحديدها كأعداد صحيحة بنماذج البكسل. رسم الخطوط حان الوقت الآن للرسم على لوحة الرسم القماشية. يمكنك البدء برسم خط بدائي هندسي بسيط، وللقيام بذلك، يمكنك استخدام دالة ( )canvas.create_line الموجودة في النموذج البرمجي لوحة الرسم القماشية: canvas.create_line(x-start, y-start, x-end, y-end) الأرقام الموجودة بين قوسين في دالة ( )canvas.create_line هي إحداثيات x و y لبداية ونهاية كل سطر (بداية x، بداية y، نهاية x، نهاية ) . يمكنك أيضًا استخدام عوامل التعبئة والعرض لتغيير لون وعرض "القلم"، مثال: وزارة التعو13 Ministry of Education 2024-1446

from tkinter import* window=Tk() canvas-Canvas(bg="teal",width=600, height=200) canvas.pack() canvas.create_line(10,10,100,100, width=5,fill="red") canvas.create_line(10, 100, 100, 10, width=3, fill="gold") window.mainloop() (10,100) (100,100) ☐ X اكتب مقطعًا برمجيًا لإنشاء لوحة رسومية ملونة، تحوي عددًا من الخطوط الأفقية بأحجام مختلفة. from tkinter import* window=Tk() window.title("Lines") canvas Canvas (bg="darkgreen", width=600, height=200) canvas.pack() for i in range(0,10): canvas.create_line(40, i*15, 500, i*15, width=i, fill="orange") window.mainloop() وزارة التعليم Ministry of Education 2024-1446 Lines ㅁ х 140

جرب بنفسك شغل المقطع البرمجي الآتي. ماذا تلاحظ ؟ from tkinter import* window=Tk() canvas=Canvas(bg="teal",width=600, height=600) canvas.pack() canvas.create_line(0, 100, 400, 100, fill="white", dash=100) canvas.create_line(0,200,400,200,fil1="white", dash=1) window.mainloop() التعامل مع أحداث الفأرة ولوحة المفاتيح يمكنك ربط دوال وطرق بايثون لكل عنصر في واجهة مستخدم بالأحداث. على سبيل المثال، لمطابقة أحداث المستخدم مع عنصر واجهة المستخدم ستحصل على النتيجة الآتية (widget.bind(event, handler. إذا كان هناك حدث يطابق وصف الحدث في عنصر واجهة المستخدم، يتم استدعاء المعامل المحدد مع كائن يصف الحدث. وزارة التعلم Ministry of Education 2024-1446 الوصف زر الفأرة الايسر الضغط المزدوج على زر الفأرة الأيسر. إدخال مؤشر الفأرة إلى نافذة تكينتر. إخراج مؤشر الفأرة من نافذة تكينتر. الضغط على مفتاح الإدخال. مثال : مفتاح <a> يتم الضغط على "a". فئات الأحداث الحدث <Button-1> <Double-Button-1> <Enter> <Leave> <Return> <key>

لرسم شكل باستخدام النموذج البرمجي تكينتر، سيكون من المفيد معرفة الإحداثيات. في المثال أدناه عند تشغيل المقطع البرمجي والضغط في النافذة، تظهر رسالة تخبرك بإحداثيات النقطة التي قمت بضغط زر الفأرة عليها. from tkinter import* window=Tk() def callback(event): print (("clicked at"), event.x, event.y) canvas Canvas(bg="teal", width=400,height=400) canvas.bind("<Button-1>", callback) canvas.pack() window.mainloop() وزارة التعليم Ministry of Education 2024-1446 جرب بنفسك 。 clicked at 171 220 clicked at 325 416 clicked at 490 390 شغل المقطع البرمجي الآتي. ماذا تلاحظ ؟ from tkinter import* window=Tk() def callback(event): canvas.focus_set() print (("clicked at"), event.x, event.y) canvas Canvas (bg="green", width=400, height=300) canvas.bind("<Double-Button-1>", callback) canvas.pack() window.mainloop() 142

شغل المقطع البرمجي الآتي. ماذا تلاحظ ؟ from tkinter import* window=Tk() canvas=Canvas(bg="teal",width=600,height=600) canvas.pack() canvas.create_line(0,100, 400, 100, fill="white", dash=100) canvas.create_line(0,200, 400, 200, fill="white", dash=1) window.mainloop() الأشكال رسم مثلث رسم جرب بنفسك لرسم مثلث، يمكنك استخدام دالة ) (create line ، ويمكن استخدام هذه الدالة لرسم عدة أشكال في المثال أدناه، يتم رسم مثلث من خلال الخطوط. from tkinter import* window=Tk() canvas=Canvas(bg="teal",width=600,height=400) canvas.pack() canvas.create_line(240,20,160,100,320,100,240,20) window.mainloop() (160,100) (320,100) (240,20) وزارة التعدد Ministry of Education 2024-1446

رسم مستطيل لرسم مستطيل على لوحة الرسم القماشية، يمكنك استخدام دالة ( )canvas.create_rectangle canvas.create_rectangle(x1,y1,x2,y2) الأرقام الموجودة بين قوسين هي إحداثيات x و y للنقطتين المحيطتين أعلى اليسار ونقطة أسفل اليمين . يمكنك استخدام المخطط التفصيلي والمُعاملات للتحكم في لون وعرض المخطط التفصيلي للمستطيل. توفر معاملة التعبئة لونًا للجزء الداخلي من المستطيل. يمكنك إلقاء نظرة على المثال الآتي: from tkinter import* window=Tk() canvas=Canvas(bg="teal",width=600,height=400) canvas.pack() canvas.create_rectangle(100,150,400,250,width=3, outline="coral",fill="white") window.mainloop() جرب بنفسك وزارة التعليم Ministry of Education 2024-1446 1 □ X شغل المقطع البرمجي الآتي. ماذا تلاحظ ؟ from tkinter import* window=Tk() canvas=Canvas(bg="teal",width=600, height=400) canvas.pack() canvas.create_rectangle(30,10,120,80,width=5, fill="green") window.mainloop() 144

رسم شكل بيضاوي لرسم شكل بيضاوي على لوحة الرسم القماشية، يمكنك استخدام الدالة الآتية: canvas.create_oval (x1,y1,x2,y2) (x1,y1) يتسع الرسم البيضاوي المرسوم داخل مستطيل المحدد أبعاده من خلال إحداثيات الدالة: (1 ،x1 هي الزاوية اليسرى العلوية للمستطيل. (x2y2 هي الزاوية اليمنى السفلية للمستطيل. (x2,y2) إذا كانت أبعاد هذا المستطيل تشكل مربعًا، فالشكل الذي ستحصل عليه هو دائرة. from tkinter import* window=Tk() canvas=Canvas(bg="teal",width=600,height=300) canvas.pack() canvas.create_oval (50,50, 300, 300, width=3) window.mainloop() وزارة التعل14 Ministry of Education 2024-1446 tk ☐ ×

جرب بنفسك اكتب المقطع البرمجي اللازم لرسم الأشكال الآتية: رسم مضلع المضلع في الهندسة هو عبارة عن شكل مستويتم وصفه بواسطة عدة خطوط مستقيمة متصلة لتشكيل شكل متعدد الأضلاع مغلق. يُطلق على المقاطع ذات الشكل المضلع حوافها أو جوانبها ، والنقاط التي تلتقي فيها الحافتان اسم زوايا المضلع ، كما يُطلق أحيانًا اسم جسم المضلع على الجزء الداخلي منه. يوفر النموذج البرمجي تكينتر دوالًا جاهزة للاستخدام لرسم أشكال أكثر تعقيدًا، مثل المضلعات والأقواس وما إلى ذلك. اكتب مقطعًا برمجيًا لرسم مضلع باستخدام النموذج البرمجي تكينتر. from tkinter import* window=Tk() canvas=Canvas(bg="white",width=300,height=300) canvas.pack() points=[100,80,180,80,220,150,180,220,100,220,60,150], canvas.create_polygon(poits,fill="green") window.mainloop() وزارة التعليم Ministry of Education 2024-1446 tk ☐ X 146

لنطبق معًا تدريب 1 ى نفذ المقطع البرمجي الآتي ثم طابق خصائص النموذج البرمجي تكينتر بالجمل المقابلة from tkinter import* window=Tk() window.title("Graphics Window") canvas=Canvas(bg="cyan", width=300, height=300) canvas.pack() canvas.create_rectangle(70,60,100,150,width=10,fill="green", outline="red") window.title("Graphics Window") canvas=Canvas(bg="cyan") ☐ canvas.create_rectangle outline="red" 1 2 3 4 <+ 5 canvas.pack() 6 fill="green" 7 width=10 وزارة التعلم Ministry of Education 2024-1446 8 اختيار لون خلفية لوحة الرسم القماشية. عرض نافذة الرسومات. تحديد عرض المستطيل. إنشاء مستطيل. تحديد لون الحد. تحديد عنوان للنافذة. تعبئة المستطيل باللون الذي تختاره. أنشئ مثلئًا.

148 تدريب 2 • أنشئ مقطعًا برمجيًا لرسم الأشكال الآتية: تدريب 3 tk ى أنشئ مقطعًا برمجيًا لرسم خطوط ملونة على لوحة رسومية بحيث تتغير الألوان في كل مرة يتم فيها الضغط داخل اللوحة. وزارة التعليم Ministry of Education 2024-1446