10. MetaView — увидеть результат и управлять компонентом

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

До этого мы создавали данные в Conf и View. Теперь подключим к ним визуализацию. Для каждого канала уже есть свой экземпляр блока, настройки и результат. Поэтому и карточку опишем один раз — MetaPlatform создаст её для каждой строки Params.

Продолжим пример Correction из раздела 5.5. В нём два канала, ручная подстановка и счётчик смен режима. Если вы разбирали короткие примеры следующих глав, вернитесь к этой конфигурации: Id, Label, Input, Offset и два канала. Код обработки менять не нужно.

1. Что появится на экране

Для поля «Вход» используем копию View.fRaw1. Исходный глобальный fRaw1 опубликован для MetaLab и подачи имитируемого сигнала; его наличие в ML OPC UA само по себе не делает его привязкой MetaView. При штатной генерации MetaView получает привязку к копии из HMI Tags. Если у global задана Area = Signals, имя копии будет View.Signals_fRaw1. Подробнее о двух связях global.

В автоматическом режиме наш COffset прибавляет поправку к входу. В ручном — выдаёт ручное значение. Визуализация передаёт команды и показывает результат; сам алгоритм остаётся в программе ПЛК.

2. Создайте шаблон карточки

В меню MetaView выберите «Добавить экран», назовите его ChannelCard и вставьте HTML ниже. Это готовая карточка: для упражнения достаточно скопировать её целиком.

<div style="width:360px;padding:20px;border:1px solid #dce4e6;border-radius:12px;background:#ffffff">
  <h3>{comment}</h3>
  <p>Вход: <span mv:text="{inputTag}">—</span> °C</p>
  <p>Результат: <strong mv:text="{resultTag}">—</strong> °C</p>
  <p><label>Поправка, °C<br>
    <input type="number" step="0.1" mv:value="{offsetTag}" mv:editable="true">
  </label></p>
  <p><label>
    <input type="checkbox" mv:value="{manualTag}" mv:editable="true">
    Ручная подстановка
  </label></p>
  <p><label>Ручное значение, °C<br>
    <input type="number" step="0.1" mv:value="{manualValueTag}" mv:editable="true">
  </label></p>
  <p>
    <button mv:tag="{manualTag}" mv:action="set-on" mv:editable="true">Ручной</button>
    <button mv:tag="{manualTag}" mv:action="set-off" mv:editable="true">Автоматический</button>
  </p>
  <p><button mv:tag="{manualValueTag}" mv:action="set-value" mv:constant="50" mv:editable="true">Задать 50 °C</button></p>
  <p>Смен режима: <span mv:text="{countTag}">—</span></p>
</div>

Имена в фигурных скобках — подстановки шаблона экрана. Например, {comment} станет заголовком, а {offsetTag} — именем настройки конкретного канала. Отдельно объявлять эти подстановки не нужно: MetaPlatform находит их в HTML.

Для связи с программой здесь используются несколько атрибутов:

Числовое поле записывает новое значение по Enter. Если уйти из поля без Enter или нажать Escape, введённый текст не будет передан в ПЛК. Флажок записывает состояние сразу при переключении.

Кнопка «Задать 50 °C» записывает число в ручное задание. Она сама не включает ручной режим — для этого есть флажок и отдельные кнопки.

3. Свяжите карточку с каналами

Откройте проектный компонент MetaGen Correction. В таблице экспорта MetaView заполните строки:

В столбце Export слева от точки указано имя экрана, справа — имя подстановки. id задаёт уникальное имя полученной карточки, comment — её подпись. Эти две строки нужны для каждого создаваемого экземпляра экрана.

Здесь снова работает знакомый шаблон. Сначала MetaGen подставляет значения строки Params: |Id| превращается в 1, |Input| — в fRaw1. Затем MetaView вставляет полученные строки вместо {inputTag}, {offsetTag} и остальных подстановок HTML.

Для первого канала получится, например:

<input type="number" step="0.1" mv:value="Conf.Offset_1" mv:editable="true">

Для второго — такое же поле с Conf.Offset_2. Мы описали карточку один раз, а получили отдельную визуализацию для обоих каналов. Новая строка Params позволит создать ещё одну карточку по тому же шаблону.

Conf и View здесь — те самые данные, которые мы уже видели в коде. У нужных строк Data должен быть включён Publish; в нашем примере это уже сделано. Таблицу экспорта MetaLab для этого упражнения заполнять не требуется.

4. Соберите общий экран

Карточки можно открывать по отдельности. Чтобы видеть оба канала рядом, в меню MetaView выберите «Добавить сцену», назовите документ Measurements и вставьте:

<div>
  <mv:screen id="Measurements" comment="Измерения" style="width:800px;max-width:100%">
    <h2>Коррекция температуры</h2>
    <div style="display:flex;gap:16px;flex-wrap:wrap">
      <mv:screen ref="Channel_1"></mv:screen>
      <mv:screen ref="Channel_2"></mv:screen>
    </div>
  </mv:screen>
</div>

Сцена задаёт расположение готовых карточек. В ref указаны их ID из таблицы экспорта: Channel_1 и Channel_2. Заголовок общего экрана — «Коррекция температуры». При недостаточной ширине вторая карточка перейдёт на следующую строку.

Карточки создаются по строкам Params, а их размещение в этой сцене мы задаём явно. Если добавите третий канал, добавьте сюда строку <mv:screen ref="Channel_3"></mv:screen>.

5. Сгенерируйте и откройте в RT

1. В меню MetaView → Действия отметьте MetaView OPC UA. Сохраните проект и выполните полную генерацию для MetaCore. Этот профиль добавляет экраны и их привязки в MetaViewArtifact.zip.
2. Скачайте результат через «Проект» → «Скачать».
3. В MetaPlatform Runtime нажмите «+ Импорт файлов» и выберите MetaPlatformArtifacts.zip. Архив содержит и программу, и визуализацию.
4. В разделе MetaCore выберите новый артефакт MetaGen, нажмите «Загрузить», затем «Запустить». Если предыдущая программа ещё выполняется, сначала остановите её. MetaLib для этого примера не нужна.
5. В разделе MetaView выберите артефакт MetaView и нажмите «Загрузить».
6. Нажмите «Из MetaCore», затем «Подключить». Откройте сцену «Измерения».

Чтобы отдать экрану больше места, нажмите «В отдельном окне ↗». На снимках ниже показано это окно; программа при этом продолжает выполняться в RT.

MetaCore выполняет программу, а MetaView читает её данные и передаёт команды по OPC UA. Для выбранной платформы MetaCore адреса уже находятся в результате генерации; импортировать отдельный XML с адресами здесь не требуется.

При исходных настройках первая карточка показывает 20 + 2 = 22, вторая — 25 − 1.5 = 23.5. Ручной режим выключен, счётчики равны нулю.

6. Измените настройку и подайте команды

Проделайте следующие действия на первой карточке:

После изменения поправки с 2 на 3 результат первого канала стал 23. Второй канал сохранил своё значение:

После задания 50 и включения флажка результат первого канала стал 50, а счётчик — 1:

Кнопка «Ручной» включает тот же режим, что и флажок. Это два способа записи в один тег, поэтому состояние флажка меняется и после команды кнопкой.

Поправка хранится в Conf, ручные команды — в View, счётчик — внутри Correction_Inst. На экран приходит опубликованная копия счётчика. Так на одном примере можно увидеть назначение всех трёх мест хранения данных.

Какие ещё действия есть у кнопок

У set-value значение задаётся в HTML. Укажите константу, соответствующую типу тега: число, логическое значение или строку. Выражения ST здесь не вычисляются. Например, mv:constant="50" задаёт ручную температуру, а mv:constant="2" могло бы выбирать числовой режим оборудования.

Для momentary длительность команды при потере связи должен ограничивать алгоритм ПЛК: отпущенная кнопка не гарантирует доставку FALSE, если соединение уже оборвалось.

Что получилось

Один проектный компонент MetaGen создал обработку двух каналов и данные для работы с ними. Один шаблон MetaView создал две карточки. С экрана мы изменили настройку, переключили режим и увидели результат выполнения программы в MetaCore.

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