في المحاضرة الماضية في آخرها قلنا نبدأ المحاضرة
هذه والمحاضرات القادمة ما تبقى نتكلم عن تصميم ال
graphical user interface في ال python يعني كيف
نعمل برامج لها graphical user interface طبعا كل
اللي أخدناه هنستفيد منه في البرامج لكن الاختلاف
أنه هنضيف عليه graphical user interface تمام أو
نتذكر اللي شفناها المحاضرة الماضية قلنا في الأول
عشان أقدر أبرمج أو أعمل graphical user interface
لازم أضيف ال library اللي هي ال PyQt من
خلال ال PyCharm
فبفتح شاشة ال settings بروح على project
interpreter و بروح بضغط على الزائد و بدور على ال
PyQt تمام و بعدين بقول install package بتطلع عند
ال PyQt هنا طيب الآن خلينا نبدأ شغل في ال
graphical user interface الآن هعمل مثال جديد
الـ PyQt كبيرة و فيها مكتبات كثير في مكتبات
معينة احنا هتلزّمنا الشغل الأساسي للتصميم يعني
بمعنى أنه الآن هعمل أسطر import ال import هذه
يفضل أن أستخدمها في كل البرامج فبدا أقول له from
طيب، إيش اللي سوّيته أنا هنا؟ عملت import، تمام؟ في
عندي داخل الـ PyQt ثلاثة libraries مهمين اللي هم
QtWidgets و QtGUI و
QtCore، تمام؟ هدول الثلاثة عبارة عن libraries
مهمين، فقلت له import دي جمع إيش يعني؟ هات لكل حاجة
موجودين فيهم هدول ثابتين احنا بنحطهم دائماً في
البرامج لأن فيهم المكتبات أو الملفات أو ال classes
الضرورية اللي أنا أستخدمها طيب لأن أنا لما آجي
أصمم user interface أول حاجة بدي أصمم هو ال window
صح ولا نافذة وداخلها أنا بحط ال components إيش
النافذة هذه النافذة فيها عندي class اسمها Qwidget
في نافذة اسمها Qwidget هذه class أنا عشان أنشئ
نافذة بحتاج أنشئ object من ال class هذه كيف بنشئ
object من ال class بقول له w هذا إيش w اسمه تغير
يساوي Qwidget بالشكل هذا إيش هذا السطر بعمل بنشئ
object من نوع Qwidget إيش له Qwidget إيش فيها ال
key widget؟ class إيش فيها؟ ما ليش دخل هدف ال
object oriented أن احنا نستخدم ال classes بدون ما
نحتاج نفهم إيش فيها code زي بالظبط المحاضرة
الماضية لما استخدمنا ال class rectangle هل لازم
أفهم إيش فيها بالظبط؟ لأ بنشي object من rectangle
عشان أتمثل ليه بيانات مستطيل و بحط فيها بيانات طيب
هذا ال key widget يمثل window الآن عشان أعرض ال
window هذه داخل ال class هذا في method اسمها show
كيف بستدعيها بقول w.show تبقى يعني أنا هنا أنشأت
window وهنا عملت لها show طيب
أنا طبعا لو عملت run للبرنامج هذا بالصورة هذه مش
هيشتغل
طبعا يعني هاي جابلة هنا اشتغل و سكر و ما شوفتش حاجة
صح؟ ما فيش window بقول لي في سطرين لازم نحطهم دائماً
على أساس نقدر نعرض ال window هذه إيش السطرين
هدول؟ هدول السطرين بقول لي أن فيديوتهم أن لازم
تنشئ object من حاجة اسمها QApplication يعني
أنت ال window هذه لازم تشغلها من ضمن تطبيق من ضمن
application فبروح بنشئ object أي اسم بسميه مثلا
app يساوي QApplication إيش ال Q
Application هذه أيضاً عبارة عن إيش عبارة عن class
تمام أنا أنشأت object من QApplication طيب
بعدين تحت هنا بعد ما أعمل show ل ال window بقول له
روح لل app و اعمل له execute في ال method هذه
شايفينها exec_ هذه معناها إيش اختصار ل
execute يعني نفذ التطبيق يعني كأنه هنا بروح بنشئ
أول حاجة تطبيق بعدين بنشئ window و في الآخر بشغل
التطبيق تمام؟ لأن في كل برامجنا اللي هنعملها هذا
السطر اللي فوق و السطر اللي تحت ثابتين ماشي يا
جماعة هنغير وين بس ما بين السطر الأول و السطر
الأخير يعني هنا في مكان السطور اللي معلمة هنشئ
window هحط جواها component و هحط جواها buttons و
هحط جواها كل عناصر ال GUI تمام؟ و في الآخر بقول له
نفذ التطبيق يعني هذا ثابت وهذا ثابت نقطة مهمة قبل
أن أكمل شرحي الآن هذا ال code اللي احنا بنكتبه مش
هييجي في الامتحان اكتب code لتطبيق GUI لماذا؟ لأن
فعلياً ال code هذا معتمد على ال libraries أنا مش
معقول أكون حافظ ال libraries كلها و ال libraries
هذه بتتغير و في libraries كثير اصل لل GUI فهذه مش
حفظ لكن ممكن يجي الأسئلة كاختيار متعدد كأتم الفراغ
على أساس أنه اللي جرب و اشتغل في الاختيار المتعدد
بيذكر اللي جرب عليه لكن كحفظ أن أكتب code لأ
لحتى لأن في مشكلة يا جماعة أول حاجة بنشئ object من
ال QApplication وآخر سطر بيكون ال object اللي
أنشأته اللي هو ال app بقول له execute تمام execute و
هنا بحط ال code تاع إنشاء نافذة إنشاء button إنشاء
label إنشاء أمور ثانية داخل ال GUI نفسه طيب هذا ال
QApplication ضايق الحاجة بدي أخد parameter تمام
إيش هو ال parameter هذا اللي هو هلاقيه أحكيه
الآن في لعبة عندي في البيثون اسمها sys اختصار لإيش
ل system تمام ال QApplication التطبيق اللي بدو
يشتغل عندي ممكن أنا يكون عندي إمكانية أني أمرر له
parameters من خلال الكماند زمان لما كانوا يشغلوا
التطبيقات كانوا يفتحوا شاشة الكماند عارفينها الشاشة
السوداء هذه تمام هاي CMD تمام وكان يكتب اسم
البرنامج وممكن يعمل space ويبعت parameters عشان
يبعت parameters يعني لما يشغل التطبيق يبعت معه
بقيمات معينة تمام زي username و password تمام زي
parameters لازمة لتشغيل التطبيقاللي ممكن تنكتب في
ال command بتيجي في list اسمها argv هذا argv عبارة
عن list موجودة داخل library اسمها sys تمام احنا مش
لازم نفهم كل التفاصيل بس عشان نعرف احنا إيش بنكتب
أن هذا sys.argv عبارة عن list تمام فيها ال
parameters اللي تم كتابتها داخل الـ command ليش على
أساس التطبيق ممكن يستخدم ال parameters هدول أنا
لازم أكتبها لأولها لازم عشان يشتغل طيب
يبقى دائماً يا جماعة هدول الأسطر اللي هم بدي أحطهم
أنا هلاّقيتهم أكتبهم import sys بعدين app يساوي Q
Application
sys.argv و تحت في الآخر بقول له app.execute هدول
ثابتين دائماً تمام هذا اللي احنا كتبناه لحد الآن
هذا ثابت في أي برامج احنا هنشتغل عليها تمام ممكن
حتى نعمل copy و paste و نغير وين بس اه هنا هنا
هنكتب البرنامج تبعنا في النص تمام اللي هو إيش يعني
أنشئ window اعمل داخلها button اعمل جواها label و
هكذا طيب، الآن نكتب البرنامج تبعنا، إيش قلنا أول
حاجة بنعملها؟ بنعمل window كيف نعمل window؟ الـQt
library فعلياً كل حاجة في الـgraphical user
interface لها class يعني بدك تعمل window، روح أنشئ
object من الـQwidget بدك
تعمل button، روح أنشئ object من حاجة اسمها
QPushButton
بتعمل label وانشئ object من الـ Qlabel بتعمل
field اللي ممكن اكتف فيه كلام يعمل object من الـ Q
LineEdit
كل مكوّن موجود عند الشاشة مثلًا label, text,
buttons, combo box عارفين ال combo box؟ اللي هو ال
list؟ اللي بضغط عليه بنزل list كل واحدة و كل
component من هدول إله class و مثله و أنا عشان
أنشئ هذا بروح بنشئ object من ال class اللي يقابله
لأن أنا لسه .. اللي جوا هذا مدخلناش فيه أنا أول
حاجة بده أنشئ إيشالويندو وبعدين بنشي اللي جواها
صح ولا ال ويندو هذا عشان انشيها بنشي object من q
widget تمام فبحكي
له w يساوي q widget طيب
زي ال classes احنا لما كنا ننشق class ايش فيه كنا
ننشق جوا ال class functions ماذا سيتنفذ في يدي الـ
functions؟ بعض العملية على الـ class مثلا المحاضرة
الماضية لما أنشأنا rectangle عملنا فيها method
اسمها getArea وظيفتها تعمل شغل تحسب المساحة و
ترجعلها ايضا هذا ال object w لو انا عملت dot هلاجي
عدد كبير من ال functions ماذا يفيده دول ال
functions؟ يتحكموا في ال window اللي انا انشأتها
يعني مثلا في function اسمها show
ماذا يعني show؟ اظهر الويندو فى فانكشن لـ resize
ايش يعني resize؟ حدد حجم الويندو فى show full
screen ايش يعني show full screen؟ اعمللي يعمل
الشاشة full screen set window title ايش يعني set window title؟
حطلي عنوان للويندو set window icon ايش يعني؟ حط
icon للويندو اللي يعني احنا هنا أنشأنا ويندو
وحكينالهShow تمام؟ طيب دعنا الآن نشغل التطبيق هذا
طيب
هيشغل ال window تمام؟ شايفين ال window هذه؟
طبعا هو by default حطيل ال title إيش؟ Python بس
هذا كله ممكن نغيره تمام؟ طيب نرجع لل code تبعنا
نشوف كيف نعمل customization للويندو عشان نغيّر
خصائص الويندو اللي تم إنشائها طبعا كل هذا بدي
أغيره قبل ما أعمل show يعني هنا أنا إنشقت الويندو
نيجي مثلا بقول و set window title عشان ال set
window title بحققنا عنوان لها تمام مثلا first
window النافذة الأولى مثلا w
.resize
يعني حطلها حجم لل ويندو ال resize بتمررله two
parameters width و height مثلا width أربعمية و
height تلاتمية w
.move
ماذا يعني move؟ حركة الويندو الان يعني وين مكان
الويندو بيكون على الشاشة لأن هو by default بيوردها
في النص انا ممكن احطها في الزاوية وين يعني مثلا 00
احدا فيها طبعا تمام XY 00 المفروض يعرضليها في
الزاوية تعالى نشوف الانهذه الويندو هذه الويندو
الأولى عرض ليها في الزاوية و الطول و العرض الويدف
400 و الهايت 300 طبعا فى ميثوذ كتيرة موجودة داخل
ال widget من خلالها بتحكم فيها الويندو احنا مش
هناخدها كلها انا كده بعرفها مش حافظها طبعا لكن انا
لو روحت على جوجل كتبتله Q widget Pi Qt5
Documentation مثلا ممكن أرجع أشوف معلومات على
QWidget Class يعني مثلا أنا كتبت على جوجل اسم
QWidget PyQt5 Documentation وقلت له هات ال class
reference لأن هذا ال document عبارة عن معلومات
بيجيب لي كل ال functions الموجودين داخل ال window
من ضمنها مثلا خلينا نشوف اللي جربناهم الآن
هنعمل بحث هنا هاي
move مثلا تمام بيشرح لي بيقولي move بتاخد point
اللي هي XY هذه في method كتير يعني الفكرة فيها ال
document هذا يعني مثلا كل method بيشرحلي إيش بتسوي
هذه مثلا override window flags عبارة عن set the
window flags for the widget to flags without
telling the window system paint event this event
handler can be reimplemented as a subclass to
receive مش كل حاجة يعني هتفهموها بس المهم أنه
بنتعود على ال style ان احنا نرجع لوصف ال class و
نحاول نفهم ايش ال methods و ايش بتسوي طيب
خلينا نرجع الآن حطينا title لل window عملنا لها
resize عملنا لها move الآن مثلا بنحط لها icon w
.setWindowIcon
هو بيحكيلي تعالى نشوف هذا setWindowIcon ايش بتسوي
.setWindowIcon
من وصف ال function الموجودة في وصف ال class
setWindowIcon بتاخد object منهاQ Icon المفهوم نفسه
تتطلع يا جماعة Set Window Icon تاخد Parameters صح؟
ايش هذا السلف؟ هذا السلف لحاله بتكون جوا ال class
و هذا ال parameter التاني ايش هو؟ ايش مكتوب هنا؟
اه ال Q Icon هيك افهمت انه انا عشان اشغل ال
function هذه لازم امرر لل function هذه حاجة اسمها
ايش؟Q icon ايش هو ال Q icon هذا عبارة عن class
تانية تمثل ال icon اللي بده ينعرض تمام طيب اللي
انا عشان انا بده اشوف ايش ال Q icon هذا بده افتحه
انا شوف كده بده استخدمه لان طبعا يعني اول ما ضغطت
عليك كلمة Q icon فتحلي هذا الملف ايش هو ايش مكتوب
هنا Q icon class reference يعني وصف ال class بتاعة
مينهنا في أول حاجة كتب لي هنا init init init ايش
هدول ال init هدول ال initializer او ال constructor
بتاع ال class يعني انا بده اعرف اول ما انشئ q icon
ايش بده امررله بين القسينمش احنا لما ننشي object
نبعد parameters مرات لما نكون عندى initializer
طبعا هو في عندى initializer كتير من ضمنهم واحد هاي
هذا شايفينه هذا بياخد حاجة اسمها ايش string تمام
ايش مكتوب ال string هنا file file name شايفينها يا
جماعة ولا لأ هذه هنا مكتوب file name انا بدي
استخدم ال initializer هذاعشان انشئ Q icon وامرّله
اسم الملف الملف الصورة اللى بدى استخدمه ك icon بدى
ارجع لها ال code تبعي بدى اقول له هنا set window
icon ومفروض هنا امرّله ال icon ايش بده هنا بالقسين
Q icon قبل ما اعمل set window icon بدى انشئ هنا Q
icon
نسميه مثلا متغير اسمه icon كيو ايكون والكيو ايكون
ال initializer تبقى ايش بياخد اسم الملف تمام ممكن
اسم الملف يكون موجود مثلا على ال C نقطتين مجلد
واحد اتنين تلاتة واسم الصورة تمام انا عند هنا
الصورة حطيتها وين هي شايفينها انا حاطط صورة هنا
اسمها هي iog.jpg
تمام هذه الصورة بدها بيحطها ك icon فأجيت على Q
icon و كتبت iogaza.jpg أنا هنا أنشأت object من مين
يا جماعة من ال class Q icon بعدين بدي بقوله set
window icon و ببعتلها ال icon كيف اتعلمت أنا هذا؟
ادجحت على ال class reference هو اللي فهمني جالي
set window icon بدها object منها Q icon عشان هات
جابلها روحت انشأت ال Q icon دخلت برضه على ال class
reference بتاع ال Q icon عشان افهم ان ال
initializer تبعها بحتاج اسم الملف فبعتله اسم الملف
الموجود هنا اذا الملف موجود في نفس المجلد اللي فيه
ال code بكتب اسم الملف مباشرةإذا الملف موجود في
الـ C أو الـ D بكتب مساره كاملة ماشي يا جماعة نعيد
كتابة الكود على السريع عشان أنشق ويندو بدأ أنشق
object من Q widget الـ
Q widget هذه بنحط الإعدادات تبعتها بنقول Q.set
window titleو بكتب ال title اللي بديه first window
w .resize عشان اتحكم في حجمها اربعمية في تلت مية w
.move او .move بقوله
مثلا صفر صفر عشان احطها في الزاوية w .set
window icon هذا بدها انا قررله object منه او Q
icon قبل ما انا انا بروح بنشق متغير اسمه icon نوعه
Q icon و بمررله هنا اسم ال file وليكن iogaza.jpg و
بعدين بقوله set window icon
وبعدين آخر حاجة بقول له w dot show عشان يعرض ال
window لأن
هي النافذة هنا عرض إيش ال icon بس بتبين صغيرة
تمام
الآن بدنا لسه نشتغل على window بدنا نعمل ال window
full screen و توسيط مثلًا كيف نعملها full screen
عشان نسويها full screen أول حاجة بدنا نجيب حجم
الشاشة بدنا نجيب حجم الشاشة عشان نقول له resize نديله
ال width تاع الشاشة و ال height تاع الشاشة
كيف نجيب حجم الشاشة؟ عشان نجيب حجم الشاشة بقول لي
بدك تنشئ object اسمه QDesktopWidget بدك
تنشئ متغير من نوع QDesktopWidget سمّيه أي اسم هذا
فائدة ال object أنه فيه معلومات على الشاشة بعدين
من ال QDesktopWidget بنفذ function اسمها screen
هذه function اسمها screen إيش بترجع لي؟ بترجع لي
متغير اسمه S مثلًا هذا ال S فيه بيانات الشاشة اللي
هي إيش بيانات الشاشة ال width و ال height لأن باجي
عند ال resize بقول له S.width
و S.height الـ S مش هي بيانات الشاشة هي فيها
بيانات الشاشة يعني أنا بدي أجيب منها بيانات الشاشة
عن طريق width و height مرة ثانية يا جماعة هذا ال
code مش مطلوب حفظه تمام؟ هذه مكتبة تمام؟ أنا جاي
أفرجكم كيف استخدام المكتبة هذه إذا في أسئلة هتيجي
عليها هتيجي كإيش اختيارها متعدد أو أكمل فراغ على
أساس إنه اللي جرب واشتغل لما يشوف الحاجة بتذكرها
بس مش شرط يكون حافظها طبعًا ليش
أنا عملت هذا ال call عشان أجيب حجم الشاشة و أعمل
ال window و أجد الشاشة كلها فقلت له أنشئ له object
من ال QDesktop widget و من هذا ال object قلت له dot
screen عشان يجيب لي بيانات الشاشة ك object جديد
اسمه S الـ S هذا بقول له S dot width dot height
بيجيب لي عرض و طول الشاشة و هدول بابعتهم ل method
resize في حد عنده سؤال يا جماعة لحد الآن؟ في ال S،
تمام؟ يعني فعليًا هذا ال dot screen ال method نفسها
بترجع object جديد تمام؟
من الأساس جبت ال wind through ال height طيب
هي شايفين إن ال wind سارت على جد الشاشة ماشي
يا جماعة
الآن شوفنا كيف نعمل شاشة و نحدد خياراتها خصائصها
خلينا نشوف حاجة ثانية برضه افرض أنا بدي أغير في
إعدادات الشاشة نفسها مثلًا ال background بتاعتي
طبعًا كيف نعملها ال python فيها حاجة كويسة إنه
بيقول لي عشان أنت تغير في إعدادات أي GUI item إيش
يعني كلمة GUI item يعني window label button طبعًا
ممكن تعملها باستخدام ال CSS طبعًا أنتو أخدتوا CSS
صح ولا؟ طبعًا بيقولوا ممكن تغير إعدادات أي شيء في
الشاشة باستخدام ال CSS كيف؟ في ال window رفسها
فيها حاجة حاجة اسمها set style sheet شايفينها set
style sheet معروف
style sheet هي ال CSS طبعًا cascading style sheet
هي ال CSS
هنا أنا طبعًا مش بكتب ملف CSS زي اللي بتكتبه في ال
web أنتو بتاخدوا أخدتوا CSS صح؟ بكتب بعض الخصائص
منها مثلًا أنا بدي أتحكم في ال background تمام؟ في
خاصية اسمها background color تمام؟ بقول له
background
color مش هيك خاصية و بعدين بعمل نقطتين و بكتب
القيمة اللي هي بعمل زي هيك بكتب مثلًا ff0000 هذا لو
كان hexa صح ممكن أقول له اللي في ألوان إلها أسماء
RGB و بحط بقسين الأرقام موجودة أو بقول له الإسم لو
كان لون معروف زي red مثلًا إذا
بدي أضيف خاصية ثانية بعمل نقطتين و بكمل خاصية جديدة
تمام مثلًا color هذا للون الخط الموجود نقطتين و بحط
مثلًا blue نقطتين تمام يعني بكمل ورا بعض طبعًا
هو ما فيش نص عشان يحط blue بس ال background حطها
red تمام
طيب، الآن شوفنا تصميم ال window، بدنا ندخل وين؟ في
تصميم الحاجات اللي جوا ال window طبعًا احنا حتى
الآن بنصمم ب code كمان شوية أو كمان محاضرتين تلاتة
هنسي نصمم باستخدام ال queue designer شوف طول
بيعمل drag and drop واحد يقول طب ليش أنت مغلبناه
بعد ال code؟ ما تبدأ على طول من drag and drop عشان
لما نعمل drag and drop و نطلع code هتلاقوا فيه 100
سطر في الملف مش هتفهموه لكن هيك الواحد بياخد فكرة
كيف ال .. ال GUI بتصمم وبعد ما نفهم إيش كل حاجة
معناها بنروح نعمل drag and drop عشان نسهل علينا و
يطلعنا ملف جاهز طب نيجي الآن ندخل في إيش؟ في
الحاجات الجوا ال window اللي هي مثلًا بتعمل label
بتعمل button بتعمل حاجة لل edit اكتب نص تمام خلينا
نعمل ملف جديد كمثال ثاني example two
وخلينا على السريع نعيد كتابة إيش اللي كتبناها قبل
شوية من باب إيش التكرار بعلم الشطار تمام from pyqt5
.qcoreimport
from pyqt5
.qtwidgetimport
from pyqt5
.qcoreimport
طيب يا جماعة الآن أول حالة بنستخدمها أو أول
component بننشئ جوا ال window اللي هو ال label إيش
هو ال label فائدته؟ لعرض نص أو صورة يعني مثلًا أنتو
في أي نافذة بتلاقوا فيها كلام مثلًا username تمام
هذا الكلام بيكون موجود جوا حاجة اسمها label تمام
أو أي مثلًا هنا في عنوان للبرنامج أو كده هذا اسمه
label أي نص بنحط جوا ال window بكون عبارة عن من
نوع label label بيختلف عن اللي أنا بكتبه المربع
الكتابة هذا بيختلف احنا بنحكي عن إيش عن النص اللي
بقدرش أغيره هذا بنسميه label ال label هذا ممكن
نعرض فيه نص و ممكن نعرض فيه صورة زي ما هنشوف الآن
اللي أنا أنشأت ال window
قبل ما أعمل show بده ينشئ ال label بعمل متغير طبعًا
ال label برضه إلها class إيش اسمها ال label ال
QLabel QLabel QLabel QLabel QLabel
QLabel QLabel QLabel QLabel QLabel QLabel
QLabel QLabel QLabel QLabel
طيب هذا ال reference تبعها هاي ال initializer أول
حاجة بياخد Q widget اللي هو مين ال parent تمام و
بياخد حاجة اسمها window flags أو في initializer
ثاني بياخد string و بياخد ال parent تمام و بياخد
flags هدول طبعًا يعني مثلًا ال flags لازم أمررها إيش
رأيكم لازم نمرر هذه ولا لأ لأ لأن فيها قيمة
مبدئية اللي هي إيش zero تمام و هذه لازم أمررها لأ
لأن قيمتها المبدئية none ففعليًا احنا ممكن ننشئ
label بدون أن نمرر له ولا حاجة لكن الصح إن طالما هو
ال label موجود داخل window من ال window اللي موجود
هو جواها المفروض ال label انحط وين داخل ال window اللي
هي مين في ال code تبعنا هذا مين بتمثلها ال window
ال W صح لأن أنا بال Q label بتعرضه جوا ال W فبين
القصين بتحط له إيش بتحط له ال W تمام إيش هذه ال W
تمثل هنا لو طلعت على initializer مكتوب هنا إيش
هذه Q widget ال parent يعني أنت بدك لما تنشئ ال Q
label بدك تبعت له في ال initializer تبعه أو في ال
constructor مين الـ parent تبعه؟ إيش الـ parent تبعه
يعني؟ الحاوية اللي بدي يكون موجود فيها تمام؟ اللي
هو مين في مثال هذا؟ الـ W طيب هيك اللي عمله هو أنه
أنشأ label وحطه وين؟ جوا الـ W Component الآن احنا
هننشئه سواء كان label سواء كان combo box سواء كان
edit line هذا سواء .. أي .. أي component هعمله
دايماً همرله في الـ initializer إيش؟ w عشان أي حاجة
ينشئها يحطها جوا الـ window طبعاً؟ طيب الواحد الآن
زي الـ .. الـ widget الـ label برضه له إيش؟
parameters كتير بدنا أول حاجة نحطله نص set text
بحطله النص البديه مثلاً islamic university التنسيق
تبعه التنسيق ممكن أعمله بالـ style sheet الواحد dot
ست style sheet
مثلاً بدنا أول حاجة لون الخلفية بتاعته background
color
نقول له مثلاً blue فاصلة لون الخط color بدنا يهارد
بدنا حجم الخط font size
يستوي مثلاً 24PX
طيب
خلينا نشوف إيش صار عنا هنا طيب
طبعاً الخط مش واضح عشانه إيش أزرق على أحمر
يعني هاد أعمله هو by default بياخد اللون الرمادي
الخلفية بتاعة الـ تمام
هاي أنشأ إيش الـ label وزي ما قلت بتحكم فيه زي ما
أنا بدي من خلال الـ style sheet
تمام الـ background بتاعة الشاشة غير الـ background
بتاعة الـ label تمام حتى أنا هنا في المثال الجديد
ماحطتش الـ background تمام يعني في المثال الأولاني
الـ code الأولاني كنت حاطب background للشاشة لكن
إذا أنا عملت background لـ الحاجة اللي جوا الشاشة
اللي جوا بتلغي الـ .. أو الحاجة اللي جوا بتاخد
الإعدادات الخاصة فيها تمام زي في الـ style sheet
برضه في الـ style sheet إذا قمت بعمل style sheet
عام وبعدين قمت بعمل style sheet خاص لجزء من
الصفحة الخاص بغلب العام تمام هذا نفس الحاجة طيب
ممكن في الـ label نفسه في حاجة اسمها width و height
هو طبعاً by default بياخد حجم النص الموجود فيه
في حاجة اسمها set font، شايفين font؟ هي set font،
إيش بتاخد الـ set font هذه؟ الـ self بقى دي مفروض
منها، دي معمولة من ضمن الـ class، بياخد حاجة اسمها
Q Font، طبعاً؟ يعني أنا .. آه يعني بدي أعرف
جابلها إيش؟ آه، Q of متغير، اسمه Q of من
نوع
الـ Q Font طبعاً أنا أنا بغير الخط ممكن من خلال إيش
الـ style sheet بس هذا طريقة تانية لتغيير الخط
الأسهل طبعاً إيش الـ style sheet طريقة تانية بقول
أنشئ في الأول object من نوع الـ Q Font طب إيش الـ Q
Font فيه جوا تعالوا نتطلع على إيش على وصف الـ class
طب هاي الـ Q Font بيقول له؟ بياخد أول حد ممكن
ما ياخدش حاجة وممكن ياخد اسم الخط هاي الـ Q String
Family إيش الـ family بتاعة الخط نوع الخط يعني
point size اللي هو حجم الخط و الـ weight اللي هو
باعتمد إيش الـ weight الـ text weight في الـ CSS كانت
على الـ bold صح ولا؟ هاد نفس الحاجة طب أنا ممكن
أتحكم في الـ bold من الـ CSS برضه اللي هي text weight
صح؟ مش أخذتوها text weight بتحكم في .. آه و ممكن
أجي من هنا أنشأ Q-Font أبعتله أقوله مثلاً Helvetica
نوع الخط مثلاً أو Ariel أو Times New Roman هذه
أنواع الخطوط الـ weight تبعه الـ point point size
حجم الخط مثلاً 24 تمام و الـ weight خليها 100 إيش
يعني أكثر حاجة بولد وبعدين باجي هنا بقوله set font
بحطله QF طبعاً
اللي أعمل الـ style sheet مدام أنا عملت الـ font تحت
ممكن أشيله من هنا طبعاً
هيغير الخط عن اللي كان موجود قبل
طيب ممكن أستخدم الـ label نفسه كمان؟ طبعاً احنا فيه
حاجات لسه ما أخذناهاش، يعني مثلاً الـ label اللي أنشأه
حط مباشرة وين؟ ع الـ .. ع الزاوية تاعة الـ window،
صح؟ طب كيف بدي أحركه؟ كيف بدي أجيبه مثلاً هنا؟ أو
Center طبعاً احنا تحديد المكان هنشوفه قدام المحاضرة
الجاية لما نأخذ حاجة اسمها Layouts طبعاً كيف توزيع
العناصر على الشاشة لكن مبدئياً الآن ممكن نروح نقوله
الواحد ونقوله الـ set Geometry
الـ set Geometry هذه تطلب مني أربع قيم إيش الأربعة قيم
نقطة يعني أنا الـ label هذا خليها بس أتأكد أنه شغال
خمسين خمسين مية تلاتين آه
تمام خليها هذه
طيب هاد الـ set Geometry تطلب مني أربع حاجات الحاجة
الأولى اللي هو من وين بده يبدأ رسم الشيء يعني مثلاً
هاي
الـ window زي ما قلنا احنا أول ما نضيف هالـ label
لحاله هيحطليها وين في الزاوية إلا لو أنا غيرت
مكانها كيف بغير مكانها؟ عن طريق method اسمها set
geometry set geometry بتاخد تلت أربع حاجات الحاجة
الأولى أول اتنين في الحاجة في الأربع دولة يبقوا عن
نقطة البداية تمام نقطة بداية الرسم يعني مثلاً الـ
label بقوله خمسين خمسين هيروح على الـ .. ايه اعمل
خمسين pixel width وخمسين pixel height وابدأ الرسم
من وين؟ من هنا هذه هي الخمسين خمسين القيمتين اللي
بعد هيك اللي هم الـ width و الـ height ماشي أنا هبدأ
أرسم لك من هنا جدش بدك أعملك الطول و العرض بتاعنا
فقوله أنا الـ width خليه تلاتمية و الـ height إيش
تلاتين
واضحة إيش يعني خمسين خمسين تلاتمية تلاتين آه يعني
نقطة بداية الرسم هي أول two parameters وبعدين الـ
parameters اتنين أو آخر اتنين هم عبارة عن الـ width
و الـ height بتاعة الشكل اللي أنا بدأ أرسم هاي
هم هدول هو
الـ set geometry لازم تأخذ الأربعة هدول خلّيني أجرب
هالحاجة لو قلنا له 50 50 set
جيومتري زي ما قلنا بتحدد فيها نقطة البداية و جدش
الـ width و الـ height هنا مثلاً في المثال تبعي لو أنا
حطيت set geometry زيك و عملت run هيو الـ .. ساب خمسين
من هنا أو خمسين من هنا تمام؟ و بده يرسم الشكل لاحظ
أنه جاطعة صح ليش جاطعة؟ لأن هذا عرضه أكثر من
تلاتمية اسم university of Gaza الـ text نفسه طويل
بدي آخذ أكثر من تلاتمية لكن أنا مادام قلت لي
تلاتمية بلغي إيش كل زيادة و الارتفاع تلاتين أنا
حاطه تمام؟ طبعاً ممكن أزيد أو أنجز اللي بدي آ مثلاً
خلي هنا خمسمية و هذا خليه مثلاً خمسين
هي جابها كلها لأن في طريقة تانية ممكن أش هسوي ممكن
شوفت الـ move بتاعة الـ window فيه برضه move لمين للـ
label بدي أقوله move 100 100 إيش الـ move 100 100
يعني بتخلي الـ label زي ما هو طوله و عرضه اللي هو
إيش الطول و عرضه الـ default تبعه على جد اللي فيه
تمام؟ و بس بتحركه يعني هذه بتغنينا عن تحديد الـ
width و الـ height تمام؟
ممكن أحركه لحال وبعدين أقوله resize على أساس إيش
أغير حجمه يعني أقوله هنا مثلاً 550 يعني لاحظوا أن
الـ set Geometry بتغنينا على الـ main تكافئ الاتنين هدول
مع بعض تمام؟ move و resize هما نفسهم بتحددهم set
geometry تمام؟ وهكذا ممكن أنا أش أعمل أحرك كل
عنصر في الشاشة كيف
نحط الحاجة في النص؟ إيش رأيكم تفكروا معايا كيف نحطها
في النص؟ مجربتهاش
بس ما .. ماظنّ مش تظبط، لأن بنجيب أبعاد الشاشة شوفنا
كيف بنجيبها؟ و بنقسم الـ width على 2 و بنقول له حطّ الـ
move الـ width على 2 و الـ height على 2 هيحطّ اللي هي
هوينّ فرص الشاشة، جرّبوها لحالكم، هذين مش احنا جبنا
.. فرجلناهم كيف نجيب أبعاد الشاشة، لكن طبعاً احنا
هنشوف طريقة أفضل لترتيب العناصر على الشاشة هذه.
الطريقة اللي هي set geometry و move لا يحبّ
تستخدمها كثير، ليش؟ من يفكّر يقولنا ليش؟ الآن الـ
resolution بتاع الشاشة من جهاز لجهاز بختلف، صح ولا؟
افرض أنا قلت له حطّ اللي عمود في الـ pixel ألف ألفين
ألفين، تمام؟ الآن أنا لو مستخدم resolution صغير
ألفين ألفين بتطلع برّة الشاشة، أنتم معايا ولا لأ يا
جماعة؟ تمام؟ لكن لو مستخدم resolution عالي، أه
بتطلع ألفين ألفين ممكن تطلع في نصّ الشاشة مثلاً، أنا
كوني بأعتمد على الـ pixel عشان أُحدّد مكان العنصر
عادة فكرة مش مقبولة كثير، واضحة، هنشوف طريقة أفضل
لترتيب العناصر، بعدين طيّب
الـ label بسيط نوعاً ما، بس أنه أنا بعطيه، بننشئ
object من الـ Q label وببعت له الـ parent اللي هي الـ
window، بعدين بتحكّم في أدواته، set text، set style
sheet، ممكن أحطّ له خطّ، تمام
ممكن نستخدم الـ label كمان استخدام آخر لعرض الصور
تمام، أنا مثلاً بُضع صورة داخل الـ window، تمام، كيف
نقدر نعرضها؟ لأن أنا شيلت ايش، اتفجر، احنا بنستخدم
لها الصور، فرحت أنشأت q بالـ label لأن لسه ليه q
label فاضي، تمام، بعدين بقول له الواحد في عليه اسمها
الـ set
Pixel Map هي
الصورة
و ليس الصورة عبارة عن ماب و نقاط، طيّب هذه الـ method
ايش طلبت مني؟ هي بين قوسين QPixMap، ايش مفهوم من هذا
الكلام؟ أنه قبلها بدّي أنشئ object من نوع qpixmap
طبعاً، طيّب قبل هذه السطر بدّي أروح أقول له مثلاً
image 1 يساوي qpixmap
جيت لي حاجة ثانية، طيّب قبل qpixmap بدّي أعرف ايش الـ
constructor بياخد، طبعاً بدّي آخذ النصّ هذا وأروح على
جوجل
وأقول له qpxmap.pyqt5 documentation وبقول له هاي
الـ reference تبعها لأنّ
من ضمن الـ initializers بتاعونها الـ qpxmap بياخد
object هذا الـ string شايفينه؟ file name هذا ايش
معناه؟ معناه أنّ أنا ممكن أنشئ صورة بتمرير اسم
الملف، فورمات هذه أنا ما بعرفش ايش هي، ما جربتهاش طبعاً
طيّب
هنا بدّه أبعث الـ file name اللي هو ولد تاكن مثلاً
الي ايوجازا مش
الـ link يعني .jpg، تمام، هذا اسم ملف الصورة، ولو اندي
زي ما قلنا في ملف على الجهاز، بقول الـ C نقطتين
Slash بحطّ اسم المجلد وبجيب الصورة من المكان اللي
هي موجودة فيه، طيّب
أنشأنا الـ cubics map، ايش بعمل بعدين؟ هذا الـ object
بحطّه هنا image 1
بس هي أنشأت label اللي حطيته جوا الـ window، صحّ، أنا
بعدت الـ parent، أنشأت صورة وحطّيت الصورة للـ label، و
بعدين عملت show للـ window، تعالَ نعمل run الآن، تمام
هي عرض الصورة، تمام، ونفس الشيء ممكن أروح أعمل move
للصورة عشان أحركها، هي move مثلاً 100 100
طبعاً هاي حركة الصورة، بدّنا نّصغّر الصورة شويّة، طبعاً لأ
شوفوا هالجيل، لو عملنا resize هيأكل من الصورة يعني
الواحد، الـ three size مثلاً ثلاثمية ثلاثمية، طبعاً
شايفين كيف؟ ضيّع الصورة، الآن أنا أوّل حاجة بجيب
الصورة، طيّب خلّيني أجرب هالحاجة، طيّب
أوّل حاجة جبت الصورة هنا، بعدين بحكّي له image 1
طيّب هيك صغّرها، طبعاً معايا هنا ايش .. ايش سويت عشان
أنا أصغّر الصورة؟ روحت على الـ .. الـ image واحد، طبعاً
هذه الـ image واحد بتكون الصورة الأصلية بحجمها
الطبيعي، بدّي أعمل لها scaling، ايش يعني scaling؟ تحجيم
للصورة، روحت لـ image واحد قلت له dot scaled، تمام، هذه
function موجودة في الـ class ايش cube pixmap، ايش
بتاخد هذه الـ skill؟ بتاخد الحجم الجديد اللي أنا
بدّي إياه، قلت له خلّي لي حجمها قد ايش؟ ثلاثمية ثلاثمية
.. تمام؟ وبعدين في خيار ثالث .. اللي كان في
التحجيم، ممكن أقول له keep aspect ratio .. تمام؟ أو
..
أو ممكن أبقى tunnel مثلاً، أنّه ما يحفظش عن نسبة، بسّ
أنا لو حطيته cutie keep aspect ratio ايش
هي الـ ratio؟ ايش الـ aspect ratio؟ نسبة بين الطول و
العرض اللي أنا الصورة، يعني ممكن تكون العرض تبعها
أكثر من الطول، تمام؟ أنا قلت له صغّرها على 300 300
معناه يغيّر الطول والعرض، يعني هذه الصورة مثلاً كانت
زي هيك، أنا لو قلت له 300 300 مفروض يصغّر العرض، صحّ؟
والطول يصيروا جاّت بعض يصيروا 300، فالصورة ممكن
تنغسل فيها تشويه نوع عامّة keep aspect ratio، صحيح
أنا قلت له 300 300، بس لما ييجي يصغّرها، لو كانت
الصورة على شكل مستطيل، هيخليها بالشكل هذا يعني
العرض بيخليه على قدّ المطلوب 300، بسّ الطول ممكن
يخليه أقلّ عشان يحافظ على نسبة الطول والعرض عشان
ما يفيرش فيه تشويه على الصورة، تمام؟ هذا معناه الـ
keep aspect ratio
طبعاً لو ما مرّرتوش خلاص بضغط الصورة، هيك بيحافظ على
نسبة الفرق بين الطول والعرض، طبعاً هذه الصورة مربعة
فمش هيميز أو مش هيبين فيها كثير اللي هاد، المهم هذه
الـ .. الـ scaled هذه function، تمام، بترجّع حاجة ايش
بترجّع؟ ايش رأيكم؟ رجعت qpx map جديد، يعني الـ qpx
map الأولى اللي هي image واحد بغطّها عملت لها scale
ورجعت لـ image 2 اللي هي q pixmap ثاني وهي هذه
اللي مرّرتها لمين؟ لـ set pixmap، تمام؟
الآن شفنا الـ label تفاصيله
كيف نقرأه بـ text و image، نبدأ بشيء جديد اللي هو الـ
button، الـ button له تطبيقات كثير، خَلّى
الـ label موجود، بدنا نقرأ بجانبه button، الـ button
له تطبيقات كثير، لأنّ أيّ action بدنا نطلب من الـ user
يعملّه بدنا نحطّ له button
الـ Button شويّة مختلف عن الـ label، لأنّ الـ label مش
interactive، الـ label فقط للعرض، طيّب الـ button كيف
ننشئ button زي ما ننشئ label تماماً، تمام، بعمل مثلاً
متغيّر، أيّ متغيّر اسمه B1 يساوي Q Q
push push button، تمام، Q push button، ونفس الشيء بحطّ
له الـ parent main الـ window، تادي، الآن بدّي أغيّر
خصائص البطون، مثلاً نكتب فيه كلام click here مثلاً
بقول بي واحد dot set text click here، بي
واحد setstyle sheet، نقول له مثلاً background color
أعمل له white color
لون الخطّ red font
size 24pt
وغيره من الخصائص
تعالَ نشوف، طبعاً عشان نبعده عن الصورة شويّة نقول له بي
واحد dot move، خليه مثلاً ستمية ثلاثمية
ما ننساش
أنّه دائماً الـ show بنحطّها في الآخر، الآن
هاي الـ button تبعي، طبعاً بسّ لسه طبعاً ما في شيء
اكشن دي البارك، لو شو حطيته فوق هنا مش
هطلع الـ battle عندي
طيّب كيف نعمل action على الـ button؟ لأنّ أنا بتضغط
على الـ button بدّه ينفّذ لشيء معيّن، مش هيك بيصير في
البرامج طيب يبني جلال الـ button لأ مافيش فيها set
action هذه مختلفة شوية طبعا لأ كويس الواحد يحاول
يستمتش ايش الـ .. طبعا طيب في عندي حاجة اسمها
clicked طبعا و dot
لكن دعوني أريكم كيف تعملها بشكل صحيح أول شيء
سنفعله هو نعمل function قبل أن نشفر على الـ action
نعمل function في الخارج على أساس أنه عند ضغط الـ
button تتنفذ الـ function هذه تمام؟ فانتقلت إلى
الـ code فوق، فوق على الآخر تمام؟ قبل أن يبدأ ال
application، سأعمل الـ function تمام؟ ديف سمتها،
ماذا نسميها؟ do something
ماذا سأجعلها تفعل الآن؟ ستجعلها تقوم بـ Print
Hello هذا بس طبع الـ print و أنا هيتطبع مش في الـ
window هيتطبع لهنا في الشاشة هذه تمام؟ كيف نعمل
شاشة على الـ window هنشوف في المحاضرة اللي جاي بس
احنا هرجعنا نتأكد أول حاجة ايش؟ ان الزر نضغط بعدين
ربنا بحلها بنشوف الحاجات التانية هذا الـ method do
something بدنا بس نضغط على الـ button نستدعي الـ
function هذه
طب بعد ما عملت الـ function الآن بسوي التالي بجعل
الـ button بواحد dot ايش الـ action اللي بديها اللي
هو clicked بعمل dot تمام و بقوله connect يساوي do
something من غير أظن أقوات
b1.clicked.connect يساوي do something الان هذا ايش
معناه السطر هذا الان في متغير اسمه connect تمام
هذا المتغير قلتله انه لو صار فيه click على الـ
button تمام حط فيه do something معناه انه لو انضغط
الـ button استدعيلي do something مرة تانية بعمل بيه
واحد اسم البطون بعدين اسم الـ action اللي انا بديها
يعني الـ action طبعا مختلفة مثلا في عندي mouse او
في عندي action اسمه release mouse ايش هي release
mouse C بالـ mouse على البطون مثلا تمام انا الـ
event اللي اختارته ايش clicked
مش clicked زي هيك لأن لو صار في clicked اعمل
connect وبعدين أحط يساوي وبعدين أكتب اسم الـ
function اللي بدي جيها تتنفذ لو الـ button صار له
click اللي هي بدي أسميها do something أنا سميتها
بتكتبها بدون قوسين تمام؟ لأن تعالي نعمل run لسه في
مشكلة هنا
أنا أظن أن هي do something طيب
هذه الصيغة صحيحة أنا علشان كنت غلطان أن أنا في
الأول بعدين بقوله clicked
وبعدين بقول له connect و بفتح قوس و بكتب اسم الـ
function اللي بده هتتنفذ لو أنا ضغط على الـ button
بقول له do something
عشان
نتأكد أن هذا بتنفذ بدي بقى أعمل run و
لما اضغط على الـ button هي هتطبع ليه هيطلع لي hello
في الـ command هيك معناه أن أنا اتأكدت أن فعلا الـ
action اتنفذ على الـ button المحاضرة الجاية هنشوف
كيف احنا مثلا لما نضغط على الـ button يطلع لي نافذة
أو يعمل لي حاجة جوا الشاشة تقري