في المحاضرة الماضية في آخرها قلنا نبدأ المحاضرة
هذه والمحاضرات القادمة ما تبقى نتكلم عن تصميم ال
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 اسمها Q widget
في نافذة اسمها q widget هذه class انا عشان انشئ
نافذة بحتاج انشئ object من ال class هذه كيف بنشئ
object من ال class بقول له w هذا ايش w اسمه تغير
يسوى q widget بالشكل هذا ايش هذا السطر بعمل بنشئ
object من نوع q widget ايش له q widgetأيش فيها ال
key widget؟ class ايش فيها؟ ماليش داوة هدف ال
object oriented ان احنا نستخدم ال classes بدون ما
نحتاج نفهم ايش فيها code زي بالظبط المحاضرة
الماضية لما استخدمنا ال class rectangle هل لازم
افهم ايش فيها بالظبط؟ لأ بنشي object من rectangle
عشان اتمثل ليه بيانات مستطيل و بحط فيها بيانات طيب
هذا ال key widget تمثل windowالان عشان اعرض ال
window هذه داخل ال class هذا في method اسمها show
كيف بستدعيها بقول و.show تبقى يعني انا هنا انشأت
window وهنا عملت لها show طيب
انا طبعا لو عملت run للبرنامج هذا بالصورة هذه مش
هيشتغل
طبعا يعني هاي جابلة هنا اشتغل و سكر و ماشوفتش حاجة
صح؟ مافيش window بقوللي في سطرين لازم نحطهم دايما
على أساس نقدر نعرض ال window هذه ايش السطرين
هدوله؟ هدول السطرين بقوللي انه فيديوتهم انه لازم
تنشئ object من حاجة اسمها queue applicationيعني
انت ال window هذه لازم تشغّلها من ضمن تطبيق من ضمن
application فبروح بنشأ object أي اسم بسميه مثلا
app يساوي queue application ايش ال queue
application هذه أيضا عبارة عن ايش عبارة عن class
تمام انا انشأت object من queue application طيب
بعدين تحت هنا بعد ما اعمل show ل ال window بقوله
روح لل app و اعمله execute في ال method هذه
شايفينها exec underscore هذه معناه ايش اختصار ل
execute يعني نفذ التطبيق يعني كأنه هنا بروح بنشق
أول حاجة تطبيق بعدين بنشق window و في الآخر بشغل
التطبيقتمام؟ لأن في كل برامجنا اللي هنعملها هذا
السطر اللي فوق و السطر اللي تحت ثابتين ماشي يا
جماعة هنغير وين بس ما بين السطر الأول و السطر
الأخير يعني هنا في مكان السطور اللي معلمة هنشق
window هحط جواها component و هحط جواها buttons و
هحط جواها كل عناصر ال GUI تمام؟ و في الآخر بقوله
نفذ التطبيقيعني هذا ثابت وهذا ثابت نقطة مهمة قبل
ان اكمل شرحي الان هذا ال code اللي احنا بنكتبه مش
هيجي في الامتحان اكتب code لتطبيق GUI لماذا؟ لان
فعليا ال code هذا معتمد على ال librariesأنا مش
معقول أكون حافظ ال libraries كلها و ال libraries
هذه بتتغير و في libraries كتير أصل لل GUI فهذه مش
حفظ لكن ممكن يجي الأسئلة كاختيار متعدد كأتم الفراغ
على أساس أنه اللي جرب و أشتغل في الاختيار المتعدد
بتذكر اللي جرب عليه لكن كحفظ أن أكتب code لأ
لحتى لان في مشكلة يا جماعة اول حاجة بنشي object من
ال Q application واخر سطر بيكون ال object اللي
انشأته اللي هو ال app بقوله execute تمام execute و
هنا بحط ال code تاع انشاء نافذة انشاء button انشاء
label انشاء امور تانية داخل ال GUI نفسه طيب هذا ال
Q application ضايق الحاجة بدي اخد parameter تمام
ايش هو ال parameter هذا اللي هو هلاقيته احكيه
الان في لعبة عندي في البيثول اسمها SIS اختصار لإيش
ل system تمام ال Q application التطبيق اللي بدو
يشتغل عندي ممكن انا يكون عندي إمكانية اني امررله
باراميترز من خلال الكماند زمان لما كانوا يشغلوا
التطبيقات كانوا يفتح شاشة الكماند عارفينها الشاشة
السودة هذه تمام هاي CMD تمام وكان يكتب اسم
البرنامج وممكن يعمل space ويبعت parameters عشان
يبعت parameters يعني لما يشغل التطبيق يبعت معاه
بقيمات معينة تمام زي username و password تمام زي
parameters لازمة لتشغيل التطبيقاللي ممكن تنكتب في
ال command بتيجي في list اسمها argv هذا argv عبارة
عن list موجودة داخل library اسمها sys تمام احنا مش
لازم نفهم كل التفاصيل بس عشان نعرف احنا ايش بنكتب
ان هذا sys.args عبارة عن list تمام فيها ال
parameters اللي تم كتابتهمداخل الـ command ليش على
أساس التطبيق ممكن يستخدم ال parameters هدول انا
لازم اكتبها لأولها لازم عشان يشتغل طيب
يبقى دايما يا جماعة هدول الأسطور اللي هم بده احطهم
انا هالجيت اكتبهم import sys بعدين app يساوي q
application
Sys.argv و تحت في الآخر بقوله app.execute هدولة
ثابتين دايما تمام هذا اللي احنا كتبناه لحد الآن
هذا ثابت في اي برامج احنا هنشتغل عليها تمام ممكن
حتى نعمل copy و paste و نغير وين بس اه هنا هنا
هنكتب البرنامج تبعنا في النص تمام اللي هو ايش يعني
انشق window اعمل داخلها button اعمل جواها label و
هكذاطيب، الان نكتب البرنامج تبعنا، ايش قولنا اول
حاجة بنعملها؟ بنعمل ويندو كيف نعمل ويندو؟ الـQt
library فعليا كل حاجة في الـgraphical user
interface لها class يعني بدك تعمل ويندو، روح انشي
object من الـQ widget بدك
تعمل button، روح انشي object من حاجة اسمها
QPushButton
بتعمل label وانشأ object من الـ Q label بتعمل
field اللي ممكن اكتف فيه كلام يعمل object من الـ Q
line edit
كل مكوّن موجود عند الشاشة مثلًا 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؟ اعمللي يعمل
الشاشة 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 الآن مثلا بنحط لها iconw
.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كيو ايكون والكيو ايكون
ال 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
dot remove او move بقوله
مثلا صفر صفر عشان احطها في الزاوية w dot set
window icon هذا بدها انا قررله object منه او Q
iconقبل ما انا انا بروح بنشق متغير اسمه icon نوعه
Q icon و بمررله هنا اسم ال file وليكن iogaza.jpg و
بعدين بقوله set window icon
وبعدين اخر حاجة بقولوله w dot show عشان يعرض ال
window لان
هاي النافذة هنا عرض ايش ال icon بس بتبين صغيرة
تمام
الان بدنا لسه نشتغل على ويندو بدنا نعمل ال ويندو
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 ال
label ال label ال label ال label ال label
ال label ال label ال label ال label ال label ال
label ال label ال label ال label ال label ال label
ال label ال label ال label ال label ال label ال
label ال label ال label ال label ال label ال label
ال label ال label ال label ال label ال label ال
label ال label ال label ال label ال label ال label
ال label ال label ال label ال label ال label ال
label ال label ال label ال label ال label ال label
ال label ال label ال label ال label ال label ال
label ال label ال label ال label ال label ال label
ال label ال label ال label ال label ال label ال
label ال label ال label ال label ال label ال label
ال label ال label ال label ال label ال label ال
label ال label ال label ال label ال label ال label
ال label ال label ال label ال label ال label ال
label ال label ال label ال label ال
طيب هذا ال reference تباعها هاي ال initializer اول
حاجة بياخد Q widget اللي هو مين ال parent تمام و
بياخد حاجة اسمها window flags او في initializer
تاني بياخد string و بياخد ال parent تمام و بياخد
flagsهدولة طبعا يعني مثلا ال flags لازم امررها ايش
رايكوا لازم نمرر هذه ولا لأ لأ لأن فيها قيمة
مبدئية اللي هي ايش zero تمام و هذه لازم امررها لأ
لأن قيمتها المبدئية none ففعليا احنا ممكن ننشأ
label بدون ان نمررله ولا حاجة لكن الصح ان طالما هو
ال label موجود داخل window من ال window اللي موجود
هو جواها المفروض ال label انحط وينداخل ويندو اللي
هي مين في ال code تبعنا هذا مين بتمثلها ال ويندو
ال W صح لأن انا بال Q label بتعرضه جوا ال W فبين
القصين بتحطله ايش بتحطله ال W تمام ايش هذي ال W
تمثل هنا لو اطلعت على initializer مكتوب هنا ايش
هذي Q widget ال parent يعني انت بدك لما تنشئ ال Q
label بدك تبعتلهفي الـ initializer تبعه أو في الـ
constructor مين ال parent تبعه؟ إيش ال parent تبعه
يعني؟ الحائي اللي بدي يكون موجود فيها تمام؟ اللي
هو مين في مثال هذا؟ ال W طيب هيك اللي عمله هو أنه
أنشأ label وحطه وين؟ جوا ال Wكمبونت الآن احنا
هننشئه سواء كان 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، بياخد حاجة اسمها
queue font، طبعا؟ يعني أنا .. اه يعني بدي أعرف
جابلها إيش؟ أه، queue of متغير، اسمه queue 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 طبعا كيف توزيع
العناصر على الشاشة لكن مبدئيا الان ممكن نروح نقوله
الواحد ونقوله الست Geometry
الست جيومتري هذه تطلب مني اربع قيم ايش الاربع قيم
نقطة يعني انا ال label هذا خليها بس اتأكد انه شغال
خمسين خمسين مية تلاتين اه
تمام خليها هذه
طيب هاد ال 6 جيومتري تطلب مني أربع حاجات الحاجة
الأولى اللي هو من وين بده يبدأ رسم الشيء يعني مثلا
هاي
ال 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 ست
جيومتري زي ما قلنا بتحدد فيها نقطة البداية و جدش
ال width و الheight هنا مثلا في المثال تبعي لو انا
حطيت ست جيومتري زيك و عملت runهيو ال .. ساب خمسين
من هنا أو خمسين من هنا تمام؟ و بده يرسم الشكل لاحظ
أنه جاطعة صح ليش جاطعة؟ لأن هذا عرضه أكتر من
تلاتمية اسم university of Gaza ال text نفسه طويل
بدي أخد أكتر من تلاتمية لكن أنا مادام قلتلي
تلاتمية بلغي إيش كل زيادة و الارتفاع تلاتين أنا
حاطه تمام؟ طبعا ممكن أزيد أو أنجز اللي بديا مثلا
خلي هنا خمسمية و هذا خليه مثلا خمسين
هي جابها كلها لأن في طريقة تانية ممكن اش هسوي ممكن
شوفت ال move بتاعة ال window فيه برضه move لمين لل
label بدي اقوله move 100 100 اش ال move 100 100
يعني بتخلي ال label زي ما هو طوله و عرضه اللي هو
اش الطوله و عرضه ال default تبعه على جد اللي فيه
تمام؟ و بس بتحركه يعني هذه بتغنينا عن تحديد ال
width و ال height تمام؟
ممكن احركه لحال و بعدين اقوله resize على اساس ايش
اغير حجمه يعني اقوله هنا مثلا 550 يعني لاحظوا ان
ال 6 جيومتر بتغنينا على ال 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 بعدين بتحكم في أدداته ست text ست style
sheet ممكن احطله خط تمام
ممكن نستخدم ال label كمان استخدام اخر لعرض الصور
تمام انا مثلا بضحك صورة داخل ال window تمام كيف
نقدر نعرضها لان انا شيلت ايش اتفجر احنا بنستخدم
لها الصور فروحت انشأت q بال label لان لسه ليه q
label فاضي تمام بعدين بقوله الواحد في عليه اسمها
الست
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 يطلع لي نافذة
او يعمللي حاجة جوا الشاشة تقري