ساخت رابط گرافیکی GUI

در این مقاله قصد داریم با نحوه ایجاد یک پنجره گرافیکی در نرم افزار متلب آشنا شویم. برای تولید یک GUI در متلب ابتدا در command window عبارت guide  را تایپ می‌کنیم. سپس گزینه Blank GUI را انتخاب کرده و ok را می‌زنیم (شکل ۱).

شکل ۱

صفحه جدیدی باز می‌شود که در آن قابلیت‌های مختلفی وجود دارد که شما در GUI اعمال کنید. حال میتوانیم با کشیدن هریک از گزینه‌های سمت چپ برروی صفحه در آن‌ها تغییر ایجاد کرده و استفاده کنیم (شکل ۲).

شکل ۲

حال به توضیح مختصر هرکدام از گزینه‌ها در شکل۳ می‌پردازیم:

شکل ۳

۱- اولین گزینه، گزینه Pushbutton می‌باشد. این گزینه مانند یک دکمه فشاری عمل می‌کند که می‌توانیم برای آن دستورات مختلفی را ایجاد کنیم.
با دابل‌کلیک کردن برروی گزینه ایجاد شده مشخصات آن نمایش داده می‌شود و می‌توان در آن‌ها تغییر ایجاد کرد. به‌عنوان مثال می‌توان نام این گزینه، فونت و رنگ نوشته‌ها، رنگ پس زمینه یا نوشته نمایش داده شده و … را تغییر داد. که در آینده به آن می‌پردازیم.

۲- دومین گزینه slider می‌باشد. با این گزینه ما می‌توانیم با حرکت یک اسلایدر مقادیر مختلف را وارد کنیم.

۳- سومین گزینه Radio Button می‌باشد. با این ابزار می‌توانیم بین چند گزینه مختلف یک انتخاب داشته باشیم و ورودی را مشخص کنیم.

۴- در گزینه Check Box می‌توانیم بین چند گزینه انتخاب‌های مختلف داشته باشیم.

۵- با گزینه Edit Text می‌توانیم یک سری حروف و عدد را بصورت ورودی داشته باشیم.

۶- گزینه Static Text برای نمایش اعدد یا حروف استفاده می‌شود.

۷- با گزینه Pop Up Menu می‌توان یک سری گزینه را در یک کشو قرار داد و از بین آن‌ها یکی را انتخاب کرد.

۸-در گزینه List Box می‌توانیم یکسری گزینه مختلف را در یک لیست پشت سر هم داشته باشیم.

۹- Toggle button مانند یک کلید روشن خاموش می‌ماند که با فشار داده شدن در یک وضعیت باقی می‌ماند.

۱۰- برای قرار دادن یک جدول می‌باشد.

۱۱- برای قرار دادن نمودار می‌باشد.

۱۲- این گزینه برای گروه‌بندی اجزای مختلف داخل GUI می‌باشد.

۱۳- برای قرار دادن یک گروه از کلید‌های فشاری در کنار هم می‌باشد.

حال به بررسی مختصر یک GUI می پردازیم:

شکل ۴

همانطور که درشکل ۴ مشاهده می‌کنید GUI مورد نظر شامل یک پنل اصلی می‌باشد که در آن سه پنل اطلاعات اولیه، پارامتر‌های کنترلر و پنل پلات وجود دارد. همچنین در هرکدام از پنل‌ها گزینه‌های مختلفی چون Edit text, Push button, Static text, Slider و… استفاده شده است.

برای ایجاد کردن تغییرات در هر درایه با دابل‌کلیک کردن برروی آن صفحه زیر نمایان میشود:

که همانطور که درشکل ۵ مشاهده می‌کنید می‌توان رنگ پس زمینه، رنگ نوشته، فونت و سایز، نام و … را تغییر داد. برای تغییر نوشته بر روی Push button و یا هرکدام از گزینه‌ها، کافی است قسمت استرینگ که در عکس زیر مشاهده می‌کنید را تغییر دهید و برای تغییر اسمی که شما در کد نویسی به آن نیازمندید و آن را به این نام میشناسید قسمت tag  را تغییر دهید.

شکل ۵

ما در این GUI بعد از قرار دادن تمام گزینه‌های موردنظر شروع به انتخاب Tag های مشخص برای هرکدام کردیم، به گونه‌ای که نام آن‌ها در کدنویسی اشتباه نشود. ابتدا تعدادی Static Text ایجاد کردیم که به رنگ‌های آبی کمرنگ و خاکستری مشخص شده. در این گزینه ها با تغییر string هرکدام، کلمات مورد نظر برای نمایش نوشته شده است. مانند Enter Port یا Gear Ratio و…

سپس چند عدد Edit Text را بوجود آورده که برای وارد کردن بازه‌ی پارامترهای کنترلی و به‌عنوان مثال، وارد کردن نسبت چرخدنده و… استفاده می‌شود. همچنین یک عدد پاپ‌آپ منو برای انتخاب Port ورودی وجود دارد. سه عدد Slider برای تغییر دستی مقادیر پارامتر‌های کنترلی وجود دارد که بعد از تعیین بازه‌ی آن، عددی در یک Static text نمایش داده میشود.

در پایان هم قسمتی برای نمایش نمودار وجود دارد.

برای شروع باید یک عدد Push button وجود داشته باشد که بتوان با کلیک کردن برروی آن کنترل PID را آغاز کرد.

اکنون به سراغ کد نویسی GUI می رویم.

برروی Push button  که به عنوان شروع کننده کار GUI می‌باشد کلیک راست کرده وبرروی گزینه view callback رفته و برروی callback  کلیک می‌کنیم. اکنون می‌توانیم کدهای مورد نظر را بنویسیم. حال به‌صورت مختصر کد ها را توضیح می‌دهیم:

برای گرفتن یک ورودی به صورت عدد از Edit text از کد زیر استفاده میکنیم:

a = str2num( get( handles.اسم تگ ورودی, 'string' );

برای نمایش آن در یک Static text :

Set(handles.اسم تگ edit text,'string', Num2str( a));

برای گرفتن ورودی از Pop up menu :

مثلا در برنامه ما به شکل زیر است. PORT، نام tag این Pop up menu میباشد.

a1 = get( handles.PORT,'value');
if (a1==2);
    p = 'COM1';
elseif (a1==3);
    p = 'COM2';
elseif (a1==4);
    p = 'COM3';
elseif (a1==5);
    p = 'COM4';
elseif (a1==6);
    p = 'COM5';
elseif (a1==7);
    p = 'COM6';
elseif (a1==8);
    p = 'COM7';
end

ابتدا داخل خود GUIDE قسمت String در Pop up menu به‌ترتیب com1, com2, com3… را تایپ شده است. اکنون متلب آنها را به ترتیب ارزش گزاری میکند. یعنی به اولی ارزش یک به دومی دو و الی آخر، در نتیجه کدهای بالا را مینویسیم. «در اینجا برای زیبایی اولین خانه را خالی گذاشته شده است درنتیجه ارزش ها از دو شروع می شود.»

کد نویسی برای Slider :

این آرایه با حرکت کشویی خود یک عدد بین 0 تا 1 را به ما میدهد. که کد آن به صورت زیر است.

get(handles.slider3,'value');

اما برای داشتن بازه های مختلف شما می‌توانید یک ضریب از یک Edit text بگیرید و آن را در این عدد ضرب کنید.

str2num(get(handles.intkp,'string'));

برای نوشتن یک سری توضیحات می‌توانیم از دستور msgbox استفاده کنیم. برای اینکار یک Push button کوچک، که یک علامت سوال در آن است ایجاد میکنیم. اکنون در callback آن دستور زیر را مینویسیم:

msgbox('baze moteghayere ki ra moshakhas konid')

با تشکر از: آقای مهندس سینا اصفهانی و آقای مهندس امیررضا اشرفی

دانلود فایلهای مربوطه

مطالب مرتبط با این نوشته را می توانید در لینک های زیر ببینید:

+ آموزش GUI متلب: معرفی نوار ابزار ها (قسمت ۱)

+ آموزش GUI متلب: ساختن زبانه های مختلف در یک پنجره (قسمت ۲)

+ آموزش GUI متلب: گذاشتن تصویر در GUI (قسمت ۳)

+ آموزش GUI متلب: exe کردن رابط کاربری (قسمت ۴)

+ GUI درایور MDC20 در نرم افزار متلب