تهيئة الواجهة

تهيئة واجهة المستخدم الرسومية و برمجتها

تهيئة واجهات المستخدم الرسومية GUI

عندما نجعل واجهتك مرئية Visible , فإنها يجب أن تهيأ بحيث تكون جاهزة للمستخدم. سنوضح فيما يلي كيف يمكن :

1.    بناء (تصميم) الواجهة الرسومية بحيث تبدو أو تظهر بشكل لائق عندما يضبط قياسها بتغيير واحدات الشكل  و المكونة إلى normalized. يؤدي ذلك إلى إعادة ضبط قياس المكونات وجعلها متناسبة مع بعضها عند تغيير ضبط قياس الواجهة GUI. إن الواحدات normalized تعطي الزاوية اليسارية السفلى لنافذة الشكل القيمة (0,0) والزاوية اليمينية العلوية القيمة (1,1).

2.    توليد المعطيات للرسم. إن المثال يحتاج ثلاث مجموعات من المعطيات peaks_data , sinc_data , membrane_data. كل مجموعة من هذه المجموعات تقابل أحد أجزاء القائمة المنبثقة.

3.    إنشاء الرسم الأولي على المحاور.

4.    تخصيص اسم الواجهة الذي سيظهر على عنوان النافذة.

5.    تحريك الواجهة الرسومية إلى مركز الشاشة.

6.    جعل الواجهة الرسومية مرئية.

أ‌)       نستبدل الشيفرة التالية في ملف (M-file) :

% Make the GUI visible

set(f,'Visible','on')

     بهذه الشيفرة :

% Initialize the GUI

% Change units to normalized so components resize automatically.

set([f,hsurf,hmesh,hcontour,htext,hpopup],'Units','normalized');

% Generate the data to plot.

peaks_data=peaks(35);

membrane_data=membrane;

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

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

sinc_data=sin(r)./r;

% Create a plot in the axes.

current_data=peaks_data;

surf(current_data);

% Assign the GUI a name to appear in the window title.

set(f,'Name','Simple GUI')

% Move the GUI to the center of the screen

movegui(f,'center')

% Make the GUI visible

set(f,'Visible','on')

ب‌)  وبالتالي سيبدوا الملف M-file الخاص بواجهتك كما يلي :

function simple_gui

% SIMPLE_GUI Select a data set from the pop-up menu, then

% click one of the plot-type push buttons. clicking the button

% plots the selected data in the axes

% Initialize and hide the GUI as it is being consructed.

SCREENSIZE=get(0,'ScreenSize')

f=figure('Visible','off','Position',[360,500,450,285]);

% Construct the components.

hsurf = uicontrol('style','pushbutton','String','Surf','Position',[315,220,70,25]);

hmesh = uicontrol('style','pushbutton','String','Mesh','Position',[315,180,70,25]);

hcontour = uicontrol('style','pushbutton','String','countour','Position',[315,135,70,25]);

hpopup=uicontrol('style','popupmenu','String',{'Peaks','Membrane','Sinc'},'Position',[300,50,100,25]);

htext=uicontrol('style','text','String','Select Data','Position',[325,90,60,15]);

ha=axes('Units' , 'pixels' , 'Position',[50,60,200,185]);

align([hsurf,hmesh,hcontour,htext,hpopup],'Center','None');

% Initialize the GUI

% Change units to normalized so components resize automatically.

set([f,hsurf,hmesh,hcontour,htext,hpopup],'Units','normalized');

% Generate the data to plot.

peaks_data=peaks(35);

membrane_data=membrane;

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

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

     sinc_data=sin(r)./r;

% Create a plot in the axes.

current_data=peaks_data;

surf(current_data);

% Assign the GUI a name to appear in the window title.

set(f,'Name','Simple GUI')

% Move the GUI to the center of the screen

movegui(f,'center')

% Make the GUI visible

set(f,'Visible','on')

end

جـ) قم بتنفيذ برنامجك النصي عن طريق كتابة simple_gui على سطر الأوامر , وبالتالي ستظهر واجهتك كما يلي.

برمجة واجهة المستخدم الرسومية GUI

إنك ستستخدم استدعاءات لتبرمج مكونات GUI. إن الاستدعاءات عبارة عن توابع يتم تنفيذها بالتجاوب مع الأحداث المولدة من قبل المستخدم مثل نقر الفأرة مثلاً. نوضح فيما يلي كيف يمكن كتابة الاستدعاءات من أول واجهة بسيطة , و بعدها نبين كيف يمكن ربط كل استدعاء مع مكونته.

-         برمجة القائمة المنبثقة في الواجهة الرسومية

إن القائمة المنبثقة تمكن المستخدمين من اختيار المعطيات التي سترسم. عندما يقوم مستخدم GUI باختيار أحد المجموعات الثلاثة من المعطيات , فإن MATLAB يضبط خاصية Value للقائمة المنبثقة بالدليل المقابل للعبارة النصية المختارة. عندها فإن استدعاء القائمة المنبثقة يقرأ خاصية Value لهذه القائمة ليحدد ما هو الجزء الذي يجب عرضه حالياً و يضبط Current_data تبعاً لذلك.

أضف الاستدعاء التالي إلى ملفك بعد شيفرة التهيئة و قبل تعليمة end النهائية.

% Pop-up menu callback. Read the pop-up menu Value property

% to determine which item is currently displayed and make it

% the current data. This callback automatically has access to

% current data because this function is nested at a lower level.

    function popup_menu_Callback(source,eventdata)

        %Determine the selected data set.

        str=get(sourse,'string');

        val=get(source,'Value');

        % Set current data to the selected data set.

        switch str{val}

            case 'Peaks' %User selects Peaks

                current_data=peaks_data;

            case 'Membrane' %User selects Membrane

                current_data=membrane_data;

            case 'Sinc'  % User selects Sinc

                current_data=sinc_data;

        end

    end

-         برمجة ازرار الضغط في الواجهة الرسومية

ينشئ كل من أزرار الضغط الثلاثة نوعاً من الرسم باستخدام المعطيات المحددة من الاختيار الحالي في القائمة المنبثقة. إن استدعاءات زر الضغط ترسم المعطيات الموجودة في current_data. إنها و بشكل أوتوماتيكي تدخل إلى Current_data بسبب أنها متداخلة عند مستوى منخفض.

أضف الاستدعاءات التالية إلى ملف MATLAB الخاص بك بعد استدعاء القائمة المنبثقة و قبل تعليمة end النهائية :

% Push button callbacks. Each callback plots current_data in the

% specified plot type.

    function surfbutton_Callback(source,eventdata)

        % Display surf plot of the currently selected data.

        surf(current_data)

    end

    function meshbutton_Callback(source,eventdata)

        % Display mesh plot of the currently selected data.

        mesh(current_data)

    end

    function contourbutton_Callback(source,eventdata)

        % Display contour plot of the currently selected data.

        contour(current_data)

    end

-         ربط الاستدعاءات مع مكوناتها

عندما يقوم مستخدم الواجهة الرسومية باختيار مجموعة المعطيات من القائمة المنبثقة أو ينقر على أحد أزرار الضغط , فإن MATLAB ينفذ الاستدعاء المرافق مع هذا الحدث الجزئي. و لكن كيف يعرفMATLAB  ماهو الاستدعاء الذي سينفذ ؟ من أجل ذلك يجب عليك أن تستخدم خاصية callback للمكونات لتحديد اسم الاستدعاء الذي يترافق مع المكونة.

1.    لتعليمة uicontrol التي تعرف زر الضغط Surf, أضف زوج قيمة/خاصية property/value التالي :

'Callback',{@surfbutton_Callback}

إن الاستدعاء Callback هو اسم الخاصية , بينما Surfbutton_callback هو اسم الاستدعاء الذي يخدم في زر الضغط Surf.

2.    بشكل مشابه , بالنسبة للتعليمة uicontrol التي تعرف القائمة المنبثقة أضف زوج قائمة/خاصية كمايلي :

'Callback',{@popup_menu_Callback}

تنفيذ واجهة المستخدم الرسومية النهائية

من خلال الفقرات السابقة قمت ببناء واجهة بسيطة , و فيما يلي نبين الملف M-file  النهائي و كيفية تنفيذ الواجهة الرسومية. طبعاً الآن أصبح لديك برنامج M-file موضح بالتعليمات التالية :

function simple_gui

% SIMPLE_GUI Select a data set from the pop-up menu, then

% click one of the plot-type push buttons. clicking the button

% plots the selected data in the axes

% Initialize and hide the GUI as it is being consructed.

SCREENSIZE=get(0,'ScreenSize')

f=figure('Visible','off','Position',[360,500,450,285]);

% Construct the components.

hsurf = uicontrol('style','pushbutton','String','Surf','Position',[315,220,70,25],'Callback',{@surfbutton_Callback});

hmesh = uicontrol('style','pushbutton','String','Mesh','Position',[315,180,70,25],'Callback',{@meshbutton_Callback});

hcontour = uicontrol('style','pushbutton','String','countour','Position',[315,135,70,25],'Callback',{@contourbutton_Callback});

hpopup=uicontrol('style','popupmenu','String',{'Peaks','Membrane','Sinc'},'Position',[300,50,100,25],'Callback',{@popup_menu_Callback});

htext=uicontrol('style','text','String','Select Data','Position',[325,90,60,15]);

ha=axes('Units' , 'pixels' , 'Position',[50,60,200,185]);

align([hsurf,hmesh,hcontour,htext,hpopup],'Center','None');

% Initialize the GUI

% Change units to normalized so components resize automatically.

set([f,hsurf,hmesh,hcontour,htext,hpopup],'Units','normalized');

% Generate the data to plot.

peaks_data=peaks(35);

membrane_data=membrane;

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

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

sinc_data=sin(r)./r;

% Create a plot in the axes.

current_data=peaks_data;

surf(current_data);

% Assign the GUI a name to appear in the window title.

set(f,'Name','Simple GUI')

% Move the GUI to the center of the screen

movegui(f,'center')

% Make the GUI visible

set(f,'Visible','on')

% Pop-up menu callback. Read the pop-up menu Value property

% to determine which item is currently displayed and make it

% the current data. This callback automatically has access to

% current data because this function is nested at a lower level.

   

    function popup_menu_Callback(source,eventdata)

        %Determine the selected data set.

        str=get(source,'string');

        val=get(source,'Value');

        % Set current data to the selected data set.

        switch str{val}

            case 'Peaks' %User selects Peaks

                current_data = peaks_data;

            case 'Membrane' %User selects Membrane

                current_data = membrane_data;

            case 'Sinc'  % User selects Sinc

                current_data = sinc_data;

        end

    end

% Push button callbacks. Each callback plots current_data in the

% specified plot type.

    function surfbutton_Callback(source,eventdata)

        % Display surf plot of the currently selected data.

        surf(current_data)

    end

    function meshbutton_Callback(source,eventdata)

        % Display mesh plot of the currently selected data.

        mesh(current_data)

    end

    function contourbutton_Callback(source,eventdata)

        % Display contour plot of the currently selected data.

        contour(current_data)

    end

end

من أجل تنفيذ الواجهة الرسومية قم بالخطوات التالية :

1.    نفذ الواجهة الرسومية البسيطة بكتابة اسم ملف M-file على سطر الأوامر

Simple_gui

ستظهر لك الواجهة الموضحة فيما يلي . . .

2.    في القائمة المنبثقة , اختر Membrane و انقر على الزر Mesh. ستظهر لك الواجهة رسم شعار MATLAB من النوع Mesh كما هو موضح.

3.    قم بتنفيذ كل الخيارات الاخرى الممكنة قبل إغلاق الواجهة GUI.