آموزش GUI در MATLAB (قسمت اول)

همون طور كه مي دونيد(يا شايد هم نمي دونيد) به وسيله ابزار (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 شما آماده شده و مي تونيد از اون استفاده كنيد.

به اين صورت:

اگر سؤالي داشتيد مي توانيد در بخش نظرات آن را مطرح كنيد.

براي رفتن به قسمت بعد، به روي لينك زير كليك كنيد:

آموزش GUI (قسمت دوم)

براي رفتن به ديگر قسمت ها، به روي لينك هاي زير كليك كنيد:

آموزش GUI (قسمت اول)

آموزش GUI (قسمت دوم)

آموزش GUI (قسمت سوم)

آموزش GUI (قسمت چهارم)