صفحة 176 - كتاب المهارات الرقمية - الصف 9 - الفصل 1 - المملكة العربية السعودية

الكتاب: كتاب المهارات الرقمية - الصف 9 - الفصل 1 | المادة: المهارات الرقمية | المرحلة: الصف 9 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

📚 معلومات الصفحة

الكتاب: كتاب المهارات الرقمية - الصف 9 - الفصل 1 | المادة: المهارات الرقمية | المرحلة: الصف 9 | الفصل الدراسي: 1

الدولة: المملكة العربية السعودية | المنهج: المنهج السعودي - وزارة التعليم

نوع المحتوى: درس تعليمي

📝 ملخص الصفحة

📚 التعامل مع إحداثيات الفأرة في Tkinter

المفاهيم الأساسية

الإحداثيات (x, y): قيم رقمية تحدد موقع نقطة على لوحة الرسم (Canvas) في Tkinter. تُطبع عند النقر بزر الفأرة.

خريطة المفاهيم

```markmap

بناء واجهات المستخدم الرسومية (GUI) بلغة بايثون

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

وظيفته

  • يحتوي على نصوص برمجية جاهزة
  • يستخدم لرسم أشكال ورسومات على نافذة

المكون الأساسي: لوحة الرسم (Canvas)

  • منطقة مستطيلة للرسم
  • يمكن وضع رسومات أو نصوص أو عناصر واجهة فيها
#### نظام إحداثيات لوحة الرسم

##### الفرق عن النظام الديكارتي

  • الأصل (0،0) في الزاوية اليسرى العليا
  • إحداثيات x: تزيد باتجاه اليمين (مثل النظام الديكارتي)
  • إحداثيات y: تزيد باتجاه الأسفل (عكس النظام الديكارتي)
##### النموذج الأساسي

  • البكسل
  • الإحداثيات تُعبر عنها كأعداد صحيحة

خطوات إنشاء نافذة الرسم

1. استيراد النموذج

2. إنشاء النافذة الأساسية

3. ضبط لوحة الرسم (الحجم واللون)

4. وضع العناصر على النافذة

#### رسم الخطوط

##### الدالة

  • canvas.create_line(x-start, y-start, x-end, y-end)
##### المعاملات

  • إحداثيات x و y لبداية ونهاية الخط
  • يمكن استخدام عوامل تعيئة وعرض "القلم"
##### أمثلة عملية

###### رسم خطين متقاطعين

  • خط أحمر عريض من (10,10) إلى (100,100)
  • خط ذهبي أقل عرضاً من (10,100) إلى (100,10)
###### رسم خطوط أفقية متعددة باستخدام حلقة

  • إنشاء 10 خطوط برتقالية أفقية
  • عرض الخط يزداد مع كل تكرار (width=i)
  • المسافة بين الخطوط 15 بكسل (i*15)

تحديد الألوان في تيكينتر

الطريقة الأولى: الأسماء المعيارية

  • أبيض، أسود، أحمر، أزرق، أخضر، سماوي، أصفر، أرجواني

الطريقة الثانية: نموذج RGB

  • تحديد اللون باستخدام 3 أرقام تمثل نسب الأحمر والأخضر والأزرق
#### خصائص نموذج RGB

  • كل لون (أحمر، أخضر، أزرق) له قيمة بين 0 و 255
  • مثال: الأحمر = (255,0,0)، الأخضر = (0,255,0)، الأزرق = (0,0,255)

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

ربط الأحداث

  • الصيغة: widget.bind(event, handler)

فئات الأحداث الرئيسية

#### أحداث الفأرة

  • : زر الفأرة الأيسر
  • : الضغط المزدوج على زر الفأرة الأيسر
  • : إدخال مؤشر الفأرة إلى نافذة تيكينتر
  • : إخراج مؤشر الفأرة من نافذة تيكينتر
#### أحداث لوحة المفاتيح

الحصول على إحداثيات الفأرة

#### آلية العمل

  • ربط حدث الفأرة (مثل ``) بدالة معالجة (callback function)
  • تمرير كائن الحدث (event) إلى الدالة
  • استخراج إحداثيات النقطة من `event.x` و `event.y`
#### مثال: طباعة الإحداثيات عند النقر

  • `canvas.bind("", callback)`
  • `def callback(event): print("clicked at", event.x, event.y)`
#### مثال: طباعة الإحداثيات عند النقر المزدوج

  • `canvas.bind("", callback)`
```

نقاط مهمة

  • معرفة إحداثيات النقر على لوحة الرسم مفيدة لرسم الأشكال بدقة.
  • يتم ربط حدث الفأرة (مثل النقر أو النقر المزدوج) بلوحة الرسم باستخدام الدالة `.bind()`.
  • تُمرر إحداثيات النقطة (`event.x`, `event.y`) تلقائياً إلى دالة المعالجة عند وقوع الحدث.
  • يمكن تغيير الحدث المرتبط (من `` إلى ``) لتغيير سلوك البرنامج.

📋 المحتوى المنظم

📖 محتوى تعليمي مفصّل

نوع: محتوى تعليمي

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

نوع: محتوى تعليمي

from tkinter import * window=Tk() def callback(event): print ( ("clicked at", event.x, event.y)) cvas=Canvas(bg="teal",width=400,height=400) cvas.bind("<Button-1>", callback) cvas.pack() window.mainloop()

نوع: محتوى تعليمي

شغل المقطع البرمجي الآتي. ماذا تلاحظ؟

نوع: محتوى تعليمي

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()

🔍 عناصر مرئية

Diagram showing a Python code snippet for Tkinter, a canvas window, and output text indicating coordinates. Arrows connect the code to the canvas and the canvas to the output text.

A teal-colored canvas window with a title bar showing 'Untitled'. Below the canvas, text output shows coordinates of clicks: 'clicked at 171 220', 'clicked at 325 416', 'clicked at 490 390'.

Diagram illustrating a user interacting with a computer. A hand is shown typing on a keyboard, with a laptop screen displaying a pink button labeled 'جرب بنفسك' (Try it yourself). Arrows point from this illustration towards a Python code snippet.

A green canvas window with a title bar showing 'Untitled'. Below the canvas, text output shows coordinates of clicks: 'clicked at', followed by x and y coordinates. The code uses '<Double-Button-1>' for binding.

📄 النص الكامل للصفحة

لرسم شكل باستخدام النموذج البرمجي تيكينتر، سيكون من المفيد معرفة الإحداثيات. في المثال أدناه، عند تشغيل المقطع البرمجي والضغط في النافذة، تظهر رسالة بإحداثيات النقطة التي قمت بضغط زر الفأرة عليها. from tkinter import * window=Tk() def callback(event): print ( ("clicked at", event.x, event.y)) cvas=Canvas(bg="teal",width=400,height=400) cvas.bind("<Button-1>", callback) cvas.pack() window.mainloop() شغل المقطع البرمجي الآتي. ماذا تلاحظ؟ 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() --- VISUAL CONTEXT --- **DIAGRAM**: Untitled Description: Diagram showing a Python code snippet for Tkinter, a canvas window, and output text indicating coordinates. Arrows connect the code to the canvas and the canvas to the output text. Context: Illustrates how Tkinter can capture mouse click coordinates. **CODE_OUTPUT**: Untitled Description: A teal-colored canvas window with a title bar showing 'Untitled'. Below the canvas, text output shows coordinates of clicks: 'clicked at 171 220', 'clicked at 325 416', 'clicked at 490 390'. Context: Shows the output generated by the first Python code example when a user clicks on the canvas. **DIAGRAM**: Untitled Description: Diagram illustrating a user interacting with a computer. A hand is shown typing on a keyboard, with a laptop screen displaying a pink button labeled 'جرب بنفسك' (Try it yourself). Arrows point from this illustration towards a Python code snippet. Context: Encourages the user to try the next example themselves. **CODE_OUTPUT**: Untitled Description: A green canvas window with a title bar showing 'Untitled'. Below the canvas, text output shows coordinates of clicks: 'clicked at', followed by x and y coordinates. The code uses '<Double-Button-1>' for binding. Context: Demonstrates a different mouse event binding ('<Double-Button-1>') in Tkinter and its output.

🎴 بطاقات تعليمية للمراجعة

عدد البطاقات: 3 بطاقة لهذه الصفحة

في مكتبة Tkinter، ما الغرض من الدالة `callback(event)` في المثال البرمجي المعطى؟

  • أ) تغيير لون خلفية نافذة البرنامج.
  • ب) طباعة إحداثيات النقطة (x, y) التي تم النقر عليها في لوحة الرسم (Canvas).
  • ج) إغلاق نافذة البرنامج تلقائياً بعد النقر.
  • د) رسم دائرة في مركز لوحة الرسم.

الإجابة الصحيحة: b

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

الشرح: 1. الدالة `callback(event)` تُعرّف لمعالجة حدث معين (مثل النقر). 2. عند حدوث الحدث، تُمرّر لها كائن `event` يحتوي على معلومات عنه. 3. تقوم الدالة باستخراج خاصيتي `event.x` و `event.y` (الإحداثيات). 4. تطبع هذه الإحداثيات على الشاشة باستخدام `print`.

تلميح: تأمل ما يحدث عند تفعيل حدث معين على لوحة الرسم.

التصنيف: مفهوم جوهري | المستوى: سهل

ما الفرق الرئيسي في ربط الحدث (binding) بين المثالين البرمجيين في الصفحة؟

  • أ) المثال الأول يستخدم لون خلفية أخضر، والثاني يستخدم لون أزرق.
  • ب) المثال الأول يرصد حدث النقر العادي (<Button-1>)، بينما المثال الثاني يرصد حدث النقر المزدوج (<Double-Button-1>).
  • ج) المثال الأول يطبع الإحداثيات في ملف، والثاني يطبعها على الشاشة.
  • د) المثال الأول يعمل مع لوحة ربعية الأبعاد، والثاني يعمل مع لوحة مستطيلة.

الإجابة الصحيحة: b

الإجابة: المثال الأول يرصد حدث النقر العادي (<Button-1>)، بينما المثال الثاني يرصد حدث النقر المزدوج (<Double-Button-1>).

الشرح: 1. في المقطع البرمجي الأول: `cvas.bind("<Button-1>", callback)`. 2. في المقطع البرمجي الثاني: `canvas.bind("<Double-Button-1>", callback)`. 3. `<Button-1>` يعني النقر مرة واحدة بزر الفأرة الأيسر. 4. `<Double-Button-1>` يعني النقر مرتين متتاليتين (نقر مزدوج) بزر الفأرة الأيسر.

تلميح: انظر إلى الوسيط (argument) الذي يُمرّر للدالة `bind` في كل مقطع برمجي.

التصنيف: فرق بين مفهومين | المستوى: متوسط

في سياق برمجة واجهات المستخدم باستخدام Tkinter، ما هي الخطوة التي يتم فيها ربط حدث معين (مثل النقر) بوظيفة معالجة (callback function)؟

  • أ) استخدام الدالة `print()` داخل حلقة `for`.
  • ب) تغيير خاصية `bg` للعنصر مباشرة.
  • ج) استخدام الدالة `bind()` على عنصر واجهة المستخدم (Widget) مثل Canvas.
  • د) كتابة الأمر `window.mainloop()` في بداية البرنامج.

الإجابة الصحيحة: c

الإجابة: استخدام الدالة `bind()` على عنصر واجهة المستخدم (Widget) مثل Canvas.

الشرح: 1. يتم إنشاء عنصر واجهة مستخدم، مثل `Canvas`. 2. تُعرّف دالة لمعالجة الحدث، مثل `callback(event)`. 3. تُستخدم الدالة `bind()` على عنصر واجهة المستخدم. 4. تُمرّر للدالة `bind()` وسيطين: سلسلة نصية تصف الحدث (مثل "<Button-1>")، واسم دالة المعالجة (callback).

تلميح: تأمل الكود الذي يربط بين فعل المستخدم (النقر) والدالة التي ستستجيب لهذا الفعل.

التصنيف: صيغة/خطوات | المستوى: متوسط