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

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

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

Первоначальный дизайн

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

На первом каркасе мы видим боковое меню (красный контур), а затем страницу (зеленый контур) для обзора производства.

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

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

Разбивка инструментальной панели

Меню боковой панели

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

Производственная сводка

Вторая панель отображает карту объекта и некоторые ключевые показатели, представленные в виде значений и графиков. Эти части будут собраны из компонентов карты и графиков.

Обзор завода

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

Следующие шаги

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