نحوه كار كردن با GUI

نحوه كار كردن با GUI

در چند قسمت قصد دارم نحوه كار كردن با GUI رو به شما آموزش بدم.

همون‌طور كه مي‌دونيد(يا شايد هم نمي‌دونيد) به‌وسيله ابزار (GUI (Graphical User Interface شما مي‌تونيد برنامه خودتون رو بهتر به كاربران ديگه عرضه كنيد. براي شروع ابتدا guide رو صفحه متلب تايپ و اينتر كنيد يا از مسير File >> New >> GUI نيز مي‌تونيد استفاده كنيد همون‌طور كه مشاهده مي‌كنيد صفحه زير نمايش داده مي‌شه بدون هيچ تغييري OK كنيد.

بعد صفحه اصلي GUI براي شما ظاهر مي‌شه كه شما مي‌تونيد عناصر گرافيكي خودتون رو در اون قرار بديد. براي اينكه شما بتونيد يك GUI طراحي كنيد ابتدا بايد شما عناصر گرافيكي كه GUI در اختيار شما قرار مي‌ده بشناسيد من خلاصه‌اي از برخي عناصر رو كه بيشتر به كار ميان براي شما مي‌نويسم.

• Push button : اين عنصر گرافيكي يك دگمه فشاري هستش كه هنگامي كه با ماوس روي اون فشار بديد Callback اون فعال مي‌شه.
• Slider : اين عنصر يك كنترلر گرافيكي براي مقادير پيوسته است كه با دادن دو حد بالا و پايين به اون مي‌تونيد مقدارش رو بين دو حد بطور پيوسته تغيير بديد كه اين كار با كشيدن كنترلر آن با ماوس انجام مي‌شه و هر تغيير در اين كنترلر  Callback اون رو فعال مي‌كنه.
• Radio Button : اين عناصر معمولاً به صورت گروهي به كار مي‌رن و از اون‌ها مي‌تونيد براي ايجاد گزينه‌هاي وابسته استفاده كنيد (گزينه‌هاي وابسته يعني حالت‌هايي كه هميشه يكي از اون‌ها مي‌تونن فعال باشن) زماني كه بر روي يكي از اون‌ها كليك كنيد  Callback مربوط به اون عنصر فعال شده و يك نطقه سياه درون دايره اون قرار مي‌گيره.
• Check Box : با اين عناصر شما مي‌تونيد حالت‌هاي مستقل از هم ايجاد كنيد يعني حالت‌هايي كه همزمان مي‌تونن رخ بدن. زماني كه با ماوس روي اين عنصر كليك كنيد Callback اون فعال مي‌شه و اگر خاموش باشه(درون مربع چيزي نباشه) يك تيك سبز رنگ روي مربع اون نشون داده مي‌شه كه نشان دهنده روشن بودن اونه و اگر روشن باشه، خاموش مي‌شه.
• Edit Text : اين عنصر يك متن قابل تغيير رو نشون مي‌ده كه شما مي‌تونيد محتويات اون رو تغيير بديد و سپس با فشردن دگمه اينتر  Callback اون رو فعال كنيد.
• Static Text : اين عنصر يك متن ثابت رو نشون مي‌ده كه محتويات اون تحت كنترل برنامه‌ايست كه شما براي اون نوشته‌ايد و ديگه تحت كنترل شما نيست مگر اينكه بريد به سورس برنامه و كد اون رو تغيير بديد. از اين عنصر معمولاً براي نمايش خروجي عددي استفاده مي‌شه.
• Pop-up Menu : اين عنصر گرافيكي تقريباً مانند Radio Button‌هاي گروهي عمل مي‌كنه و مي‌تونه تعدادي حالت رو در خودش ذخيره كنه و در يك زمان واحد فقط يكي از اون‌ها رو فعال كنه. شايد بشه گفت كه يكي از تفاوت‌هاي اون با Radio Button‌ها زماني باشه كه حالت‌هاي ما زياد هستند مثلاً بيش از پنج حالت، كه در اين صورت بهتره كه از اين عنصر استفاده كنيم چرا كه اگر بخواهيم از Radio Button‌ها استفاده كنيم GUI ما بزرگ و شايد هم بي‌ريخت بشه ولي در عنصر Pop-up Menu فقط حالت فعال نمايش داده مي‌شه و فقط زماني كه بخواهيم حالت رو تغيير بديم باقي حالت‌ها نمايش داده مي‌شن.
• Listbox : اين عنصر نيز تقريباً كار Pop-up Menu رو انجام مي‌ده با اين تفاوت كه در Listbox تمامي حالت‌ها در يك صفحه نمايش داده مي‌شن و با كليك كردن بر اون‌ها مي‌تونيم Callback اون رو فعال كنيم.
• Toggle Button : اين عنصر گرافيكي شبيه يك كليد دو وضعيته هست كه مي‌تونه در حالت روشن و خاموش قرار بگيره. با كليك كردن روي اون Callback مربوطه فعال مي‌شه.
• Axes : اين عنصر گرافيكي وقتي به كار مياد كه خروجي ما منحني باشه و مثل Static Text محتويات اون تحت كنترل برنامه‌ايست كه به آن داده‌ايم.
• Panel : اين عنصر مي‌تونه تعدادي شيء گرافيكي رو در خودش قرار بده و با داشتن يك نام از بقيه اشياء جدا كنه.
• Button Group : شما زماني كه بخواهيد از گروهي از Radio Button‌ها استفاده كنيد به اين عنصر نياز خواهيد داشت.

البته آنچه كه در بالا مشاهده كرديد بخشي از امكاناتي است كه GUI در اختيار ما قرار داده است ولي براي شروع كار با GUI اين قطعات كافيست.

حالا فرض كنيد كه ما مي‌خواهيم يك ماشين حساب خيلي ساده درست كنيم به اين صورت كه دو عدد رو بگيره و چهار عمل اصلي رو به دلخواه كاربر روي دو عدد انجام بده براي اين كار ما احتياج به دو Edit Text داريم تا بتونيم اعداد ورودي رو به اون بديم و دو Static Text كه يكي براي نمايش خروجي و ديگري رو هم بعداً مي‌گم بعد مي‌تونيم از چهار Radio Button كه به صورت گروهي به كار مي‌رن، براي انتخاب يكي از چهار عمل اصلي استفاده كنيم طبعاً يك Button Group هم مي‌خواهيم.

پس از انتخاب قطعات، نوبت اون رسيده كه كارمون رو شروع كنيم در صفحه اصلي GUI در سمت چپ قطعاتي رو كه مي‌خواهيم ازشون استفاده كنيم مي‌بينيد تمام قطعات رو به تعدادي كه گفته شد به صفحه GUI وارد كنيد به اين صورت كه بر قطعه مورد نظر كليك مي‌كنيد و بدون رها كردن اون، قطعه رو توي صفحه GUI مي‌اندازيد و به‌صورت شكل زير در مي‌آوريد:

عنصرهاي متني رو همون‌طوري كه مي‌بينيد بزرگ كردم تا اعداد بزرگ رو به راحتي نمايش بدن.

حالا بايد تنظيمات اين قطعات رو انجام بديم اول روي Edit Text اولي دوبار كليك كنيد و بعد عبارت مقابل String رو پاك كرده و به جاي آن 0 رو بنويسيد و در Tag اون هم x_edit بنويسيد و پنجره رو ببنديد.

همين اعمال رو هم براي Edit Text دومي انجام مي‌ديد با اين تفاوت كه در Tag اون y_edit رو مي‌نويسيد. String در واقع همون عبارتي است كه روي Edit Text نوشته مي‌شه و Tag ناميه كه بوسيله اون GUI، عنصر مربوطه رو شناسايي مي‌كنه. در ادامه كار بر Static Text اولي دوبار كليك مي‌كنيد و در String اون علامت = رو قرار مي‌ديد سپس در پنجره تنظيمات Static Text دومي مقدار String رو 0 و مقدار Tag رو Result قرار بديد همون‌طور كه ديديد Static Text دومي نياز به Tag داره چرا كه مقدار اون قراره تغيير كنه و نتيجه عمليات رو نمايش بده حالا سراغ Radio Button‌ها مي‌ريم اول به رويButton Group دوبار كليك كنيد و مقدار Title اون رو مثلاً Selector يا هر چيز ديگه بزاريد(مهم نيست) بعد روي Radio Button اولي دوبار كليك كنيد و مقدار  sum_radiobutton رو در Tag و مقدار + رو در String مي‌نويسيد حالا همين كار رو براي سه‌تاي ديگه انجام مي‌ديد و در String‌هاشون به ترتيب – * / و در Tag‌هاشون به ترتيب diff_radiobutton براي دومي mult_radiobutton براي سومي و div_radiobutton رو براي چهارومي مي‌نويسيد.

حالا كار تنظيمات قطعات تموم شده و شكل زير رو داريد:

حالا ديگه وقت كد نويسي شده.

روي فلش سبز رنگي كه در نوار بالايي صفحه قرار داره كليك كنيد و در ديالوگ باز شده Yes رو بزنيد و بعد يك نام دلخواه مثلاً calculator رو به عنوان نام GUI تايپ كنيد و دگمه Save رو بزنيد حالا مشاهده مي‌كنيد كه يك M-File كدنويسي شده و يك Figure كه همون GUI شماست به نمايش در آمده است. M-File مربوطه در واقع هسته اصلي GUI شماست حالا شما بايد مقداري كد به اين GUI اضافه كنيد تا قطعات شما وظايف خود رو بشناسن.

در ابتدا به صفحه اصلي GUI مي‌رويد و با راست كليك كردن بر Edit Text اولي به‌صورت زير Callback اون رو فراخواني مي‌كنيد:

حالا در جايي كه مكان‌نما رفته كد زير رو بنويسيد:

i=get(hObject,’String’);

i=str2num(i);

if(isempty(i))

set(hObject,’String’,’0′)

end

guidata(hObject, handles);

در خط اول اين كد مقدار Edit Text به صورت String خوانده مي‌شه و در خط دوم به عدد تبديل مي‌شه در خطوط سه تا پنج بررسي مي‌شه كه آيا عددي وارد شده يا نه؟ اگه وارد شده باشه كه هيچ وگرنه مقدار 0 در اون قرار داده مي‌شه در خط آخر هم كه مقادير به روز مي‌شوند و نياز هستش كه در آخر هر Callback آورده‌شه تا مقادير آپديت بشن. سپس دقيقاً همين كار رو براي Edit Text دومي انجام بديد و همون كد رو هم بنويسيد.

حالا به سراغ Radio Button‌ها مي‌رين Callback اولي رو به همون صورتي‌كه گفته شد فراخواني مي‌كنين و كد مربوطه رو به همان صورتي‌كه مي‌بينيد، وارد كنيد. همون‌طوري‌كه مي‌بينيد بعد از تابع سه خط توضيحات اومده كه اون‌ها رو رد مي‌كنيد بعد كد رو مي‌نويسيد.

به اين صورت:

function sum_radiobutton_Callback(hObject, eventdata, handles)

% hObject    handle to sum_radiobutton (see GCBO)

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

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

x=get(handles.x_edit,’String’);

y=get(handles.y_edit,’String’);

x=str2num(x);

y=str2num(y);

result=x+y;

result=num2str(result);

set(handles.Result,’String’,result);

guidata(hObject, handles);

چهار خط اول كه خودش وجود داشت خط پنجم و ششم مقدار x_edit رو درون x و مقدار y_edit رو درون y ذخيره مي‌كنه در دو خط بعدي مقدار x و y رو به عدد تبديل مي‌كنه در خط بعدي مجموع اون‌ها رو درون result مي‌ريزه و خط بعدي result رو از عدد به رشته تبديل مي‌كنه خط بعدي result رو درون Result(كه همون Static Text دومي باشه) مي‌ريزه و در نهايت هم در خط آخر مقادير به روز مي‌شن همون‌طوري كه قبلاً توضيح داده شد.

حالا براي سه Radio Button ديگه هم عيناً همين كد رو وارد مي‌كنيد فقط به جاي اينكه x و y رو با هم جمع كنيد اون‌ها رو براي دومي از هم كم مي‌كنيد و براي سومي در هم ضرب مي‌كنيد و براي چهارومي به هم تقسيم مي‌كنيد.

پس از انجام عمليات كدنويسي M-File مربوطه رو Save مي‌كنيد حالا ديگه GUI شما آماده شده و مي‌تونيد از اون استفاده كنيد.

به اين صورت: