Icon Editor GUI Demonstration. Система моделирования динамических систем Simulink. MatLab

Пример "Icon Editor GUI Demonstration". Описание составлено при участии студента Ульченко Е.Г. (СамГТУ).

Модель графического интерфейса пользователя "Редактор пиктограмм" содержится в разделе Simulink-Stateflow-Examples.

В переводе на русский язык надписи обозначают следующее.

Рис.3 "Русифицированная simulink - модель редактора пиктограмм"

Редактор пиктограмм состоит из двух блоков Event Injector - Поставщика (инжектора) Событий и блока Chart, в котором реализован управляющий алгоритм работы редактора пиктограмм.

Блок Event Injector выполняет роль следящей системы, которая отслеживает изменение состояния манипулятора "мышь" и синтезирует соответствующие события на выходе. Внутреннюю структуру блока Event Injector мы можем увидеть на рисунке 4:

Основным элементом блока является блок MATLAB Fcn, реализующий функцию sf_inject_event, которая синтезирует события для редактора пиктограмм. Входным воздействием для данной функции является состояние манипулятора "мышь", которое описывается четырьмя "подсостояниями":

'NBD' Normal (left) mouse button-down - Нажата левая кнопка мыши

'ABD' Alternate (right) mouse button-down - Нажата правая кнопка мыши

Выходом этой функции является массив-строка, состоящий из четырёх элементов. Изменение соответствующего элемента массива с 0 на 1 или наоборот - отображает появление этого события.

Например, если исходный выходной массив был

, то после нажатия и отпускания, например левой кнопки мыши выходной массив изменится на

- что соответствует появлению двух событий: нажатие левой кнопки('NBD') и отпускание кнопки('BU'). Если теперь нажать и отпустить правую кнопку мыши, то на выходе будет

Стоит отметить, что всё выше упомянутое справедливо лишь для случая, когда курсор мыши находится в пределах рабочего окна "Stateflow Icon Editor", т.е. фиксация событий, связанных с мышью (перемещение курсора, нажатие левой или правой кнопки, отпускание кнопки), происходит лишь при нахождении курсора мыши в рабочем окне редактора пиктограмм.

Блок 'Chart' является управляющей программой, написанной на языке алгоритмов, использующегося для построения Stateflow-моделей. Т.о. блок 'Chart' представляет собой алгоритм событийно управляемой модели. Внутренняя структура блока 'Chart' представлена на рисунке 6.

Как видно из рисунка, в блоке 'Chart' имеются три подсистемы: Main, Focus, ToolBar, каждая из которых реализует отдельный алгоритм.

Все подсистемы работают параллельно, однако, на рис.6 в прямоугольнике находится заметка - 'Note: Make sure "Focus" comes before "Tool".The Tool state depends on up-to-date information about the Focus.', которая гласит: "Убедитесь, что 'Focus' находится перед 'Tool'. Состояние 'Tool' зависит от текущей информации о 'Focus'". Т.е. вычисление переменных, используемых в 'ToolBar', но вычисляемых в 'Focus', должно происходить раньше, чем использование их значений в 'ToolBar'.

Эта подсистема предназначена для отслеживания положения курсора мыши в рабочем окне Stateflow Icon Editor.

Рабочее окно редактора пиктограмм (рис.5) разделено условно на 5 частей:

-'ToolBar' - 'Панель инструментов'- область панели инструментов (на рис.5 - панель инструментов).

-'Palette' - 'Палитра' - область палитры, которая подразделяется на области 'Swatch' - 'Образец' и 'None'- 'Никакое'. ('Swatch' - область цветов палитры; 'None' - остальная область палитры, к этой области относится и индикатор, показывающий выбранный цвет).

-'Canvas' - 'Холст' - область рисования (на рис.5 - большой белый квадрат).

-'Icon' - 'Пиктограмма' - область отображения уменьшенной иконки (на рис.5 - маленький белый квадрат в левом нижнем углу).

-'None' - 'Никакое' - пустая область, т.е. область, не относящаяся ни к одной из вышеперечисленных (на рис.5 эта область закрашена ярко-синим цветом).

Состояние, в котором находится подсистема 'Focus' - отображает положение курсора мыши в окне редактора. Основной функцией подсистемы является М-функция - sf_edit_icon('over_:'), которая возвращает значение истина, в случае если указатель мыши находится в заданной области, Название области задаётся выражением 'over_:'. Например, условие перехода в состояние 'Canvas', заданное как [ml.sf_edit_icon('over_canvas')] означает, что переход будет осуществлён лишь тогда, когда результатом выполнения функции ml.sf_edit_icon('over_canvas') будет значение истина. А это произойдёт лишь в том случае, когда курсор мыши попадёт в область рисования - 'Canvas'. Аналогично задаются условия перехода в другие состояния.

Стоит отметить, что входным событием для подсистемы 'Focus' является лишь событие BM - перемещение мыши.

Характеристика положения курсора мыши не ограничивается пятью вышеупомянутыми областями, т.к. в областях 'Palette' и 'ToolBar' есть свои подобласти, непосредственно отдельные цвета в палитре и семь управляющих кнопок на панели инструментов.

Отслеживание положения мыши внутри палитры осуществляется внутри модуля sf_edit_icon.m, а слежение за положением мыши на панели инструментов осуществляется посредством функции set_focusedIcon(), которая представляет собой набор условий, по которым определяется значение переменной 'focusedIcon', которая в свою очередь и является характеристикой положения курсора.

Отслеживание значения этой переменной начинается с момента перехода подсистемы 'Focus' в состояние 'ToolBar', продолжается в течение нахождения 'Focus' в этом состоянии, и при выходе из состояния 'ToolBar' переменной focusedIcon присваивается значение 0, что соответствует случаю, когда курсор мыши не находится ни на одной из кнопок панели управления. Т.о. значение переменной focusedIcon является исходным для работы алгоритма подсистемы 'ToolBar', именно поэтому алгоритм 'Focus' должен выполнятся перед алгоритмом 'ToolBar'.

Эта подсистема представляет собой управляющий алгоритм панели инструментов.

Как видно из рис.9, подсистема 'ToolBar' имеет 4 состояния: 'None' - 'Никакое', 'Pressed' - 'Нажато', 'Released' - 'Отпущено', 'Locked' - 'Выбрано'.

При запуске редактора пиктограмм подсистема 'ToolBar' переводится в состояние 'None', которое имеет следующие характеристики:

во-первых, это состояние соответствует положению курсора мыши как внутри, так и вне области панели инструментов;

во-вторых, во время пребывания подсистемы 'ToolBar' в этом состоянии курсор мыши отображается в виде стрелки (ml.sf_edit_icon('normal_cursor'), в строке состояния редактора пиктограмм высвечивается надпись 'Select a tool'- 'Выберите инструмент', а переменной pressedIcon присваивается значение 0 (pressedIcon=0), что соответствует состоянию, когда ни один из инструментов не выбран.

в-третьих, переход из этого состояния может быть осуществлён только в состояние 'Pressed' и только в том случае если курсор мыши находился в области панели инструментов, и при этом была нажата левая клавиша мыши - на рис.9 это отображено условным переходом NBD [in(Focus.Toolbar)].

При входе в состояния 'Pressed' происходят следующие действия: переменной 'pressedIcon' присваивается значение переменной 'focusedIcon' (pressedIcon=focusedIcon), и вызывается функция 'press' (press(pressedIcon,1)). При выходе из состояния 'Pressed' также активируется функция 'press' (press(pressedIcon,0)). Посредством активирования этой функции реализуются визуальные эффекты нажатия и отпускания выбранных кнопок на панели инструментов.

Входными переменными функции 'press' являются переменные 'icon' и 'sp'. В переменную 'icon' помещается информация о выбранном элементе панели инструментов, а переменная 'sp' определяет, какое действие (нажать или отпустить кнопку) нужно выполнить с выбранным элементом. Задание входных переменных производится стандартной записью вызова функции - 'press(icon,sp)', где:

'icon' - переменная, соответствующая выбираемому элементу панели инструментов,

'sp' - переменная, соответствующая типу действия над выбранным элементом.

Т.о. при входе в состояние 'pressed', что соответствует действию - нажатие левой кнопки мыши на панели инструментов, в переменную 'pressedIcon' заносится значение переменной 'focusedIcon' - т.е. происходит идентификация выбираемого элемента панели инструментов. Вызовом функции 'press' - press(pressedIcon,1) (icon=pressedIcon, sp=1) производится активация визуального эффекта - нажатия кнопки выбранного элемента. А при выходе из состояния 'Pressed' вызовом функции 'press' - press(pressedIcon,0) производится визуализация эффекта отпускания кнопки выбранного элемента.

Внутренний алгоритм этой функции представлен на рисунке 10.

Внутренний алгоритм представляет собой набор из 7-ми условий, типа "если, то:", соответствующих 7-ми кнопкам на панели инструментов, предполагающих вызов соответствующей процедуры, при выполнении одного из условий.

Из состояния 'Pressed' система может попасть либо в состояние 'Released', либо в состояние 'Locked', либо в состояние 'None'.

Переход в состояние 'Released' осуществляется тогда, когда одновременно происходит событие 'BM' - движение мыши, и перестаёт выполняться условие равенства переменных 'pressedIcon' и 'focusedIcon'. Т.е. это соответствует такой цепи событий: мы навели курсор мыши на одну из 7-ми кнопок на панели инструментов и нажали левую кнопку мыши - так мы перевели систему в состояние 'Pressed'. Далее если мы, не отпуская кнопки, сдвинем курсор мыши с выбранной первоначально кнопки, то мы переведём систему в состояние 'Released' - 'Отпущенный'. Из состояния 'Released' система может перейти в состояние 'None' - это произойдёт если мы отпустим левую кнопку мыши, или назад в состояние 'Pressed' - если мы. Не отпуская левой кнопки, вернём курсор мыши на выбранную кнопку панели.

Если же мы отпустим левую клавишу, не сдвигая курсор мыши с кнопки выбранного элемента, то произойдёт переход по ветке 'BU' - отпускание кнопки, и система перейдёт либо в состояние 'Locked', либо в состояние 'None'.

Переход в состояние 'None' будет осуществлён в пяти случаях, когда выбираемый элемент не является инструментом "линия" или "карандаш", и при этом переходе будет вызвана функция 'icon_operation(pressedIcon)', которая в зависимости от выбранной кнопки активирует нужную вложенную функцию. Алгоритм функции 'icon_operation(icon)' аналогичен алгоритму функции 'press(icon,sp)'. Т.е. алгоритм является набором из пяти условий "если, то:", при выполнении одного из которых вызывается нужная функция, либо осуществляющая отмену предыдущего действия (кнопка возврата) либо открывающая нужное диалоговое окно (остальные 4 кнопки).

Переход в состояние 'Locked' произойдёт в случае, если выбранным элементом был инструмент карандаш или линия (при этом в процессе перехода по соответствующей ветке будет активирована функция ml.sf_edit_icon('pencil_cursor') или ml.sf_edit_icon('line_cursor'), которая изменит вид курсора мыши из стрелки на карандаш - для карандаша или на крест - для линии). При входе системы в состояние 'Locked' в строке состояния надпись 'Select a Tool', выставляемая при попадании в состояние 'None', заменится надписью 'Tool locked' - 'Инструмент выбран'. Из состояния 'Locked' система может перейти только в состояние 'Pressed', и только в том случае если будет нажата левая кнопка мыши в области панели инструментов. Из состояния 'Pressed' система может перейти в любое другое состояние при выполнении необходимых условий.

Подсистема 'Main' - 'Главная' является подсистемой управления непосредственно самим редактированием пиктограмм. Из рис.6 видно, что система 'Main' имеет 4 состояния: 'Idle' - 'Холостой ход', 'LineDraw' - 'Рисование линией', 'PencilDraw' - 'Рисование карандашом', 'FGColorSelect' - 'Выбор цвета', и ещё одно состояние, при переходе в которое активизируется меню палитры.

При запуске редактора пиктограмм система переходит в состояние 'Idle', при этом вызывается функция ml.sf_edit_icon('create'), которая запускает сам редактор пиктограмм, Состояние 'Idle' является исходным для этой системы, т.к. переходы между тремя оставшимися состояниями осуществляются только через состояние 'Idle'. Переход в состояние 'Idle' осуществляется при появлении события 'BU' - 'кнопка отпущена', т.е. каждый раз, когда мы отпускаем левую или правую кнопку мыши. Реагируя на управляющие события, из состояния 'Idle' система переходит в другие состояния, активизируя при этом необходимые функции. Имеется 4 условных перехода:

1-2)NBD[in(ToolBar.Locked)&&...in(Focus.Canvas)] - была нажата левая кнопка мыши, причём подсистема 'ToolBar' находится в состоянии 'Locked', а подсистема 'Focus' в состоянии 'Canvas'. Это соответствует случаю, когда произошло событие NBD - была нажата левая кнопка мыши, при этом уже был выбран инструмент (причём либо "карандаш", либо "линия"), и курсор мыши находится в поле рисования - 'Canvas'.

Далее этот условный переход разделяется на 2 ветки с условиями:

При входе системы в состояние 'LineDraw' (начало рисования линии - нажатие левой кнопки мыши на поле рисования при выбранном инструменте "линия"), активируется функция ml.sf_edit_icon('anchor_line') - 'закрепить линию', т.е. запомнить начальную точку линии.

Во время пребывания системы в состоянии 'LineDraw' (непосредственное рисование линии, путём протягивания линии от начальной точки до конечной, не отпуская левой кнопки мыши), выполняется функция ml.sf_edit_icon('render_line') - 'выполнять линию', т.е. рисовать линию.

При выходе из состояния 'LineDraw' (завершение рисования линии - отпускание левой кнопки мыши), активизируется функция ml.sf_edit_icon('commit'), которая осуществляет сохранение текущего состояния поля рисования для возможности его восстановления при необходимости. Такая же функция активизируется и при выходе из состояния 'PencilDraw' - т.о. реализуется функция отмены действий. А именно, все изменения поля рисования фиксируются каждый раз, когда происходит выход из состояний рисования 'LineDraw' и 'PencilDraw'. А при нажатии кнопки 'Undo' - 'Отмена' происходит загрузка предыдущего сохранения поля рисования.

При входе системы в состояние 'PencilDraw' и во время пребывания в нём выполняется функция ml.sf_edit_icon('draw_point') - 'рисовать точку', при выходе из состояния 'PencilDraw' - выполняется функция ml.sf_edit_icon('commit').

3) NBD[in(Focus.Palette.Swatch)] - была нажата левая кнопка мыши, причём подсистема 'Focus' находилась в состоянии 'Palette', а внутри него активным было состояние 'Swatch'. Это соответствует случаю, когда была нажата левая кнопка мыши, причём курсор мыши в этот момент находился над одним из цветов в области панели инструментов, т.е. это выбор цвета. По этому переходу система переводится в состояние 'FGColorSelect'. При входе в это состояние (нажатие левой кнопки мыши на одном из цветов палитры) запускается функция ml.sf_edit_icon('cache_color') - 'кэшировать цвет', т.е. происходит запоминание текущего цвета.

При выходе из этого состояния (отпускание левой кнопки мыши), активируется функция ml.sf_edit_icon('fgcolor'), и выбранный цвет становится текущим.

4) ABD[in(Focus.Palette.Swatch)] - была нажата правая кнопка мыши, причём подсистема 'Focus' находилась в состоянии 'Palette', а внутри него активным было состояние 'Swatch'. Это соответствует случаю, когда была нажата правая кнопка мыши, причём курсор мыши в этот момент находился над одним из цветов в области панели инструментов. При этом переходе система попадает в, так называемое, "псевдосостояние", из которого она переходит в исходное состояние. Однако при переходе активируется функция ml.sf_edit_icon('show_color_menu') - 'показать меню цветов', которая запускает всплывающее меню палитры.

Знаете ли Вы, что интуитивное моделирование - это процесс создания модели на основе интуиции, представлений и жизненного опыта.

Cистема численно-математического моделирования MatLab

Stateflow - Simulink

Icon Editor GUI Demonstration