1. Принципы создания графических интерфейсов

Графические приложения MATLAB состоят из окон содержащих элементы управления (кнопки, списки, переключатели, флаги, полосы скроллинга, области ввода, меню) и программного кода. Создание графического приложения включает следующие этапы: разработка графического интерфейса пользователя (Graphical User Interface) и программирование кода обработчиков событий поступающих от элементов интерфейса. Процесс работы над приложением представляет постепенное добавление функционала, запуск и тестирование приложения. Конечным результатом является программа с графическим интерфейсом пользователя, содержащаяся в нескольких файлах, запуск которой производится вводом имени программы в командной строке MATLAB.

Многие начинающие программисты действуют по так называемому анти шаблону проектирования «Магическая кнопка» - это ситуация когда код логики программы пишется прямо в обработчике события. Поэтому мы будем разделять код по файлам, что также позволит использовать его повторно и упростит тестирование.

2. Постановка задачи

Цель данной лабораторной работы - изучение основных принципов создания графических приложений в пакете MATLAB 6.x.

В процессе поэтапного выполнения данной работы необходимо разработать графическое приложение в среде MATLAB c элементами отображения и ввода данных. Пример окна приложения приведён на рисунке 1. Расположение элементов может отличаться от предложенного.

Рис. 1. Окно приложения

3. Среда guide

Перейдите в интерактивную среду разработки графического интерфейса - GUIDE, выполнив команду guide в командной строке. В появившемся окне выберите пункт Blank GUI и нажмите ОК. Откроется окно редактора интерфейса (рис. 1).

Рис. 2. Окно ренактора интерфейса

Редактор пользовательского интерфейса содержит:

• строку меню;

• панель инструментов управления приложением;

• заготовку окна приложения с нанесенной сеткой;

• вертикальную и горизонтальную линейки;

• панель инструментов для добавления элементов интерфейса на окно приложения.

Редактор приложения MATLAB 6.x позволяет разместить различные элементы интерфейса. Для этого нажмите соответствующую кнопку на панели инструментов в левой части окна редактора интерфейса, и поместите выбранный объект на форму.

Приложение в данный момент находится в режиме редактирования. Любой объект можно удалить из окна при помощи кнопки Delete, предварительно его выделив. Запуск приложения производится при помощи кнопки Run либо выбором соответствующего пункта меню Tools. Возможно, появление диалогового окна среды с предложением сохранить проект. Нажмите Yes и сохраните в файле mygui.fig.

Приложение запускается в отдельном окне с заголовком по умолчанию. Пользователь может нажимать на кнопки, устанавливать флаги, переключатели, обращаться к спискам.

1. Программирование событий

Графическое приложение в MATLAB 6.x хранится в двух файлах с расширениями .fig и .m, первый из них содержит описание формы окна, а второй код программы. Добавление элемента интерфейса в редакторе приводит к автоматической генерации шаблона обработчика события(к примеру обработка клика на кнопке) в файле с кодом программы. Как было сказано раньше, следует разделять логику приложения от интерфейса.

Создадим приложение, окно которого содержит полигон для рисования графических объектов (Axes), содержащий координатные оси, и две кнопки (Push Button), предназначенные для построения графика функции и очистки полигона. По ходу этого методического указания мы будем усовершенствовать наше приложение.

Разместите на форме кнопку и объект Axes так, как показано на рис. 3. На кнопке автоматически размещается надпись PushButton. Каждый графический элемент обладает набором свойств определяющих его внешний вид и поведение. Имя графического элемента (Tag) уникальным образом определяет его среди всех объектов приложения, следует дать кнопке более осмысленное имя, чем установленное по умолчанию, описывающее её функциональное назначение.

Рис. 3. Размещение компонентов

Для этого выделите кнопку и вызовите редактор свойств Property Inspector(рис. 4) при помощи правой кнопки мыши.

Рис. 4. Окно Property Inspector

В открывшемся окне редакторе свойств измените значение Tag на btnPlot. Это имя используется для доступа к свойствам кнопки при программировании. Некоторые программисты считают удобным задавать имена, часть которых определяет тип элемента управления (btn соответствует button - кнопке). Аналогичным образом дайте объекту Axes имя axMain.

Когда в запущенном приложении пользователь нажимает на кнопку, то вызывается обработчик событий, имя которого формируется из имени элемента, нижнего подчеркивания и слова Callback. Сейчас он не содержит операторов. Очень важно задавать имена объектам в свойстве Tag сразу после их добавления на окно приложения в редакторе приложений, иначе генерируемая функция получит имя, которое сохранится при последующем изменении значения Tag и повлечет ошибки при выполнении приложения. Измените обработчик событий нажатия на кнопку в соответствии с листингом 1.

Листинг 1. Обработка события кнопки с именем btnPlot. mygui.m:

function btnPlot_CreateFcn(hObject, eventdata, handles)

x = [-2.5 : 0.6 : 2 ];

y = exp(-x .^2);

drawPlot(x, y, handles);

%% drawPlot объявлена в одноименно файле

Листинг 2. Функция прорисовки графика вызываемая из btnPlot. Файл drawPlot.m:

function drawPlot(xVector, yVector, handles)

newPlot = plot(xVector, yVector);

setappdata(handles.axMain, 'plot', newPlot);

changeMarker(handles);

changeColor(handles);

title(get(handles.editTitle, 'String'));

set(newPlot, 'LineWidth', round(get(handles.widthSlider, 'value')))

Сохраните оба файла и запустите приложение из редактора приложений, нажав . Нажатие на нашу кнопку в запущенном приложении должно приводить к отображению графика функции в объекте axMain. Закройте окно приложения и продолжите работу в редакторе форм. Добавьте вторую кнопку с именем clear. Перейдите к функции обработки события кнопки, для этого выберите пункт View Callbacks->Callback всплывающего меню. Разместите вызов функции plotClearDialog как показано в листинге 4.

Листинг 3. Обработка события кнопки с именем clear. mygui.m:

function clear_Callback(hObject, eventdata, handles)

plotClearDialog(hObject, handles)

Сохраните функцию plotClearDialog в одноименном .m файле, впоследствии мы ее модифицируем.

Листинг 4. Функция очистки графика(заглушка), вызывается из clear. plotClearDialog.m:

function plotClearDialog(hObject, handles)

cla

Запустите приложение и убедитесь, что нажатие на первую кнопку приводит к отображению графика функции, а вторая служит для очистки графика.