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

На вебинаре будет продемонстрировано, как Engee позволит преобразовать произвольные алгоритмы на Julia в полноценные веб-приложения без необходимости детального погружения в веб-технологии.

«Множество Мандельброта»

Обучение нейросети

Введение в архитектуру пользовательский приложений в Engee

Простейшие приложения

Создание интерактивного осциллографа «Фигуры Лиссажу»

Создание приложения «Множество Мандельброта»

План вебинара

Простейшие приложения

Интерактивный осциллограф

Интерактивная визуализация множества Мандельброта

Реализация интерактивного обозревателя одного из самых знаменитых объектов современной математики.

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

Ознакомиться с примером в сообществе

Спикеры

Работал в Samsung Research Russia и в Корпоративном Университете Сбербанка

В 2010 окончил специалитет «Авиационные приборы и измерительно-вычислительные комплексы» Московского Авиационного Института (государственный технический университет), где преподавал до 2018 г

В 2009 окончил магистратуру «Архитектура сложных программно-аппаратных систем» института ENSTA (Франция)

Инженер ЦИТМ Экспонента, специалист по коммуникации в области машинного обучения и систем автоматизированного управления

Николай Капырин

Работает в области разработки программно-математических алгоритмов с 2012 г.

Занимался созданием интерактивной и динамической визуализации расчётных данных

Занимался разработкой алгоритмов оптимизации телекоммуникационных систем

В 2013 году окончил Сибирский федеральный университет по специальности «Инженер телекоммуникаций»

Инженер ЦИТМ Экспонента по разработке приложений и алгоритмов с 2025 г.

Владимир Сторожук

Запись вебинара

Регистрация в Engee

Текстовая версия вебинара

Введение

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

Давайте начнём с простой ситуации, с которой, уверен, сталкивались многие. У вас есть расчёт или модель — вы потратили время, всё проверили, получили результат. Дальше эту работу нужно передать: коллеге, заказчику или, например, использовать в обучении. И тут возникает типичная проблема — чтобы воспользоваться результатом, человеку нужно разбираться в коде, в параметрах, в логике расчёта. В итоге либо вы тратите время на объяснения, либо расчёт просто не используется так, как мог бы. По сути, возникает разрыв между разработкой алгоритма и его применением.

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

Это особенно актуально в задачах, где:

расчёт используется несколькими людьми,
параметры часто варьируются,
результат нужно быстро показать или проверить,
важно снизить вероятность ошибок при работе с кодом.

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

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

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

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

Рассмотрим структуру пользовательских приложений в виде простой блок-схемы. Все операции выполняются внутри вычислительной среды Engee. Для того чтобы открыть приложение, необходимо выполнить команду запуска в кодовой ячейке стандартного скрипта Engee. В этот скрипт вы можете добавить описания и другие кодовые ячейки. Само приложение содержится в файле скрипта Julia. В нём содержится основной блок приложения, в котором инициализируются входные и выходные переменные, а также содержится обработчик изменений, в котором выполняется вся логика приложения. Также в скрипте приложения содержится функция пользовательского интерфейса, в которой содержатся все необходимые элементы, например кнопки, поля ввода, поля вывода, надписи, поля выбора и другие.

Создание приложения для расчета логарифма

А также инициализируем выходную переменную a, которая будет являться результатом вычислений и приравняем её значение по умолчанию к 3. Далее определим обработчик изменений для переменных x и y. Данный блок будет выполняться при изменении хотя бы одного из этих значений. Внутри обработчика вычислим логарифм с основанием x и числом y и присвоим данное значение переменной a. Конечно, вычислить логарифм можно одной такой строкой кода. Но наша цель показать, как создать пользовательское приложение на таком простом примере. Закроем блок изменения переменных и закроем основной блок приложения.

Приступим к созданию. Для начала нам нужно создать файл скрипта Julia. Назовём его app. Откроем скрипт и приступим к редактированию. Присоединим необходимые библиотеки. Для данного приложения будет достаточно библиотеки Genie Framework. Инициализируем основной блок приложения. Инициализируем входную переменную x, которая будет являться основанием логарифма, и приравняем её значение к 2. Также инициализируем входную переменную y, которая будет являться аргументом логарифма, и приравняем её значение к 8.

Данное приложение будет состоять из 3 строк. Первые 2 из которых — поля ввода для основания и числа. В третьей строке будет отображаться вычисленное значение логарифма.

Рассмотрим создание простейших пользовательских приложений. Создадим приложение, которое будет рассчитывать log y по основанию x. То есть находить число a, при котором выполняется условие:

Итак, мы создали скрипт нашего приложения, теперь осталось его запустить. Для запуска приложения нам необходим дополнительный скрипт, который будет содержать несколько простых команд. Создадим Engee-скрипт, назовём его start, откроем и в первой ячейке напишем команду для запуска нашего приложения, указав наименование файла со скриптом нашего приложения. А во второй ячейке напишем команду для остановки приложения.

Обратите внимание, вычисление происходят практически мгновенно. Изменив число на 0,5 при основании 2, получим значение логарифма -1.

Итак, мы создали приложение вычисление и отображение результатов, в котором производится реактивно с изменением исходных данных. Закроем приложение после завершения работы.

Закроем функцию пользовательского интерфейса и определим страницу с нашим приложением как слэш.

Запустим первую ячейку. И перейдём по ссылке. Наше приложение откроется в новой вкладке браузера. В левом верхнем углу мы видим три текстовых поля.

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

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

Создание приложения, в котором вычисления происходят при нажатии кнопки

А что, если нам необходимо создать приложение, вычисления в котором происходят не при изменении исходных данных, а, например, при нажатии кнопки. Давайте создадим такое приложение. Скрипт нового приложения начинается так же, как и у предыдущего, однако вводится дополнительная логическая переменная — кнопка. Со значением по умолчанию ложь. Она будет отслеживать состояние нажатия кнопки: нажато или нет. Соответственно, по умолчанию не нажато.

Далее, как и в предыдущем примере, инициализируем выходную переменную a, которой будет присвоен результат вычисления. Определим обработчик изменений, которые будут происходить при нажатии кнопки. Определим условия, которые будут выполняться в том случае, если кнопка нажата. Если кнопка нажата, то есть значение переменной «кнопка» истина, то выполняется вычисление значения логарифма. И логической переменной кнопка снова присваивается значение ложь.

Закроем условия для кнопки и закроем обработчик изменений кнопки. А также закроем основной блок приложения. Определим функцию и элементы пользовательского интерфейса так же, как и в предыдущем примере. Только здесь дополнительно добавим кнопку, назовём её «Вычислить». Данная кнопка будет изменять значение логической переменной с таким же наименованием «кнопка», после изменения которой будет срабатывать обработчик изменений, и начнут выполняться вычисления.

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

Итак, мы рассмотрели, как создавать простейшие пользовательские приложения, вычисления в которых производятся как при изменении входных данных, так и после нажатия кнопки.

Создание приложения для моделирования двухканального осциллографа

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

Данные замкнутые кривые впервые исследованы в XIX веке французским учёным Жюлем Антуаном Лиссажу. И названны в честь него как фигуры Лиссажу.

А теперь мы вместе с вами исследуем данные фигуры в Engee. Присоединим необходимые библиотеки. В данном примере, помимо библиотеки GenieFramework нам понадобится библиотека PlotlyBase для визуализации фигур. Определим основной блок приложения и инициализируем входные данные, такие как частоты сигналов и фазовый сдвиг между ними.

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

Определим обработчик изменений для переменных a, b и φ. Внутри обработчика изменений определим создание массива времени с шагом и диапазоном, оптимальным для отображения замкнутых кривых. Определим создание обновляющегося графика, определим вычисление сигналов по горизонтальной оси и по вертикальной оси, где a и b — это частоты сигналов, t — это массив времени, φ — фазовый сдвиг между сигналами.

Обратите внимание, в данном примере амплитуды обоих сигналов не указаны и равны единице. Настроим цвет и толщину линии, установим режим отображения данных как линии и укажем наименование графика. Закроем блок обработчика изменений и закроем основной блок приложения. Определим функцию пользовательского интерфейса. Определим основную область содержания элементов, определим область содержания элементов управления, то есть слайдеров. Создадим заголовок первого слайдера, в котором значение частоты и фазового сдвига сигнала будут изменяться в режиме реального времени. Создадим слайдер для изменения частоты горизонтального сигнала, укажем диапазон изменения от 0 до 9 с шагом 0.1, цвет слайдера и другие параметры.

Создадим заголовок второго слайдера, в котором значение частоты вертикального сигнала будет изменяться в режиме реального времени. Аналогично создадим второй слайдер для изменения частоты вертикального сигнала. Создадим заголовок третьего слайдера для фазового сдвига, в котором значение фазового сдвига также будет изменяться в режиме реального времени. Аналогично создадим третий слайдер. Диапазон изменения переменной в котором от -2π до 2π с шагом 0.01. Обратите внимание, в параметрах каждого слайдера указана та переменная, которая будет изменяться. Укажем параметры области с элементами управления и создадим область отображения графика. Отобразим график с фигурами, настроим параметры области отображения графика и закроем функцию пользовательского интерфейса. Определим главную страницу приложения.

Запустим приложение. При соотношении частот сигналов 1:1 отображается фигура в виде прямой линии.

При соотношении 2:3 фигура с несколькими петлями.

При соотношении 1:2 мы видим фигуру в виде знака бесконечности.

При соотношении 4:3 появляется фигура, состоящая из ещё большего количества петель.

А при изменении фазового сдвига между сигналами меняется структура фигуры. При соотношении частот 1:1 и фазовом сдвиге, не равном нулю, мы видим фигуры в виде эллипса.

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

Создание приложение для исследования множества Мандельброта

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

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

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

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

На основании данных массивов создадим массив комплексных чисел для каждой точки на координатной плоскости. Создадим массив для хранения значений в каждой точке множества Мандельброта. Также создадим массив для подсчёта количества итераций. Также внутри обработчика изменений определим цикл, внутри которого будет выполняться каждая итерация. Создадим маску, выбирающую только те точки, где модуль числа z меньше или равен 2. Применим обновление значения в точках, где маска равна истине, и увеличим счётчик итераций для каждой точки, где выполняются вычисление. Закроем цикл с итерациями.

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

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

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

Закроем функцию пользовательского интерфейса. Определим страницу приложения

Запустим созданное приложение.

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

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

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

Создание приложения для построения логарифмической, амплитудно-частотной и фазо-частотной характеристик линейной стационарной системы

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

Присоединим необходимые библиотеки. Помимо представленных ранее библиотек, нам понадобится библиотека Control Systems. Инициализируем основной блок приложения. И в нём инициализируем исходные данные: коэффициенты числителя и коэффициенты знаменателя передаточной функции, а также начальную и конечную частоты. Передаточная функция — это один из математических способов описания системы. Коэффициенты передаточной функции перечисляются как множители полинома от наибольшей степени оператора передаточной функции к наименьшей. Последний коэффициент является множителем оператора в нулевой степени, то есть единицы. Таким образом, при текущих исходных данных передаточная функция будет иметь следующий вид.

А также инициализируем логическую переменную «кнопка». Инициализируем выходные переменные, такие как ввод, который будет делать кнопку неактивной в случае ошибочного ввода данных. И графики, на которых будут отображаться построенные характеристики. Инициализируем области отображения графиков, обозначим их параметры. Тип шкалы выберем как логарифмический. Инициализируем обработчик изменений. В нём обозначим переменные: числитель и знаменатель. Которые являются преобразованием введённых коэффициентов в виде строки с разделителем в виде точки с запятой в числовые векторы. Обозначим переменную «Ввод», которая будет делать кнопку неактивной при условиях ошибочного ввода. Например, если будет введено несколько точек с запятой подряд или будут введены отрицательные или равные нулю частоты, или, если начальная частота будет выше конечной.

Обозначим условие, которое будет выполняться при нажатии кнопки. В нём обозначим необходимые вычисления из библиотеки Control Systems и построение графиков, а также сброс логической переменной «кнопка» до начального значения.

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

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

Построим графики на основании исходных данных по умолчанию. Обратите внимание, имеется подсказка с примером корректного ввода данных. А если данные введены некорректно, то кнопка станет неактивна. Рассмотрим характеристики для различных типов звеньев.

При коэффициентах 1 к 1 мы получаем характеристику пропорционального звена. Если коэффициент числителя — 1, а знаменатель — 1 и 0, мы получим характеристику идеально интегрирующего звена.

А если наоборот, то идеально дифференцирующего.

При коэффициенте числителя 1, а знаменателя 0,01 и 1 мы получим характеристику апериодического звена.

При коэффициентах знаменателя 0,0001, 0,02 и 1 мы получим характеристику волнового звена.

При коэффициентах знаменателя 0,01 и -1 мы получим характеристику неустойчивого апериодического звена.

При коэффициентах числителя 0,01 и 1 мы получим характеристику дифференцирующего звена первого порядка. А если ввести в числитель коэффициенты 0,0001; -0,002 и 1, а в знаменателе 1, мы получим характеристику форсирующего звена второго порядка.

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

Выводы

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

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