Веб-редактор FBD-диаграмм на основе SVG по стандарту IEC 61131-3

Разработай web-интерфейс для построения FBD-диаграмм (Function Block Diagram) по стандарту IEC 61131-3, используемому в промышленной автоматике. Проект сложный, но выполнимый для мотивированного разработчика с junior/middle уровнем. Главное — вдумчивый подход, активное участие в ревью и желание учиться.

Предоплата 100 000 ₽

Цель и задачи работы

Цель — создать web-редактор FBD-диаграмм с сохранением данных в SVG-формате, содержащем метаданные для логического анализа и обработки. Это должен быть полноценный редактор с возможностью построения схем из библиотечных элементов, сохранения и загрузки файлов, а также интерактивным UI.

Основные задачи:

• Изучить специфику FBD-диаграмм и требования стандарта IEC 61131-3.
• Спроектировать удобный web-интерфейс для создания диаграмм.
• Реализовать редактор с использованием SVG и JavaScript.
• Обеспечить сохранение/загрузку диаграмм с метаданными (в формате JSON или XML).
• Сделать базовую библиотеку логических блоков (например, AND, OR, TON).

Содержание работы

• Проанализируй стандарт IEC 61131-3, особенно разделы про Function Block Diagram.
• Изучи и сравни способы визуализации в вебе: SVG, Canvas, WebGL — выбери подходящий.
• Ознакомься с draw.io, yEd, Node-RED — как реализованы редакторы и взаимодействие с графикой.
• Протестируй SVG как основу рендеринга: вставка элементов, перетаскивание, соединения, подписи, метки.
• Спроектируй структуру данных для описания схемы: список блоков, координаты, связи, параметры.
• Подумай, как сериализовать диаграмму в SVG с data-* атрибутами или JSON/XML-файл.
• Реализуй визуальную библиотеку: как минимум 5 стандартных FBD-блоков.
• Сделай возможность сохранять схему и восстанавливать её из файла (на клиенте).
• Примени архитектурные принципы: разделение логики, событий и визуализации.

Поддержка по ходу реализации:

• Ревью архитектурных решений и кода.
• Совместное проектирование структуры.
• Поддержка при сложностях с SVG, JS или архитектурой.

Результат (его описание) и критерии завершения работы

Готовый веб-редактор, работающий локально или на простом хостинге (можно GitHub Pages). Он должен позволять:

• Создавать блок-схемы из библиотеки FBD-блоков.
• Визуально соединять блоки.
• Задавать параметры блокам.
• Сохранять диаграмму как SVG с расширенными метаданными.
• Загружать ранее сохранённые диаграммы.

Критерии завершения:

• Минимум 5 работающих FBD-блоков (например, AND, OR, NOT, TON, TOF).
• Интерфейс позволяет строить, соединять и удалять блоки.
• Есть сериализация в SVG с сохранением всех метаданных.
• Есть десериализация из SVG/JSON/XML и восстановление состояния.
• Код оформлен, понятен и покрыт комментариями.
• Работа загружена в приватный Gitea, ведётся история коммитов.

Если всё сделано качественно, с инициативой и хорошей архитектурой — можно вернуть всю сумму или получить доплату.