MasterSCADA 4D. Основы разработки графического интерфейса пользователя. Часть 1

• Ксения Харченко, менеджер по маркетингу компании Инсат, приветствует участников вебинара.  

• Вебинар будет проходить чаще, раз в две-три недели, расписание будет опубликовано на сайте.  

• Ксения рассказывает о последних новостях компании.  

• Выпущена пятая версия продукта Мастер Писи-сервер Мадас Универсал.  

• Поддержка 64-битной архитектуры и новые редакции на 10 и 60 тысяч тегов.  

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

• Вебинар посвящен платформе Мастер Скада 4D для автоматизации и диспетчеризации.  

• Обсуждение разработки графического интерфейса пользователя.  

• Вопросы и ответы, запись эфира будет доступна на YouTube.  

• Илья Варламов, ведущий инженер компании Инсат, представляется.  

• Илья включает трансляцию экрана своего компьютера.  

• Вебинар посвящен основам разработки графического интерфейса пользователя в Мастер Скада 4D.  

• Компания занимается разработкой тиражируемого ПО для СУ ТП с 1988 года.  

• Продукты компании: Мастер Скада классической и 3-го поколения, Мастер Скада 4D, Мастер Описи-сервер и ПИД-эксперт.  

• Мастер Скада 4D разрабатывается в свете концепции индустрии 4.0.  

• Система визуализации включает веб-сервер и графический клиент.  

• Визуализация основана на стандарте HTML5, что позволяет использовать любой браузер.  

• Установка специального ПО для клиентских мест не требуется.  

• Илья создает новый проект в среде разработки Мастер Скада 4D.  

• Добавляет рабочее место оператора и окно "Приветствие".  

• Назначает окно стартовым и изменяет его разрешение.  

• Илья добавляет графический элемент "Текст" и выводит фразу "Привет участникам вебинара".  

• Демонстрирует, как можно использовать встроенный клиент визуализации или браузер.  

• Показывает, как настроить и запустить проект в среде разработки.  

• Проект компилируется в JavaScript-код.  

• Графические элементы преобразуются в векторные изображения.  

• Собственный графический клиент на базе движка Chromium.  

• Нет адресной строки для перехода на другие сайты.  

• Возможность открытия страницы в браузере.  

• Пример открытия страницы в браузере с локального хоста.  

• Элементы визуального представления для взаимодействия с системой управления.  

• Элементы текста, кнопки, флаги, ввод пароля и другие.  

• Стандартные и сложные элементы, такие как графики и журналы.  

• Библиотека изображений содержит готовые объекты и алгоритмы.  

• Технологические компоненты, такие как трубопроводы и насосы.  

• Возможность импорта своих изображений.  

• Параметры элементов могут быть динамизированы.  

• Пример использования генераторов для изменения параметров.  

• Добавление генераторов синуса и пилообразного сигнала.  

• Управление уровнем в емкости с помощью технологической переменной.  

• Изменение уровня по закону синуса.  

• Возможность динамизации других параметров емкости.  

• Демонстрация примеров динамизации с использованием параметров.  

• Пример с указателем уровня жидкости в емкости.  

• Использование треугольника для создания указателя.  

• Изменение цвета треугольника на синий.  

• Описание координат X и Y.  

• Перемещение треугольника для проверки координат.  

• Связывание координаты Y с переменной синус.  

• Использование конвертации для преобразования значений.  

• Использование линейно-кусочного способа преобразования.  

• Добавление опорных точек для значений при нуле и единице.  

• Размещение параметра синус рядом с указателем.  

• Настройка конвертации для отображения значения уровня в процентах.  

• Обрезка десятичных знаков для отображения разумного значения.  

• Использование параметра формат значений для указания количества знаков после запятой.  

• Добавление текста в фигурные скобки для отображения процентов.  

• Связывание координаты Y с переменной синус для динамического отображения.  

• Проверка работы динамизации.  

• Запуск режима исполнения для проверки результатов.  

• Проект скомпилирован, но значение не меняется.  

• Проверка координат и опорной точки.  

• Запуск режима исполнения для проверки изменений.  

• Динамизация положения и цвета элементов.  

• Пример с индикатором и параметром цвета.  

• Использование синуса для изменения цвета.  

• Добавление логического параметра для управления индикатором.  

• Связывание логического параметра с кнопкой.  

• Пример использования кнопки для управления индикатором.  

• Пример использования параметра "пила" для изменения угла поворота.  

• Проверка работоспособности и изменения цвета индикатора.  

• Возможность динамизации любых параметров.  

• Использование событий для взаимодействия.  

• Примеры событий: нажатие, клик, ввод символа.  

• Назначение действий на события.  

• Добавление нового окна и размещение тренда.  

• Настройка шкалы тренда для отображения переменной.  

• Назначение действия "открыть всплывающее окно" на клик мыши.  

• Переименование окна и назначение его на параметр "окно".  

• Запуск режима исполнения и проверка работы всплывающего окна.  

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

• Рассматриваются способы навигации с помощью событий и действий.  

• Создается окно "Цех один" и настраивается его размер и разрешение.  

• Добавляется текст "Цех номер один" и увеличивается размер шрифта.  

• Добавляется иконка для перехода между окнами.  

• Назначается событие для открытия окна "Цех один".  

• Создается кнопка для возврата на исходное окно "Приветственное".  

• Добавляется фрейм для отображения нескольких окон.  

• Создается объект "Участок варки" и добавляется окно.  

• Настраивается размер и расположение окна.  

• Добавляется параметр логического типа "Управление" для управления мешалкой.  

• Параметр связывается с вращением для создания функциональной логики.  

• Добавляется объект "Отгрузка" и окно.  

• Настраиваются размеры и расположение окна.  

• Добавляется емкость и трубопровод для отображения процесса отгрузки.  

• Подключается библиотека "Рот инженеринг" для добавления цистерны.  

• Завершается настройка компонентов для отображения процесса отгрузки.  

• Созданы два окна: цех один и участок варки.  

• На кнопку "Участок варки" назначено событие "открыть окно".  

• Окно "Участок варки" открывается во фрейме.  

• Создано окно "Дублировать" без установления связей.  

• В окне "Видеонаблюдение" назначено событие "открыть адрес".  

• В фрейме отображается изображение с видеокамеры.  

• Показан способ добавления кнопок через контекстное меню.  

• Кнопка "Отгрузка" автоматически содержит название окна.  

• Фрейм назначается для открытия окна.  

• Переход на страницы "Участок варки", "Отгрузка" и "Видеонаблюдение".  

• В окне "Видеонаблюдение" отображается изображение стенда.  

• Проект используется с предыдущих вебинаров.  

• Показано, как добавлять растровые и векторные изображения.  

• Растровые изображения нельзя редактировать, векторные можно.  

• Пример добавления логотипа компании.  

• Изменение внешнего вида кнопок через параметры изображения фона.  

• Пример добавления кнопки с измененным фоном.  

• Векторные изображения можно редактировать в графическом редакторе.  

• Использование графического редактора Inkscape для создания векторного изображения.  

• Пример создания светофора.  

• Важность разделения изображений на группы для редактирования в SVG.  

• Сохранение изображения в формате SVG.  

• Импорт изображения в редактор Notepad++.  

• Демонстрация структуры и параметров SVG-изображения.  

• Открываем редактор и выбираем локальную библиотеку.  

• Добавляем окно и импортируем изображение с помощью пункта меню "Импорт".  

• В мастере импорта выбираем изображение и добавляем параметры для управления цветом.  

• Добавляем параметры для управления цветом: красный и зеленый.  

• Настраиваем имена параметров для удобства использования в проекте.  

• Применяем изменения и проверяем, что светофор появился в проекте.  

• Добавляем светофор в проект и уменьшаем его размер.  

• Создаем логические параметры для управления красным и зеленым цветом.  

• Связываем кнопки с логическими параметрами и назначаем цвета.  

• Запускаем режим исполнения и проверяем работу светофора.  

• Нажимаем кнопки для управления красным и зеленым цветом.  

• Демонстрируем, как светофор меняет цвет в зависимости от нажатой кнопки.  

• Подводим итоги вебинара, рассматривая основные моменты пользовательского интерфейса.  

• Обещаем рассмотреть более сложные функции в следующей части вебинара.  

• Вручаем призы участникам, которые правильно ответили на вопросы.  

• Можно вручную редактировать файлы, если не хватает атрибутов в мастере.  

• Пример: проект "Вентиляция" с нарисованными вручную свечами и насосами.  

• Документация по правке файлов доступна для тех, кто хорошо ориентируется в этом.  

• Вебинар по базам данных запланирован, но еще не назначен.  

• Пример анимации SVG: можно написать на почту для получения примера.  

• Документация по SVG доступна для тех, кто вручную правит файлы.  

• Для добавления звука используется функциональный блок "плей саунд".  

• Блок нужно назначить задаче экрана для воспроизведения звука в браузере.  

• Это отдельная тема, которую будут рассматривать отдельно.  

• Экспортировать параметры емкости файла невозможно.  

• Для исправления SVG после импорта нужно импортировать заново.  

• Рекомендуется сохранять файлы в разных форматах для удобства.  

• Авторские права на изображения принадлежат компании.  

• Использование изображений без разрешения нарушает авторские права.  

• Служба технической поддержки всегда готова помочь с вопросами.  

• Благодарность за участие и вопросы.  

• Анонс следующих вебинаров и приглашение оставить отзывы.  

• Обратная связь помогает делать вебинары более полезными.