Введение и приветствие 0:01 Ксения Харченко, менеджер по маркетингу компании Инсат, приветствует участников вебинара. Объявляет о планах проводить вебинары чаще, раз в две-три недели. Упоминает о последних новостях компании.
Последние новости компании 1:12 Выпуск пятой версии продукта «Мастер Писи-Сервер Мадас Универсал». Поддержка 64-битной архитектуры. Новые редакции на 10 и 60 тысяч тегов. Триал-версии доступны для скачивания.
Программные ключи и дистрибутивы 2:03 Реализация поддержки программных ключей защиты для всех продуктов. Активация ключей возможна онлайн и офлайн. Единые дистрибутивы для всех продуктов. DVD-диски комплектуются только по запросу.
Тема вебинара 3:00 Вебинар посвящён платформе «Мастер Скада 4D». Обсуждение разработки графического интерфейса пользователя. Темы: графические элементы, их свойства, динамизация, события, действия, навигация.
Организация вебинара 4:51 Вопросы принимаются в разделе «Вопросы» в правом верхнем углу платформы. Запись вебинара будет доступна на YouTube-канале компании. Рассылка материалов участникам после вебинара.
Основы разработки графического интерфейса 6:30 Обсуждение основ разработки графического интерфейса в «Мастер Скада 4D». Приветствие участников вебинара.
Продукты компании 7:34 Компания Инсат разрабатывает тиражируемое ПО для СУТП с 1988 года. Продукты: «Мастер Скада» двух поколений, «Мастер Описи Сервер», «PID Эксперт».
Архитектура визуализации 9:07 Система визуализации включает веб-сервер и графический клиент. Визуализация основана на стандарте HTML5. Возможность подключения через любой браузер.
Создание проекта 10:29 Создание нового проекта в среде разработки «Мастер Скада 4D». Добавление объекта «АРМ» и окна «Приветствие». Назначение окна стартовым.
Настройка окна 12:39 Изменение разрешения окна для улучшения отображения. Добавление графического элемента «Текст» и вывод текста «Привет участникам вебинара».
Запуск режима исполнения 15:15 Проект компилируется в JavaScript-код. Графические части преобразуются в векторные изображения. В графическом клиенте отображается созданный проект.
Особенности графического клиента 15:42 Клиент основан на движке Chromium, похож на браузер. Отличается отсутствием адресной строки. Возможность открытия страницы в обычном браузере.
Взаимодействие с сервером 16:29 Запуск новой копии браузера для доступа к локальному серверу. Набирание IP-адреса сервера для отображения страницы.
Элементы визуального представления 17:33 Элементы для взаимодействия человека с системой управления. Текстовые элементы, кнопки, флаги, ввод пароля, инкремент. Стандартные и сложные элементы, включая графики и журналы.
Библиотеки изображений 19:22 Библиотека BOBJ содержит технологические компоненты и алгоритмы. Примеры компонентов: трубопроводы, насосы, клапаны. Возможность импорта собственных изображений.
Динамизация параметров 21:00 Параметры элементов могут быть динамизированы. Связывание параметров с переменными проекта. Использование генераторов для демонстрации динамизации.
Работа с генераторами 22:01 Добавление генераторов синуса и пилообразного сигнала. Настройка параметров генераторов. Передача параметров с выходов функциональных блоков в дерево системы.
Динамизация уровня в ёмкости 26:08 Управление уровнем в ёмкости через параметр синуса. Изменение уровня по закону синуса. Возможность динамизации других параметров ёмкости.
Создание указателя уровня жидкости 28:12 Использование параметров для динамизации уровня жидкости в ёмкости. Создание указателя в виде треугольника, размещённого рядом с ёмкостью. Изменение цвета треугольника на синий.
Настройка параметров расположения треугольника 29:24 Объяснение координат X и Y: X — по горизонтали, Y — по вертикали. Определение текущего положения треугольника по высоте: 340. Перемещение треугольника для отображения верхнего уровня жидкости.
Связывание координаты Y с переменной 30:23 Перетаскивание переменной синус на координату Y. Наложение конвертации для преобразования значения без программирования. Настройка линейно-кусочного способа преобразования с двумя опорными точками: при нуле — 340, при единице — текущее положение.
Добавление значения уровня рядом с указателем 32:03 Размещение параметра синус рядом с указателем. Настройка конвертации для отображения уровня в процентах. Обрезка десятичных знаков с помощью параметра формата значений.
Добавление текста «проценты» 34:07 Использование фигурных скобок для добавления текста «проценты». Динамизация положения текста вместе с указателем.
Отладка проекта 35:26 Проект скомпилирован, но некоторые значения не меняются. Проверка связей между элементами, использование конвертера линейно-кусочной функции. Коррекция опорных точек: ноль соответствует 340, единица — 160.
Динамизация параметров 36:47 Обсуждение возможности динамизации любых параметров, не только положения. Пример динамизации цвета индикатора: использование синуса для изменения цвета от жёлтого до красного. Добавление логического параметра для управления индикатором.
Управление индикатором 40:10 Создание кнопки для включения/выключения индикатора. Связывание логического параметра с параметром «работа» индикатора.
Нестандартное использование параметров 41:12 Связывание параметра «пила» кнопки с параметром «угол поворота». Демонстрация вращения кнопки при нажатии.
Взаимодействие пользователя и системы управления 43:44 Переход к обсуждению событий как способа взаимодействия пользователя и системы управления. Переключение в режим отображения событий. Примеры событий: нажатие, отпускание, клик мыши, ввод символа.
Создание всплывающего окна 45:41 Добавление нового окна и размещение в нём тренда. Настройка шкалы тренда для отображения технологической переменной. Назначение действия «открыть всплывающее окно» на клик мыши.
Тестирование всплывающего окна 48:37 Запуск режима исполнения и проверка работы всплывающего окна. Открытие окна при щелчке по элементу. Возможность создания более сложных всплывающих окон с управлением.
Создание окна «Цех один» 49:44 Добавление окна и его переименование в «Цех один». Настройка размера окна: 920x480. Добавление текста в окно с надписью «Цех номер один».
Настройка навигации 51:20 Использование библиотеки Base Icons для добавления иконок. Назначение события «открыть окно» для перехода на окно «Цех один». Создание кнопки «назад» с иконкой домика и зеркальным действием.
Проверка навигации 53:53 Запуск режима исполнения для проверки работы навигации. Демонстрация перехода между окнами «Приветственное» и «Цех один».
Создание фрейма 54:12 Добавление фрейма в окно для отображения нескольких источников. Перетаскивание контейнера окна из папки «Панели» на окно. Увеличение размеров контейнера окна.
Создание объекта «Участок варки» 55:39 Создание объекта «Участок варки» и добавление окна. Настройка размера окна для соответствия контейнеру. Добавление текста для отображения названия объекта.
Управление мешалкой 58:03 Добавление параметра логического типа «управление» для управления мешалкой. Связывание параметра с вращением для отображения динамики.
Создание объекта «Отгрузка» 59:14 Добавление объекта «Отгрузка» и окна. Настройка размеров окна и шрифта. Добавление компонентов: ёмкость, труба, клапан, уголок.
Завершение настройки «Отгрузки» 1:02:09 Подключение библиотеки «Рот Инженеринг» для добавления цистерны. Завершение настройки компонентов для отображения процесса отгрузки.
Создание кнопок и окон 1:02:46 Создаём два окна: «Цех один» и «Участок варки». Настраиваем кнопку «Участок варки» для открытия окна «Участок варки». Назначаем событие «клик мыши» для открытия окна.
Настройка фрейма и окна по умолчанию 1:03:20 Перетаскиваем окно «Участок варки» в параметр «окно». Задаём фрейм для открытия окна без нового окна. Связываем окно по умолчанию с фреймом.
Создание окна «Видеонаблюдение» 1:05:06 Создаём окно «Видеонаблюдение». Назначаем событие «клик мыши» для открытия адреса. Вставляем внутренний адрес 10.06.52 для просмотра видео.
Демонстрация работы кнопок 1:09:24 Загружаем конфигурацию и проверяем работу кнопок. Переключаемся между окнами: «Участок варки», «Отгрузка», «Видеонаблюдение». Проверяем отображение изображений и взаимодействие с элементами.
Добавление растровых изображений 1:11:32 Добавляем растровое изображение в мимосхему. Настраиваем параметры изображения, например, логотип компании. Изменяем внешний вид кнопок, добавляя и настраивая изображения фона.
Работа с векторными изображениями 1:15:06 Объясняем преимущества масштабируемой векторной графики. Рисуем светофор в редакторе Inkscape. Разделяем элементы изображения на группы для удобства редактирования.
Сохранение и анализ векторного изображения 1:19:23 Сохраняем изображение в формате SVG. Открываем файл в редакторе Notepad++ для анализа. Проверяем параметры изображения и группы элементов. Понимаем, как математическая модель рендерится при отображении в браузере.
Импорт изображения в редактор 1:20:53 Открываем редактор Master CAD 4D и выбираем локальную библиотеку. Нажимаем «Добавить окно» и выбираем пункт меню «Импорт». Выбираем изображение светофора и открываем мастер импорта.
Настройка параметров изображения 1:21:52 Добавляем параметры для управления элементами светофора. Выбираем ID элементов SVG и задаём атрибуты цвета. Настраиваем имена параметров для удобства работы.
Применение светофора 1:23:08 Применяем светофор для отображения состояния отгрузки. Создаём логические параметры для управления красным и зелёным цветами. Вставляем кнопки для управления параметрами светофора.
Связывание параметров и настройка цветов 1:25:07 Связываем кнопки с логическими параметрами светофора. Настраиваем конвертацию цветов для красного и зелёного параметров. Устанавливаем цвета для состояний «тру» и «фолс».
Тестирование интерфейса 1:26:45 Запускаем режим исполнения и тестируем работу светофора. Проверяем изменение цветов при нажатии кнопок.
Завершение вебинара 1:27:57 Подводим итоги основной части вебинара. Анонсируем следующую часть вебинара о более сложных инструментах. Вручаем призы участникам.
Вручение призов 1:29:06 Определяем победителя среди участников чата. Вручаем приз Артёму Золотухину. Обсуждаем возможность вручения приза Юрию Горелому.
Ответы на вопросы 1:31:38 Рассматриваем возможность продления вебинара для ответов на вопросы. Упоминаем вопрос от Руслана Мулякова о вставках атрибутов векторного редактора.
Ручная настройка файлов 1:32:28 Возможность ручного редактирования файлов и прописи параметров. Пример из демопроекта «Вентиляция»: свечи и насосы нарисованы вручную. Доступ к документации для самостоятельной настройки файлов.
Вебинары и анимация 1:33:15 Упоминание о вебинаре по базам данных, который ещё не назначен. Сложности с анимацией, возможность получения примера по запросу. Пример анимации вентиляторов и насосов.
Работа с XML-файлами 1:34:30 Демонстрация XML-файла, сформированного при импорте. Возможность ручной прописи параметров в XML. Инструкция для сложных задач в SVG.
Добавление звука в проект 1:35:33 Использование функционального блока PlaySound для воспроизведения звука. Назначение блока в задачу экрана для воспроизведения звука в браузере. Обещание отдельной темы по добавлению звука.
Экспорт и импорт файлов 1:38:04 Отсутствие возможности экспорта параметров ёмкости в файл. Рекомендация импортировать файлы заново для исправления. Советы по сохранению файлов в разных форматах: оптимизированные для импорта и исходники для правки.
Авторские права 1:39:57 Предупреждение о нарушении авторских прав при использовании изображений из браузера. Призыв уважать чужой труд.
Завершение вебинара 1:41:15 Благодарность участникам за внимание и вопросы. Анонс подарка для Артёма Золотухина при условии обратной связи. Обещание рассылки записи вебинара и формы обратной связи. Призыв следить за новостями для получения информации о следующих встречах.
