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

Вот для того, чтобы приступить к знакомству с GUI, и потребовалось предварительно познакомиться с необходимыми понятиями и приемами – хэндлами, взаимосвязью графических объектов, изменением свойств объектов с помощью команд get и set.

Итак, попробуем создать что-то очень простое. Начнем с того, что создадим фигуру и оси в ней:

>> hf=figure;

>> ha=axes;

Теперь нарисуем в осях какую-либо кривую, например, параболу:

>> x=linspace(0,1,101);

>> y=x.^2;

>> hl=line(x,y);

Фигура примет следующий вид:

Теперь попробуем реализовать следующую задумку. Поместим на этой фигуре две кнопки: одну с надписью on, а другую с надписью off. Первая будет включать в график сетку (для этого в MATLAB’е существует команда grid on), а вторая выключать (команда grid off). Для создания кнопки, как и для создания других объектов управления (линейки прокрутки, текстовые окна, списки, рамки и т.д.) используется команда uicontrol. Наберем эту команду в следующем виде:

>> hb1=uicontrol('Style','pushbutton','String','on','Callback','grid on');

Что мы здесь задали? Свойство Style указывает, какого типа объект создается. В данном случае значение pushbutton означает именно командную кнопку. Свойство String – это надпись на объекте. Наконец, свойство Callback – это команда, которая выполнится, если на эту кнопку нажать. Проверим и нажмем кнопку, которая появилась на фигуре. Действительно, сетка появилась.

Теперь в соответствии с задумкой создаем вторую кнопку:

>> hb2=uicontrol('Style','pushbutton','String','off','Callback','grid off');

Действительно, вторая кнопка появилась, и, нажав ее, удается отключить сетку. Но, вот беда, эта новая кнопка закрыла старую, и мы не можем включить сетку вновь. Дело в том, что задав явно три параметра, мы доверили MATLAB’у определить значения всех остальных параметров, в том числе и параметра, определяющего положение кнопки.

Поправим дело, ведь мы уже умеем изменять свойства объектов с помощью команды set:

>> set(hb2,'Position',[70 10 60 20])

>>

Выглядят они, правда, неказисто, одна наехала на другую, но не будем привередливы и сохраним это первое диалоговое приложение в своей рабочей директории под именем first.m. То есть все перечисленные команды наберем в редакторе m-файлов и сохраним в виде файла сценария.

Теперь закроем фигуру и наберем в командной строке >>first – окно вновь на экране и работает все так же.

Команда guide

Собственно говоря, для создания приложений с GUI можно обойтись именно такой методикой, непосредственно используя команды создания объектов и команду set. Однако, такой способ ручной выделки трудоемок и выглядит несколько несовременным. Хотя знать о такой возможности и уметь его использовать необходимо, но напрашивается мысль, что должны иметься более современные способы. Действительно, есть в MATLAB’е такая команда – guide. Хотя звучание этой команды навевает мысли об экскурсоводах, правильная расшифровка выглядит очень представительно – Graphical Users Guide Development Environment (Среда Разработки Графического Пользовательского Интерфейса).

Разберем использование этой команды на простом примере. Пусть нам надо сделать приложение, которое будет строить график функции.

Шаг № 1. Разработка графического интерфейса.

Этот шаг выполняется на бумаге. Надо просто нарисовать окно диалоговой программы. Как именно заставить ее работать, пока задумываться не надо. Просто считайте, что каждая кнопка, каждое графическое окно будет работать так, как вам хочется.

Вот возможный вариант такого окна

Для вывода графика предусмотрено графическое окно, над которым помещена надпись “Graphic”. Функция должна будет вводиться в текстовый бокс Function. А вычерчивание графика будет выполняться в результате нажатия кнопки Plot.

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

Но не будем пока усложнять задачу. Будем считать интервал фиксированным. Например, от 0 до 1. А число точек будет, например, равно 101.

Шаг № 2. Создание графического интерфейса

Теперь, когда вы решили как внешне должно выглядеть это приложение пора выполнить команду guide:

>> guide

На экране появляется стартовой окно, предлагающее вам создать новый GUI (графический интерфейс пользователя).

Здесь имеется несколько возможностей, но остановимся на предлагаемом по умолчанию Blank GUI (пустой GUI) и нажмем ОК.

Появляется окно собственно программы guide.

Вверху окна мы видим привычную линейку меню, а под ней – линейку горячих клавиш, позволяющих быстро вызвать наиболее часто используемые команды

Слева – палитра управляющих элементов. С ее помощью мы и разместим в окне создаваемой программы нужные нам кнопки, надписи и текстовые боксы.

В нашем занятии мы рассмотрим только нужные для решения поставленной задачи инструменты и команды. Если вам понравится это программное средство, и вы захотите его использовать в своей деятельности, то расширять свои знания и умение его применять надо будет самостоятельно, используя HELP MATLAB’а или справочную литературу.

Начнем с создания графического окна. Находим в палитре элементов кнопку “Axes” , щелкаем по ней и размещаем графическое окно в заготовке диалогового окна программы. Для этого устанавливаем курсор в место, где мы хотим увидеть верхний левый угол окна, нажимаем клавишу мыши и, не отпуская ее, передвигаем курсор к нижнему правому углу. В результате получим

Уже сейчас можно попробовать запустить на выполнение то, что у нас получилось. Нажмите для этого зеленый треугольник, который находится в линейке горячих клавиш справа. Поскольку мы делаем это в первый раз, GUIDE спрашивает, не пора ли сохранить результаты нашей работы.

Согласимся с этим предложением и сохраним их под именем graphic.

В результате несколько неожиданно сначала появляется окно встроенного редактора с не очень понятным файлом, имеющим имя graphic.m, а затем окно нашей программы. О файле graphic.m подробнее немного позже, а пока рассмотрим появившееся окно “graphic”. Обратите внимание, что в каком-то смысле оно уже работает. Кнопка нажимается. В текстовом боксе можно редактировать текст. Правда то, что мы задумали при нажатии не выполняется. Но это естественно – ведь мы пока не объяснили программе, что мы от нее хотим.

Однако прежде чем это объяснять, сначала поработаем еще над оформлением элементов управления. Закройте приложение graphic, нажав крестик в верхнем правом углу.

Вернемся к окну GUIDE. Начнем с кнопки. Во-первых, надпись на ней должна быть не “Push Button”, а “Plot”. Чтобы это исправить, выделим кнопку, щелкнув по ней, а затем найдем среди горячих клавиш “Property Inspector” и нажмем ее.

Появится окно инспектора. В нем в левом столбце перечислены свойства, которые имеет эта кнопка, а в правом – значения этих свойств. Все эти свойства знать нет необходимости. По крайней мере, пока. Найдите в этом списке свойство ‘String’ и измените его значение на ‘Plot’. Обратите внимание – в окне GUIDE надпись на кнопке изменилась.

Кроме того рекомендую задать свойства ‘Tag’ (ярлык). По этому ярлыку легче будет в дальнейшем находить данный элемент при работе над программой. Знающие люди рекомендуют формировать имена для ярлыков следующим образом. Сначала (префикс) должны идти три строчные буквы, характеризующие тип элемента. Например, для кнопок ‘btn’, для редактируемого текста ‘edt’, для статического текста ‘txt’ и т.д. А затем с заглавной буквы – имя, характеризующее сам элемент. Для нашей кнопки, таким образом, получится ‘btnPlot’.

Если вам не нравится такая схема формирования ярлыков, можете придумать свою. Важно только ее постоянно придерживаться в дальнейшем. А без системы можно легко запутаться в многочисленных управляющих элементах.

Далее присвоим следующие свойства

Текстовой метке над графиком:

String ‑ Graphic

Tag ‑ txtGraphic

Текстовой метке над боксом для формулы:

String – Function

Tag ‑ txtFunction

Графическому окну (Axes):

Tag – axeGrahic

Боксу редактируемого текста:

String – пустая строка

Tag ‑ edtFunction

Вновь пытаемся запустить программу и видим окно уже совсем похожее на то, что мы задумали:

Шаг № 3. Программирование графического интерфейса

Теперь пришло время вернуться к таинственному файлу graphic.m.

Файл довольно длинный и довольно непонятный. Самое главное мы его не набирали. Так откуда же он взялся?

Мало того. Загляните в свою директорию, и вы обнаружите, что в ней появился не только файл ‘graphic.m’, но и файл ‘graphic.fig’. Откуда они взялись, зачем они нужны, и что с ними делать?

Файл ‘graphic.fig’ содержит описание самого окна. То есть размер и цвет, положение на экране положение кнопок, текстовых боксов. Вспомните, в предыдущем примере мы все это описывали с помощью отдельных операторов, А здесь MATLAB, дав нам удобную возможность расположить эти объекты так, как нам хочется, взял черновую работу по формальному их описанию на себя. И делать с этим файлом ничего не надо. Если вам что-то захочется изменить в виде окна, лучше открыть его с помощью GUIDE и воспользоваться удобным инструментарием для внесения изменений.

А вот файл ‘grahic.m’ – это заготовка MATLAB’а, с которой нам предстоит поработать. Если ‘graphic.fig’ – это геометрическое описание окна программы, то ‘graphic.m’ – это описание поведения окна программы и всех его элементов.

Названия этих подфункций составляются следующим образом. Сначала идет ярлык (Tag) того элемента, реакцию которого требуется задать. А затем, после символа подчеркивания – название события, на которое этот элемент должен отреагировать. Ярлыки, как вы помните, элементам управления мы даем сами.

А вот названия событий ‑ стандартные. С их значением, если они не ясны из названия можно ознакомиться в HELP’е. Но чаще всего приходится программировать событие Callback. В переводе на русский это означает не совсем понятное «обратный вызов». Но в принципе это обычно самое типичное событие для данного элемента управления. Например, для линейки прокрутки – это перемещение движка, а для кнопки – нажатие на эту кнопку.

В нашей программе обрабатываться должно только одно событие – нажатие на кнопку “Plot”. При ее нажатии программа должна считать формулу из текстового бокса, вычислить для всех заданных значений аргумента X значения Y и построить по ним график.

Итак выбираем из ниспадающего списка подфункцию btnPlot_Callback

И попадаем в описание этой подфункции. Как видим, в ней пока нет ни одного оператора кроме заголовка. Если не считать поясняющих комментариев. То есть действия программы при нажатии кнопки нам надо запрограммировать именно здесь.

Для решения поставленной задачи эту подфункцию можно оформить следующим образом:

% --- Executes on button press in btnPlot.

function btnPlot_Callback(hObject, eventdata, handles)

% hObject handle to btnPlot (see GCBO)

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

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

formula = get(handles.edtFunction,'String');

X = linspace(0,1,101);

Y = eval(formula);

plot(X,Y);

Первая строка считывает содержимое текстового бокса в строковую переменную formula. Здесь, надеюсь, становится ясно, зачем мы тратили время на заполнение значений ярлыков (Tag). В команде get первым аргументом должен быть хэндл объекта – в данном случае текстового бокса. Хэндл, как нам известно, это некоторое число, индивидуальное для каждого объекта и не совсем ясно, откуда его можно узнать. MATLAB дает возможность не ломать над этим голову, а указывать хэндл любого объекта стандартным способом: после слова handles ставится точка, а затем дописывается Tag нужного нам объекта. Именно по этой причине имеет смысл давать имена ярлыкам (Tag) по постоянной системе.

Вторая строка – подготовка значений X не должна вызвать у вас никаких вопросов.

А в третьей используется функция eval, которая раньше у нас не встречалась. Эта функция получает в качестве аргумента строку символов, рассматривает ее как выражение и производит вычисления.

Четвертая строка – простое построение графика.

Задание

Используя guide, написать программу поиска корня трансцендентного уравнения. В качестве математического ядра программы использовать программу, написанную при выполнении задания по работе № 4. В диалоговом окне предусмотреть:

1) построение графика функции

2) вывод значения найденного корня в текстовый бокс

3) для ввода значений с поля графика использовать функцию ginput

Примерный вид графического интерфейса

№	Подпрограмма	Уравнение	№	Подпрограмма	Уравнение
	Polov	, (0 £ x £ 8)		Newton	, (0 £ x £ 2,5)
	Horda	, (0 £ x £ 2)		Polov	, (0 £ x £ 2)
	Iter	, (0 £ x £ 8)		Horda	, (2 £ x £ 8)
	Newton	, (1 £ x £ 6)		Iter	, (0 £ x £ 8)
	Polov	, (0 £ x £ 8)		Newton	, (0 £ x £ 3)
	Horda	, (0 £ x £ 4)		Polov	, (0 £ x £ 6)
	Iter	, (0 £ x £ 8)		Horda	, (0 £ x £ 2)
	Newton	, (0 £ x £ 4)		Iter	, (2 £ x £ 4)
	Polov	, (0 £ x £ 3,5)		Newton	, (2 £ x £ 15)
	Horda	, (0 £ x £ 10)		Polov	, (2 £ x £ 12)
	Iter	, (3 £ x £ 12)		Horda	, (0 £ x £ 8)
	Newton	, (0 £ x £ 4)		Iter	, (0 £ x £ 4)
	Polov	, (0 £ x £ 8)		Newton	(0 £ x £ 4)
	Horda	, (0 £ x £ 4)		Polov	, (0 £ x £ 4)
	Iter	, (0 £ x £ 4)		Horda	, (2 £ x £ 10)

Поиск по сайту: