عملي -2- برمجة الواجهة الرسومية

في هذا القسم ...

"إضافة التعليمات البرمجية code للواجهة " "توليد البيانات للرسم plot" "برمجة القائمة المنسدلة pop-up menu" "برمجة أزرار الضغط push buttons" "فتح وتشغيل الواجهة الرسومية GUI "

في الجزء السابق من هذا التمرين،قمنا بتصميم الواجهة الرسومية بإستخدام الأداة guide ،وإضافة المكونات اللازمة للواجهة ،والآن سننتقل إلى الجزء البرمجي ..

إضافة التعليمات البرمجية إلى الواجهة الرسومية البسيطة التي قمنا بإنشائها بإستخدام GUIDE:

عندما قمت بحفظ واجهتك الرسومية GUI في الخطوة السابقة،GUIDE قام بتوليد ملفين :
FIG-file:  simple_gui.fig والذي يحوي مخطط (تصميم) الواجهة الرسومية.
والملف simple_gui.m الذي يحوي التعليمات البرمجية code التي تضبط سلوك الواجهة الرسومية.

هذا الكود code الذي تم توليده تلقائياً يتضمن مجموعة من التوابع MATLAB functions (هذه التوابع ليس المقصود بهاأنهاهي الـscript )،لكن الواجهة الرسومية لاتستجيب لأن هذه التوابع لاتحوي بعد العبارات البرمجية التي ستؤدي إلى فعل ما،وهذا ماسنقوم به الآن وهو برمجة الواجهة الرسومية.

 توليد البيانات للرسم plot :

نريد الآن أن نعرف كيف سنقوم بتوليد البيانات للرسم عندما يضغطالمستخدم على زر الضغط.

    1- بداية إنظر إلى تابع الإفتتاح opening function  في المحرر editor ،إذا كان الملف البرمجي للواجهة لم يفتح بعد في المحرر،إفتحه وذلك بإختيار Editor من القائمة GUIDE View، في المحرر editor إنقر على الايقونة Go To الموجودة في لوحة الأدوات،ثم قم بإختيار تابع الإفتتاح simple_gui_OpeningFcn  من القائمة المنسدلة .

المؤشر سينتقل ليشير إلى تابع الإفتتاح،الذي يحوي هذا الكود:

% --- Executes just before simple_gui is made visible.

function simple_gui_OpeningFcn(hObject, eventdata, handles, varargin)

% This function has no output args, see OutputFcn.

% hObject    handle to figure

% eventdata  reserved - to be defined in a future version of MATLAB

% handles    structure with handles and user data (see GUIDATA)

% varargin   command line arguments to simple_gui (see VARARGIN)

% Choose default command line output for simple_gui

handles.output = hObject;

% Update handles structure

guidata(hObject, handles);

% UIWAIT makes simple_gui wait for user response (see UIRESUME)

% uiwait(handles.figure1);

2-   لتوليد بيانات الواجهة الرسومية للرسم،أضف الكود التالي مباشرة بعد هذا التعليق

% varargin   command line arguments to simple_gui (see VARARGIN)

الموجود في تابع الإفتتاح :

% varargin   command line arguments to simple_gui (see VARARGIN)

%Creat the data to plot

handles.peaks=peaks(35);

handles.membrane=membrane;

[x,y]=meshgrid(-8:.5:8);

r=sqrt(x.^2+y.^2)+eps;

sinc=sin(r)./r;

handles.sinc=sinc;

%Set the current data value.

handles.current_data=handles.peaks;

surf(handles.current_data)

الأسطر التنفيذية الستة الأولى تقوم بتوليد البيانات بإستخدام توابع الماتلاب وهي : peaks,membrane and sinc .

هذه البيانات يتم تخزينها في بنية الـ handles ،الوسيط يزوّد لكل الإستدعاءات. إستدعاءات من زر الضغط تستطيع إستعادة البيانات من هذه البنية handles structure .

اما آخر سطرين من الكود السابق فهي لتوليد البيانات الحالية وجمعها peaks، ثم عرض السطح الذي يمثل رسم peaks .

الشكل التالي يبين النافذة التي ستظهر عند تنفيذ الكود السابق.

برمجة القائمة المنسدلة pop-up menu :

القائمة المنسدلة تتيح للمستخدم أن يختار البيانات التي يود رسمها، عندما يقوم المستخدم بإختيار واحدة من الخيارات الثلاث للرسم،برنامج الماتلاب سيضع القيمة التي إخترتها في خاصية القيمة Value property (النص الذي يبدو لك قبل أن تضغط على القائمة).

عند إستدعاء القائمة المنسدلة،هذا الإستدعاء سيقرأ قيمة Value property ليحدد العنصر الذي تعرضه القائمة حالياً،ويضبط handles.current_data وفقاً لذلك.

1-   قم بإستدعاء القائمة المنسدلة pop-up menu من المحرر editor  ،وذلك بالنقر بزر الفأرة الأيمن على عنصر القائمة الموجود في محرر التخطيط  GUIDE،ثم إختر View Callbacks من القائمة المنسدلة،ثم إختر Callback.

إذا كان المحرر editor لم يُفتَح بعد،guide سيفتحه لترى الملف البرمجي لواجهتك code file ،والمؤشر سيتحرك ليشير إلى إستدعاء pop- menu callback ،الذي يحوي الكود التالي:

% --- Executes on selection change in popupmenu1.

function popupmenu1_Callback(hObject, eventdata, handles)

% hObject    handle to popupmenu1 (see GCBO)

% eventdata  reserved - to be defined in a future version of MATLAB

% handles    structure with handles and user data (see GUIDATA)

2-   قم بإضافة الكود التالي إلى popupmenu1_Callback بعد التعليق الذي يبدأ بـ %handles……
هذا الكود سيعيد خاصيتين للقائمة المنسدلة pop-up menu وهي :
- String : مصفوفة cell array تتضمن محتويات القائمة.
- Value : قيمة تشير إلى البيانات التي تم إختيارها من محتويات القائمة.

ثم إستخدمنا عبارة switch لنجعل البيانات الحالية هي البيانات التي تم إختيارها،العبارة البرمجية الأخيرة تحفظ التغييرات في handles structure .

%Determine the selected data set.

str = get(hObject,'String');

val = get(hObject,'Value');

%Set current data to the selecteddata set.

switch str{val};

    case 'Peaks' %User selects peaks.

        handles.current_data=handles.peaks;

    case 'Membrane' %User selects membrane.

        handles.current_data=handles.membrane;

    case 'Sinc' %User selects sinc.

        handles.current_data=handles.sinc;

end

%Save the handles structure.

guidata(hObject,handles)

 برمجة أزرار الضغط  Push Buttons :

كل زر من أزرار الضغط يقوم بإنشاء نوع مختلف من الرسوميات plot بإستخدام البيانات التي يتم إختيارها من القائمة المنسدلة.

إن إستدعاء زر الضغط سيأخذ البيانات من بنية handles structure ثم يرسمها .

1-   قم بإستدعاء زر الضغط Surf في محرر الماتلاب،بنفس الطريقة السابقة،بالضغط على الزر الأيمن ثم من القائمة المنسدلة قم بإختيار
View Callbacks > Callback.

سينتقل المؤشر إلى تابع إستدعاء زر الضغط Surf في ملف التعليمات البرمجية للواجهة ،والذي يحوي الكود التالي:

% --- Executes on button press in pushbutton1.

function pushbutton1_Callback(hObject, eventdata, handles)

% hObject    handle to pushbutton1 (see GCBO)

% eventdata  reserved - to be defined in a future version of MATLAB

% handles    structure with handles and user data (see GUIDATA)

2-   قم بإضافة الكود التالي بعد التعليق  %handles….

%Display surf plot of the currently selected data.

surf(handles.current_data);

3-   أعد الخطوات السابقة،لإستدعاء تابع الزر Mesh،وقم بإضافة الكود التالي:

%Display Mesh plot of the currently selected data.

mesh(handles.current_data);

4-   وايضاً أضف الكود التالي إلى تابع إستدعاء زر الضغط Contour :

%Display Contour plot of the currently selected data.

contour(handles.current_data);

واجهتك الرسومية Simple GUI أصبحت جاهزة الآن لتشغيلها :) .

فتح وتشغيل الواجهة الرسومية GUI :

قم بتشغيل واجهتك الرسومية بإختيار Run من القائمة Tools ،أو بكتابة simple_gui .

قم بتجريب واجهتك ،وذلك بتغيير نوع البيانات من القائمة المنسدلة، ثم رسمها  بثلاثة أنواع من الرسوميات وذلك بالضغط على ازرار الضغط التي تغير نوع الرسم.