آموزش طراحی رابط گرافیکی کاربر (GUI) با متلب (MATLAB) – مقدماتی

واسط های گرافیکی در متلب، یکی دیگر از امکانات نرم افزار قدرتمند متلب است که این فرصت را به ما می دهد تا بتوانیم با کاربر به صورت گرافیکی ارتباط برقرار کنیم. یکی از ویژگی های مهم واسط های گرافیکی در متلب، سهولت استفاده از توابع نوشته شده و یا به عبارتی سهولت اجرای یک پروژه در متلب است. چرا که خروجی مورد نظر که خود می تواند یک نمودار باشد، با تغییرات گوناگون ورودی بدون نیاز به اجرای مجدد توابع و صرفا در یک پنجره، قابل مشاهده است. از این رو استفاده از واسط های گرافیکی در متلب، چه در پروژه های دانشجویی و چه در پروژه های صنعتی، روز به روز در حال افزایش است.

در این آموزش به چگونگی طراحی یک واسط گرافیکی در متلب با استفاده از محیط GUIDE، از ابتدا تا انتها پرداخته شده است و سعی بر آن بوده که نکات مهم طراحی واسط های گرافیکی که معمولا از دام های طراحی به حساب می آیند و همچنین از سوالات متداول دانشجویان است مورد بررسی قرار گیرد.

کتاب های مختلفی در زمینه متلب وجود دارند که به این مقوله پرداخته اند اما در میان فیلم های آموزشی متلب از نظر جامع بودن مطالب، به روز بودن آن ها و نیز اشاره به نیاز روز دانشجویان، این بسته آموزشی کم نظیر و یا حتی بی نظیر است. از نکات منحصر به فرد این بسته آموزشی می توان به موارد زیر اشاره کرد:

بررسی و پاسخ گویی به سوالات متداول طراحان واسط های گرافیکی در متلب با مطرح کردن دام های طراحی و راه حل های آن ها.
ذکر ۸ مثال مختلف در معرفی و بررسی المان ها که در هر کدام فلوچارت طراحی قدم به قدم با مخاطب طرح و اجرا می شود.
به کار بردن زبان ساده در آموزش به طوری که تنها پیش نیاز این بسته آموزشی دانستن نکات ابتدایی نرم افزار متلب است.
حساسیت در نحوه ارائه نکات ظریف به منظور انتقال هر چه بهتر مطلب به مخاطب.

جهت آشنایی بیشتر با نکات تکمیلی می توانید به آموزش تکمیلی طراحی رابط گرافیکی کاربر (GUI) با متلب (MATLAB) مراجعه نمایید.

این بسته جامع آموزشی، با داشتن حدود ۸ ساعت آموزش عملی در این زمینه، به چهار بخش عمده تقسیم شده است. در ادامه محورهای مورد اشاره در هر بخش توضیح داده شده اند.

موارد مطرح شده در بخش یکم

• توضیحات تئوریک مربوط به معرفی GUI.
• معرفی دسته های مختلف المان های یک واسط گرافیکی شامل کنترل های گرافیکی، عناصر استاتیک، منوها و محورها.
• توضیحات مربوط به اهمیت و ضرورت استفاده از GUI و نیز توضیح چگونگی مراحل شروع و اتمام یک پروژه واسط گرافیکی.
• توضیح ساختار برنامه نویسی GUI و نیز کلیات طراحی نهایی یک واسط گرافیکی در متلب.
• نحوه شروع کار با محیط ساخت یک واسط گرافیکی کاربر (GUIDE) در متلب به طور عملی.
• معرفی نوار ابزارهای گوناگون در محیط GUIDE که به طراحی بهتر یک واسط گرافیکی به ما کمک می کنند. مانند: خط کش، چهار خانه ها، نحوه تنظیم المان ها و… .
• معرفی تک تک المان ها به طور مختصر در نرم افزار متلب.
• معرفی پنجره خصوصیات برای هر المان و توضیح موارد آن به همراه تاثیر آن ها در واسط گرافیکی.
• توضیح ساختار M فایل یک واسط گرافیکی به طور جامع و نکات مهم آن.
• معرفی دکمه های فشاری و نیز انجام عملی نکات قبل با ذکر مثال شمارنده کلیک.

موارد مطرح شده در بخش دوم

• معرفی المان دکمه دو وضعیتی، جعبه ویرایش متنی و متن ایستا با طراحی مثال “تعویض رنگ ها” به همراه توضیحات کامل و نکات ظریف مربوطه.
• معرفی لغزنده ها به همراه توضیحات چگونگی تعیین میزان تغییرات در لغزنده، توضیح در مورد چگونگی گرفتن ورودی از کاربر در یک واسط گرافیکی با طراحی مثال “نمایشگر مقدار لغزنده”.
• معرفی چک باکس، فریم ها، دکمه های رادیویی با طراحی مثال “تغییر رنگ پس زمینه”.
• در مثال قبل نکات استفاده از چند دکمه رادیویی با هم به همراه نحوه پیاده سازی خروجی مورد نظر به طور کامل توضیح داده شده است.
• معرفی لیست های باز شونده (Popup Menu) و لیست معمولی به همراه نکات مربوطه با طراحی مثال “رسم رنگارنگ خط و سهمی”.
• معرفی نمودارها و توضیح در مورد خصوصیات ضروری آن در مثال “رسم رنگارنگ خط و سهمی”.

موارد مطرح شده در بخش سوم

• توضیحات و نکات مربوط به اضافه کردن منوها و کانتکست (context) منوها به واسط گرافیکی.
• توضیحات مربوط به چگونگی برنامه ریزی و عملیاتی سازی منوها و یا کانتکست منوهای طراحی شده.
• پیاده سازی کلیدهای میانبر برای فراخوانی منوها.
• چگونگی Load کردن فایل با توضیح جامع و کامل در مورد تابع Uigetfile به همراه توضیح در مورد ورودی ها و خروجی های آن و بررسی تاثیر آن ها در نوع انتخاب های موجود برای پسوند فایل ها در پنجره Open File.
• چگونگی Save کردن فایل با توضیح جامع و کامل در مورد تابع Uiputfile به همراه توضیح در مورد ورودی ها و خروجی های آن و بررسی تاثیر آن ها در نوع انتخاب های موجود برای پسوند فایل ها در پنجره Save File.
• چگونگی پیاده سازی خروج از یک واسط گرافیکی از روی منوها.
• توضیح نکته مهم و ظریف پیاده سازی ذخیره کردن یک نمودار که خود بخشی از یک واسط گرافیکی است در فایلی دیگر با ذکر دستورات مربوطه.
• توضیح در مورد چگونگی پیاده سازی پنجره سوال و جواب از کاربر.
• توضیح در مورد چگونگی پیاده سازی پنجره خطا و اخطار به کاربر.
• توضیح در مورد نحوه پیاده سازی و اجرای کانتکست منوها تحت مثال تغییر جنس خط در نمودار رسم شده.

تمام موارد بالا تحت مثال “رسم منحنی سینوسی و سهمی” مطرح شده اند.

موارد مطرح شده در بخش چهارم

• طرح و اجرای پروژه پایانی جهت مرور مطالب مهم بررسی شده در مثال های قبل.

در این پروژه تمام نکات مربوط به نمودارها، محورها، منوها، عناصر کنترلی پرکاربرد و نیز عناصر استاتیکی، مرور شده و مورد بررسی قرار گرفته اند. در این مثال سه مفهوم مهم فراخوانی یک فایل، ذخیره کردن نمودار موجود در یک واسط گرافیکی و نیز چگونگی تنظیم محورها برای نمایش درست نمودار مورد بررسی قرار گرفته شده است. رسم بیضی که پارامترهای آن از کاربر گرفته می شود خروجی اصلی این واسط کاربر است.

همان طور که می دانید دایره حالت خاصی از بیضی است اما اگر فواصل محورها با هم تنظیم نباشد، حتی در حالت دایره، شکل نمایش داده شده بیضی خواهد بود. از این جهت تنظیم فواصل محورها از اهمیت ویژه ای در این مثال برخوردار است. بخش اصلی دیگر این پروژه را منوها و کانتکست منوها تشکیل می دهند و دوباره با هم مفاهیم مربوطه را بررسی می کنیم. همان طور که در ابتدا هم اشاره شد، هدف از انجام پروژه پایانی مرور کلی مفاهیم و نکات مطرح شده در قسمت های قبل است که پس از انجام این پروژه در ذهن مخاطب ثبت شود.