Универсальный GUI. Заметки про Matlab. Создание графического интерфейса пользователя (GUI Matlab)

В Matlab существует два способа создать графический интерфейс пользователя (Graphical user interface, GUI):

Полуавтоматический способ создание GUI с помощью инструмента GUI Layout Editor (команда guide в консоли Matlab)
"Ручной" программный способ создания GUI (GUI programmatically)

У каждого способа есть свои недостатки и преимущества. GUI Layout Editor больше подходит для начинающих пользователей, а программное создание GUI - для профессионалов.

GUI Layout Editor

В редакторе GUI Layout Editor (команда guide в консоли Matlab) можно вручную создавать все элементы интерфейса: панели, кнопки, чекбоксы и т.д.

В результате создания интерфейса получим два файла: fig-файл с «фигурой» самого интерфейса и m-файл, который создается самим Matlab и содержит программный код всех элементов интерфейса.

Главное преимущество guide - легко сделать простой GUI, т.к. весь код для интерфейса генерируется самим Matlab. Для работы программной частью GUI достаточно изучить принцип обмена данными с помощью команд setappdata и getappdata (что является стандартным приемом для обмена данными между различными элементами GUI).

Но более профессиональный подход – это создавать GUI программно, не пользуясь guide.

GUI programmatically

Преимущества програмного создания GUI:

Легче управлять кодом GUI (код лучше структурирован, легче создавать новые элементы, удалять старые и т.д.)
Нет отдельного fig-файла для интерфейса и отдельного программного m-файла (так как любое обновление fig-файла в guide требует соответствующего обновления m-файла и может привести к нежелательным эффектам).

Ознакомиться с guide, конечно, нужно на первых порах, чтобы лучше понять GUI в Matlab, но, по-моему, стоит переходить к программному созданию GUI чем быстрее, тем лучше.

А вот здесь и открывается другая сторона медали. Главная трудность в программном создании GUI в MATLAB то, что нужно вручную указывать расположение всех элементов интерфейса (параметр "Position" с 4-я элементами: x,y координаты + ширина и длина). Это очень неудобно. В guide это проблема решается очень просто - с помощью инструмента Tools->Align Objects .

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

Итак, одной из важных проблем при программном создании GUI является расположение элементов. Хороший обзор инструментов, которые помогают решить эту проблему есть по ссылке Matlab layout managers . К сожелению, только в комментариях к обзору по ссылке упомянули . Вот об этом тулбоксе и пойдет речь дальше.

С помощью полностью решается проблема с визуальным оформлением GUI (не зря попал в выборку программы недели на главном портале Matlab Pick of the Week).

GUI with GUI Layout Toolbox

Основная идея этого тулбокса вынесена в его название - это создание макетов (layouts), которые упрощают расположение элементов в главном окне GUI. У этого тулбокса очень хорошая инструкция (только на английском языке).

Общая инструкция по работе с очень простая:

1. Создаем сетку (uiextras.Grid) (или можно этот шаг пропустить)

2. На сетку помещаем панели (uiextras.Panel),

3. На панели помещаем боксы (uiextras.Box)

4. В боксы помещаем элементы управления: кнопки, оси или еще что-нибудь.

Теперь о расположении всех элементов интерфейса заботиться .

Наглядный пример GUI с помощью с моими комментариями можно скачать по ссылке 29 .

В моем примере обмен данными между функциями и элементами интерфейса происходит с помощью приема, который называется Sharing Variables Between Parent and Nested - переменная, объявленная в главной функции, видима во всех вложенных функциях. Этот прием можно использовать вместо стандартных setappdata и getappdata.

Вместо заключения

Раньше я редко доводил программы до GUI и если и делал это, то только с помощью guide. Но с GUI Layout Toolbox эта задача очень сильно упростилась, за это большое спасибо разработчикам этого тулбокса.

Здравствуйте! Меня зовут Халитов Кирилл, я аспирант из МГУДТ (Московский государственный университет дизайна и технологии (МГУДТ)). В моей диссертации возникла задача упростить процесс создания интерфейса для локального и веб-приложения и в итоге получился сабж.

Введение

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

Кроме того, в связи с бурным распространением интернета популярным направлением разработки ПО стала разработка веб-приложений или веб-сервисов. Веб-приложение является полезным дополнением к клиентской прикладной программе (приложению). Обычно веб-приложение даёт возможность удалённого использования мониторинговой системы. Это означает, что пользователь не привязан к месту расположения аппаратной части мониторинговой системы и может использовать её из любой точки мира, где есть рекомендуемое интернет-соединение. Важно заметить, что разработка веб-приложений в значительной степени отличается от разработки клиентских приложений и это в свою очередь создаёт некоторые проблемы. В частности, это проблема создания универсального графического интерфейса пользователя (GUI). Чтобы клиентское приложение и веб-приложение были реализованы в едином графическом стиле, необходимо приложить достаточно усилий как разработчику интерфейса клиентского приложения, так и разработчику интерфейса веб-приложения. В конечном счёте величина усилий одного или другого разработчика будет зависеть от того, интерфейс какого приложения будет задавать общий стиль.

Современные способы построения интерфейсов

Рассмотрим наиболее популярные в настоящий момент способы построения интерфейсов клиентских приложений на языке C++, как наиболее используемом для разработки ПО, для ОС Microsoft Windows (MS Windows) и ОС Linux. Главным средством разработки ПО для MS Windows является MS Visual Studio . Эта интегрированная среда разработки (IDE) позволяет разрабатывать ПО на разных языках программирования, но основными языками, конечно, являются C++ и C#. Для разработки интерфейса приложения имеются два основных средства - Windows Forms (WinForms) и Windows Presentation Foundation (WPF). Большая часть существующих приложений для MS Windows разработана с использованием WinForms, однако с появлением более современных версий ОС (MS Windows 7, 8), система WPF становится более популярной. Кроме того, последние версии MS Visual Studio позволяют использовать язык разметки HTML5 для построения интерфейсов, близких по стилю к нативным веб-приложениям. Однако стоит заметить, что коммерческая лицензия MS Visual Studio является платной, как и лицензия MS Windows, что несомненно является недостатком для низкобюджетных проектах.

Если говорить о низкобюджетных проектах, то тут наиболее подходящим вариантом является ОС Linux. Помимо того, что большинство дистрибутивов этой ОС являются абсолютно бесплатными, в том числе и для коммерческого использования, также имеется ряд бесплатных средств для разработки качественного ПО для ОС Linux. Самым распространённым средством для разработки ПО на языке С++ является кроссплатформенный инструментарий Qt . Важно подчеркнуть, что Qt позволяет разрабатывать приложения не только для ОС Linux, но и для MS Windows, Mac OS X, Android и других UNIX-подобных ОС. Разработчики Qt предлагают как бесплатную для коммерческого использования, так и платную лицензию с дополнительными возможностями. Но исходя из современной практики разработки ПО с помощью этого инструментария, бесплатной лицензии оказывается больше чем достаточно.

Если проводить аналогию с MS Visual Studio, то в Qt мы имеем IDE Qt Creator. Здесь альтернативой WinForms являются так называемые виджеты (Qt Widgets), а альтернатива для WPF - Qt Quick. Также в Qt Creator имеется возможность создания интерфейсов на основе HTML5. Но наиболее интересным модулем инструментария является встраиваемый веб-движок WebKit, который лежит в основе всех современных веб-браузеров. Подобный модуль имеется и в MS Visual Studio, но он имеет ряд ограничений, и тем более нас больше интересуют низкобюджетные средства, которые позволяют уменьшить издержки при создания программного продукта. Веб-движок - это ядро браузера, он отвечает за правильное отображения веб-страниц. Модуль Qt WebKit позволяет создавать интерфейс клиентского приложения с использованием техники разработки интерфейсов веб-приложений. В основе создания интерфейса веб-приложения лежит устоявшийся стек технологий. Он включает язык разметки HTML (HTML 4, 5), каскадные таблицы стилей (CSS 2, 3) и скриптовый язык JavaScript с богатым выбором дополнительных библиотек (каркасов). Отдельного внимания заслуживает тот факт, что скорость появления новых полезных каркасов для языка JavaScript стремительно растёт, а это делает разработку, насыщенных функционалом приложений, более быстрой и удобной.

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

Традиционный способ: Qt WebKit + Qt-костыли

Рассмотрим традиционный способ создания универсального GUI с помощью модуля Qt WebKit на примере модуля визуализации данных системы акустического мониторинга, разрабатываемой в рамках кандидатской диссертационной работы . Под системой акустического мониторинга подразумевается система, включающая аппаратную и программную части. Аппаратная часть системы состоит из сенсорной сети акустических датчиков, данные с которых обрабатываются на микроконтроллере и отправляются по какому-либо интерфейсу (UART, IEEE 802.X и др.) на персональный компьютер (ПК). Программная часть состоит из набора прикладных программ, работающих как на локальном ПК (клиентское ПО), так и на удалённом сервере (серверное ПО).

Традиционный метод подразумевает использование межпроцессного

Рис. 1. Традиционный метод реализации универсального GUI

Взаимодействия по средствам встроенного механизма Qt. Здесь подразумевается взаимодействие между основной логикой клиентского приложения, изображённой на рис.1 как Обработчик данных , и GUI -элементом. Одним из недостатков такого подхода является то, что код для реализации GUI на языке JavaScript будет иметь специфические функции, которые будут актуальны только для клиентского Qt-приложения. Для серверного приложения, отвечающего за GUI, нужен будет другой, специфичный для серверной реализации, код. Например, в случае использования PHP-скрипта для реализации основной логики серверного приложения, понадобится реализация межпроцессного взаимодействия с помощью какой-либо другой технологии (AJAX или WebSocket). Отсюда следует ещё один недостаток, а именно использование дополнительного языка программирования для реализации основной логики серверного приложения и разработка нового алгоритма межпроцессного взаимодействия.

Более интересный подход: Qt WebKit + WebSocket

Для решения этих проблем предлагается новый метод, основанный на использования упомянутой выше технологии WebSocket. Суть метода заключается в том, чтобы унифицировать метод межпроцессного взаимодействия между основной логикой приложения и GUI, как на клиентской стороне, так и на серверной. В этом случае появляется возможность использования JavaScript кода для реализации универсального для обеих сторон GUI.

Рис. 2. Новый метод реализации универсального GUI

На рис. 2. видно, что теперь для межпроцессного взаимодействия, как для клиентской, так и для серверной части используется технология WebSocket. То есть теперь мы имеем один универсальный JavaScript код для разных приложений. В этом случае необходимым условием является серверное приложение, основная логика которого реализована с помощью Qt, на не совсем привычном для веб-разработчиков, языке C++. С одной стороны такой подход к реализации серверного приложения усложняет задачу для узкоспециализированного веб-разработчика. Но с другой стороны мы имеем универсальные части кода, которые позволяют нам сэкономить время на дублировании одних и тех по смыслу алгоритмов на разных языках. Важно также подчеркнуть, что для использования технологии WebSocket необходима дополнительная библиотека, которая имеется в интернете в свободном доступе или включается по умолчанию в более поздние версии Qt.

Рис. 3. Локальное (справа) и серверное (слева) приложения, запущенные на ОС Ubuntu 14.04

На рис. 3 приведён пример реализации нового метода создания универсального GUI для ОС Ubuntu 14.04. Как видно на рисунке, в конечном итоге мы получаем универсальный интерфейс, как для локального приложения, запущенного в качестве исполняемого файла ОС, так и для серверного приложения, запущенного в современном веб-браузере. Так как для разработки ПО используются кроссплатформенные инструменты, это позволяет говорить о простой переносимости программного продукта на другие ОС в будущем.

На самом деле все фреймворки для написания GUI — проблемные. Я полностью согласен с фразами о том, что какой фреймворк не выбери, написание кода GUI будет не добавлением, а сращиванием. Обязательно придется переделывать код так, чтобы он вписывался в GUI, а не делать GUI на основе существующего кода. Поэтому надеяться на то, что какой-то фреймворк будет лучше для моего проекта — бесполезно. И заявления о том, что какой-то фреймворк лучше подходит для каких-то задач, скорее миф чем правда.

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

Приложение	Фреймворк
acronis true image	QT
skype	QT
araxis merge	свой на основе ATL
teamviewer	WTL
EaseUS Partition Master Home Edition	GTK
Folder Lock	HTMLLayout
agnitum outpost	HTMLLayout
hex workshop	MFC
vmware	свой на основе ATL
trillian	свой на основе GDI+
drweb	MFC + WTL
symantec	SymHTML
kaspersky	QT
NOD	MFC

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

Как вы видите, на любом фреймворке можно написать сложный GUI, и на любом фреймворке можно продолжать его расширять. И как видите, некоторые компании не пугает факт того, что свой делать фреймворк — это долго и сложно. Пишут.

На что же влияет выбор фреймворка?
1) Конечно же фреймворк влияет на внешний вид.

MFC, ATL, WTL и их потомки

Комментировать особо нечего. Если сильно постараться, то можно получить конфету похожую на интерфейс windows 7 (Nod), но в целом получается «классика».

Белое, но не пушистое, модное направление.

HtmlLayout и производные

Совсем новое направление, но люди используют. И получается, имхо очень даже прилично.

Экзотика

А GTK-то может быть вполне приятным глазу.

Астру cerulean studios «пилили», насколько я помню, почти 3 года. Все это время они, похоже, изобретали свой кросплатформенный фреймворк с панелями и виджетами на основе GDI+. Поражаюсь как они смогли так долго не выпускать новых версий и не помереть…

2) Фреймворк влияет на сложность поиска людей
Вот вбили вы себе в голову к примеру, что надо писать GUI только на WxWidgets. Даете объяление, находите какого человека, который думает что знает как писать на wxWidgets. Он начинает делать GUI. GUI растет, кода все больше, а потом этот человек берет и уходит. А за то время, пока вы писали GUI, ситуация изменилась, и желающих писать на wxWidgets больше не осталось. Все ушли на WPF, к примеру. Или еще есть любители wxWidgets, но неспособные разгрестись в сложном GUI, который был создан первым человеком, а профессионалов нет. И что дальше? Переписывать заново?

Поэтому стоит сделать запрос вида «резюме с++ ИМЯ_ФРЕЙМВОРКА» в гугл чтобы оценить сложность поиска человека. На момент написания статьи гугл выдавал вот такое:
MFC — 120000 результатов
WTL — 17600
ATL — 46700
QT — 112000
Htmlayout — 113 (sic!)
GTK — 7600
wxWidgets — 17500
У вас все еще есть вопросы?
Конечно же, эта статистика гугла не говорит о том, что ATL-программиста ровно в 3 раза легче найти, чем WTL-программиста. Но какая-то корреляция здесь есть: ATL-программистов все же проще будет найти, чем человека для GTK или WTL.

Обзор библиотек для создания графического интерфейса пользователя (GUI).

Создание собственного виджета в PyQt5

PyQt5 имеет богатый набор готовых виджетов. Тем не менее, нет в мире инструментария, способного предоставить все виджеты, в которых программисты могут нуждаться для своих приложений. Библиотеки обычно предоставляют только самые распространенные виджеты, такие как кнопки, текстовые виджеты или ползунки. Если есть необходимость в более специализированных виджетах, мы должны создать их сами.

Рисование в PyQt5

Система рисования PyQt5 способна обрабатывать векторную графику, изображения и шрифты. Рисование необходимо в приложениях, когда мы хотим изменить или улучшить существующий виджет, или мы создаём пользовательский виджет с нуля. Чтобы сделать рисунок, мы используем API рисования, предоставленное инструментарием PyQt5.

Перетаскивание (drag & drop) в PyQt5

Виджеты в PyQt5 (часть 2)

Виджеты в PyQt5

Виджеты – это основные строительные кирпичики приложения. PyQt5 имеет множество разнообразных виджетов, включая кнопки, чекбоксы, ползунки и списки. В этой части руководства, мы опишем несколько полезных виджетов: QCheckBox, ToggleButton, QSlider, QProgressBar и QCalendarWidget.

Диалоговые окна в PyQt5

Диалоговые окна (диалоги) являются неотъемлемой частью большинства современных графических приложений. Диалог в обычной жизни - это беседа между двумя и более людьми. В компьютерном приложении, диалог – это окно, которое используется, чтобы «беседовать» с приложением. Диалоги используются для ввода и изменения данных, изменения настроек приложения, и так далее.

Графический Интерфейс пользователя (GUI) используется, чтобы принимать более дружественный вид для пользователей. GUI изменяется от приложения к приложению и может состоять из текстовых полей вода, меток, списков и других различных элементов. Различные языки программирования обеспечивают различные пути и средства создания GUIs; VB или VC ++ могут обеспечить подход "drag and drop" для создания GUI, тогда как С ++ требует, чтобы программист написал полный код для формирования GUI.

В общем, элемент GUI создается, используя следующую процедуру:
1. Создайте элемент. Например, checkbox или label или listbox и т.д..
2. Определите его начальное появление.
3. Определите, должен ли он занимать определённую позицию или любую заданную по умолчанию.
4. Добавьте его на экран.

Abstract Windowing Toolkit (AWT) - набор классов Java, которые позволяют нам создавать графический интерфейс пользователя (GUI) и принимать пользовательский ввод через клавиатуру и мышь. AWT обеспечивает нас различными элементами, которые позволяют создавать привлекательный и эффективный GUI.
■ Контейнеры
■ Компоненты
■ Менеджеры компоновки
■ Графика и рисование
■ Шрифты
■ События

6.2.1 Контейнер

Контейнер - область, которая может содержать элементы. Контейнер подобно окну. Также как и окно, контейнер может иметь рамки, области окна, замки и зацепки, контейнер может содержать меньшие по размерам компоненты. Мы можем иметь стеклянные области окна или толстые ставни, поэтому мы и можем открыть или закрыть окно.

В пакете java.awt есть класс по имени Container , который непосредственно или косвенно получает две обычно используемых контейнера Frame (фрейм) и Panel (панель).

Фреймы и Панели - обычно наиболее используемые контейнеры. Фрейм - отдельное окно, тогда как Панель - область, находящиеся в пределах окна. Панель не имеет границ и отображается в пределах окна, отображаемого с помощью браузера или appletviewer. Appletviewer - инструмент, обеспеченный JDK, чтобы просматривать апплет. Фрейм - подкласс Окна и отображается в пределах отдельного окна, и имеет границы.

6.2.2 Фрейм

Фрейм - окно, которое является независимым от апплета и от браузера. Он может использоваться как контейнер или как компонент. Он может быть создан, используя конструкторы следующим образом:

Frame()
Создаёт фрейм, который является невидимым
Frame(String title)
Создаёт невидимый фрейм с данным заголовком Пример 1 показывает, как создавать фрейм.

Пример 1:
import j ava.awt.*;
class FrameDemo extends Frame {
public FrameDemo(String title) {
super(title);
}
public static void main (String args) {
FrameDemo f=new FrameDemo(I have been Framed!!!) ;
f.setSize(500,500);
f.setVisible(true);
}
}

Определяемый пользователем класс FrameDemo - подкласс класса Frame. Этот класс (FrameDemo) имеет конструктор, в котором мы вызываем метод super (), который в свою очередь вызовет конструктор суперкласса (в данном случае Frame). Цель super () здесь состоит в том, чтобы вызвать родительский конструктор класса, который тогда создаст объект дочернего класса для создания фрейма. Кроме того, это также позволит объекту фрейма быть доступным через возможности класса. Однако, фрейм будет невидим и не имеет никаких измерений. Чтобы позаботится об этом, мы используем два метода в методе main() - setSize () и setVisible () .

Вывод был бы как показано на рисунке 6.2.

Рисунок 6.2: Вывод примера 1

6.2.3 Панель

Панель - конкретный подкласс Container и используется, чтобы объединять различные компоненты вместе. Самый простой способ создания Панели - через ее конструктор Panel () .

Пример 2 показывает, как создать панель.

Пример 2:
import j ava.awt.*;
class PanelTest extends Panel {
public static void main(String args ) {
PanelTest p= new PanelTest();
Frame f=new Frame(Testing a Panel!);
f.add(p);
f.setSize (400,400) ;
f.setVisible(true);
}
}

Так как мы не можем увидеть панель непосредственно, мы должны добавить её к фрейму. Итак, мы создаем новый Фрейм и добавляем недавно созданную Панель к Фрейму. Однако, фрейм будет невидим и не имеет никаких измерений. Мы используем два метода в методе main () - setSize () и setVisible () , чтобы установить размер и отобразить фрейм соответственно.