Flow

Свободно настраиваемая анимированная диаграмма потоков энергии, воды, газа и тепла для vis-2 и менеджера устройств

Текущий релиз
0.0.2
Разработчик
bluefox
Лицензия
MIT

Свободно настраиваемая анимированная блок-схема - может использоваться в ioBroker.vis-2 и в менеджере виджетов ioBroker.devices, из одной и той же конфигурации и с одним и тем же дизайнером. Она создана для работы с энергией; вода, газ и тепло текут по одним и тем же линиям.

Flow of a 12 V hybrid installation

Реальная установка - четыре MPPT-зарядных устройства, аккумуляторная батарея 12 В, линия постоянного тока, инвертор, сеть и три электроприбора. Поставляется под номером examples/hybrid-12v.json и может быть импортирована в таком виде.

Что это делает

Вы размещаете производителей, потребителей, хранилище и сеть на холсте, соединяете их и указываете, какое состояние ioBroker соответствует какому числу. Затем диаграмма показывает, какой объем энергии передается и в каком направлении, при этом точки движутся быстрее, чем больше энергии.

  • Конструктор, а не список полей. Перетаскивайте узлы, перетаскивайте соединение от одного к другому. Нет

Фиксированное количество слотов производителя, без атрибутов "узел 7". Выделите несколько узлов с помощью рамки или щелчка Shift/Ctrl+клик, переместите их вместе - мышью или клавишами со стрелками, Shift+стрелки изменяют размер -, скопируйте их с помощью Ctrl+C / Ctrl+V (⌘ на Mac), в том числе с одной диаграммы на другую, и удалите их с помощью Del. Средний участок прямоугольной линии можно перетащить вбок; двойной щелчок вернет его на место.

  • Стили. Обычный (рамки с контуром, подпись ниже), Чистый (белые карточки с мягкой тенью,

Внутри есть метка и иконка, стрелки указывают на источник энергии), 3D (неоморфизм: карточки, выступающие над поверхностью благодаря свету и тени) и Неон (светящиеся линии и контуры на темно-синем фоне; круглый узел показывает свой уровень в виде светящегося кольца). Каждый стиль соответствует светлой или темной теме административной панели или проекта визуализации; меняется только способ отображения блоков и линий.

  • Заполнение уровней. Батарея заполняется в соответствии с уровнем заряда - узлом и его значком. Любой другой узел

Заполнение может осуществляться до достижения максимального значения: массив мощностью 1400 Вт при мощности 75 Вт заполнен на 5%. Максимальное значение определяется объектом состояния (common.max), если он имеется, поэтому инвертору, который указывает свою номинальную мощность, ничего вводить не нужно; число на узле имеет приоритет, 0 отключает заполнение. Уровень заряда может быть просто «таким же, как значение», с собственным преобразованием, и узел, значение которого указано в процентах, отображает значок батареи на этом уровне.

  • Значения, которые помещаются. Значение, слишком длинное для своего поля - например, "-1.800,00 Вт" в маленьком поле - будет установлено меньше.

вместо того, чтобы свалиться с обрыва.

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

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

  • Диаграмма отображает поток. Включите её, и линиям не потребуется собственное состояние: замкнутое состояние.

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

  • Подпись, содержащая текст. Текст подписи может содержать заполнители: {{ val }} - это

значение состояния, {{ ts }} время последнего обновления («5 минут назад»), {{ unit }} его единица измерения и {{ 0_userdata.0.x.val }} любое другое состояние. Также может вычислять: {{ val * 10 }}.

  • Значения на линиях, как вам удобнее. Рядом с линией или в округлой фишке, лежащей на ней - один

настройка для всей диаграммы.

  • Иконки, изображающие то, что действительно находится в доме. Более пятидесяти нарисованных: фотоэлектрические системы, ветер, вода.

Электроэнергия, аккумулятор и тепловой аккумулятор, электросеть, счётчик, настенная коробка и автомобильный аккумулятор, тепловой насос, радиатор, электрический обогреватель, кондиционер, вентиляция, вентилятор, водяной насос, водонагреватель, стиральная машина, посудомоечная машина, сушилка для белья, холодильник, морозильник, духовка, плита, микроволновая печь, кофемашина, телевизор, сервер, бассейн, освещение - плюс «все потребители» для расчета стоимости дома. Для воды: колодец, дождевая вода, цистерна, труба, водомер, датчик расхода, клапан, фильтр, насос, разбрызгиватель, душ, раковина, кран и пруд. Подойдёт любое ваше собственное изображение (URL или data URI). Два из них показывают уровень, а не фиксированную отметку - аккумулятор и его заряд, бак и его содержимое, уровень воды, поднимающийся выше отметки на стенке.

  • Палитра соответствует материалу. Водная инсталляция не строится из «автобуса»: дизайнер

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

  • Клапан открыт или закрыт, и вы можете это увидеть. Клапан и насос установлены в готовом к работе состоянии.

Состояние: логическое значение обозначает «открыто»/«закрыто», процентное - число, и в любом случае элемент сохраняет цвет своего окружения, пока включен, и становится серым при достижении нуля.

  • Правила. «При уровне ниже 20 % красный и мигающий», «Ошибка статуса красным»: цвет, значок и мигание соответствуют правилам.

значение; побеждает первое совпадающее правило, и линии продолжают следовать за ним по цвету.

  • Текстовые сообщения о состоянии. Состояние, например, режим инвертора, отображается в виде текста, при необходимости с переводом.

(1 → "Зарядка").

  • Отображаются устаревшие значения. Узел, состояние которого не обновлялось в течение заданного времени, затемняется.

Подвесной адаптер больше не выглядит как тихий дом.

  • Энергетическая ценность за день. Под этим значением, считываемым со счетчика устройства, находится «показатель выхода энергии».

«сегодня» инвертора - или интегрировано из адаптера истории с полуночи.

  • Ключевые показатели. Автаркия и самопотребление в %, рассчитанные на основе данных производителей, сети и хранилищ.

диаграмма.

  • Раскрашивание по значению. Узел - и его линии - меняют цвет с зеленого на красный в зависимости от значения, например,

цена на электроэнергию.

  • Подробный просмотр. Действие «Показать историю» открывает значение за период более 1 часа… 30 дней с минимальным сроком,

среднее и максимальное значения.

  • Сохранить как изображение. SVG или PNG прямо из дизайнера, без сетки и маркеров.
  • Создавайте приложения с помощью моих устройств. Ассистент ищет штаты, которые сообщают об уровне электроэнергии, и угадывает, что они сообщают.

и представляет первую диаграмму - производители сверху, сетка слева, хранилище справа, потребители снизу.

  • Диаграмма в узле. С помощью адаптера истории (history, sql, influxdb) любой узел может отображать свои значения.

за последние 15 минут - 24 часа отставание от указанного числа.

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

Обновлено - "12 минут назад", время или дата на языке браузера.

  • Единицы измерения берутся из состояний. Значение получает свою единицу измерения из объекта состояния (common.unit), поэтому

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

  • Шаблоны для начала работы. Солнечные батареи + сеть + дом, с аккумулятором, плюс настенная батарея или тепловой насос. Выберите подходящий вариант.

Один файл, и вам нужно только заполнить идентификаторы штатов. examples/ содержит полные схемы реальных установок для импорта и адаптации.

  • Значение узла определяется линиями, которые его пересекают, поэтому используется классическая диаграмма из четырех блоков.

Требуется три удостоверения личности штата, а не семь.

  • Один статус на одно соединение, а не два. Счетчик электроэнергии или батарея выдают знаковое значение: положительная единица.

В другом случае, отрицательном - другое. Это одна из связей на диаграмме, а направление, цвет и анимация соответствуют знаку.

  • Единицы измерения, масштабируемые сами собой. Допустим, значение задано в Вт, и на диаграмме показано «734 Вт», «8,73 кВт».

или 2.5 MW в зависимости от того, что именно течет.

  • Формулы, где одного состояния недостаточно. sum(inverter1, inverter2), pv - feedIn,

if(soc > 95, 0, charge) - с коэффициентом, смещением, мертвой зоной и изменением знака для обычных случаев масштабирования.

  • Масштабируется до размера любого контейнера. Один SVG с viewBox: полноэкранное представление vis-2 или 1×1

карта в диспетчере устройств.

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

если оно прокручивается за пределы видимой области, то соблюдается правило prefers-reduced-motion (в этом случае вместо него отображается статическая стрелка, указывающая направление).

Установить

Из административной панели ioBroker или в командной строке:

iobroker add flow

Адаптер не содержит кода Node.js (onlyWWW), но ему необходим экземпляр, чтобы vis-2 и менеджер устройств могли его найти. vis-2 автоматически перезапускается после установки.

В админке, не открывая визуальный интерфейс

Адаптер добавляет вкладку Flow в административную панель. Она отображает список сохраненных диаграмм и позволяет редактировать их в том же конструкторе на всей странице. Сохраненная там диаграмма сразу же отображается во всех виджетах vis-2 и во всех карточках диспетчера устройств - без перезагрузки и без редактора vis.

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

Сохраненные диаграммы существуют как объекты flow.0.diagrams.<id>, по одному на каждую диаграмму, типа config, а документ находится в native.flow. Именно поэтому их можно резервировать, восстанавливать и создавать с помощью скриптов, как и любые другие объекты.

Экспорт и импорт

  • Одна диаграмма - Экспорт в меню ⋮ диаграммы сохраняет её как <name>.json. Файл точно такой же.

То, что хранит виджет, позволяет вставить его в любое диалоговое окно ** < > ** дизайнера.

  • Все схемы - кнопка загрузки над списком сохраняет все сохраненные схемы в один файл.

для резервного копирования или для переноса набора данных на другую установку.

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

Все диаграммы или конфигурация energiefluss-erweitert. Вы видите, что содержит каждый файл и что пришлось исключить при преобразовании, прежде чем что-либо будет создано. Каждая диаграмма становится новой; существующие диаграммы никогда не перезаписываются, даже те, которые имеют то же имя.

Экспортируется то, что и сохраняется: несохраненные изменения в конструкторе не включаются, и вас об этом предупреждают.

В vis-2

Добавьте виджет Диаграмма потока из набора Поток. Его атрибут предлагает два режима:

  • Сохраненная диаграмма - выберите одну из диаграмм на вкладке администрирования. Виджет содержит только ссылку;

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

  • В этом виджете** диаграмма находится внутри виджета и перемещается при экспорте представления.

Функция Централизованное управление магазином перемещает его во вкладку администрирования и переключает виджет на эталонный.

Импорт готовой диаграммы

Кнопка ** < > ** в редакторе открывает документ в формате JSON: вставьте один из файлов из examples/ поверх него или откройте файл с помощью кнопки папки и нажмите «Применить». В этом же диалоговом окне можно скопировать или загрузить готовую диаграмму для второго виджета или другой установки. Чтобы добавить файл в качестве отдельной диаграммы вместо замены редактируемого, используйте Импорт на вкладке администрирования.

В ioBroker.devices

В менеджере виджетов добавьте виджет в категорию и выберите Блок-схема в разделе плагинов внизу списка. Диалоговое окно настроек карточки имеет те же два режима, что и в vis-2, поэтому одна сохраненная диаграмма может отображаться одновременно в vis-2 и в менеджере устройств.

На стороне устройств требуется ioBroker.devices с менеджером виджетов и @iobroker/json-config 10 - > более старые версии не знают механизм плагинов, который используется.

В административной конфигурации другого адаптера

Дизайнер представляет собой пользовательский компонент jsonConfig, а страница конфигурации адаптера отображается тем же компонентом @iobroker/json-config, что и диалоговое окно настроек диспетчера устройств. Таким образом, любой адаптер может встроить его, поместив один элемент в свой компонент jsonConfig.json:

{
    "diagram": {
        "type": "custom",
        "url": "./adapter/flow/dm-widgets/customDevices.js",
        "name": "flow/Config/Designer",
        "guiApi": 2,
        "i18n": false,
        "newLine": true
    }
}

Отредактированная диаграмма помещается в native.diagram этого адаптера как обычный объект - считайте её обратно с помощью normalizeConfig() и отобразите с помощью FlowView, или просто сохраните её.

На этом основаны три вещи:

  • Необходимо установить ioBroker.flow, поскольку URL-адрес предоставляется из папки admin.

Укажите его в common.dependencies ([{ "flow": ">=0.0.1" }]), чтобы установка его подхватила. ifInstalledDependencies не достаточно - он проверяет версию только тогда, когда адаптер присутствует, в противном случае форма отображает ошибку загрузки вместо конструктора.

  • ** guiApi: 2 ** указывает, что компонент создан для React 19 / MUI 9. Более старая административная панель вместо этого его отклоняет.

чем столкновения, а именно в этом и заключается смысл этой области.

  • Начальный символ ./ не является украшением. Без него URL-адрес разрешается относительно адаптера, чей

Отображается конфигурация, но это не та, что указана.

Компонент предоставляет собственные переводы, поэтому ничего дополнительного регистрироваться не нужно.

Перенос существующей диаграммы

Вставьте содержимое состояния energiefluss-erweitert.0.configuration в диалоговое окно ** < > ** в конструкторе или сохраните его как файл и импортируйте на вкладку администрирования. Оно будет распознано, преобразовано и суммировано перед применением каких-либо изменений.

Два формата расходятся в одном, и преобразование в основном касается именно этого: там прямоугольник не является объектом. То, что вы видите как «батарею», - это прямоугольник, иконка и два текста, которые просто перекрываются, и ничто не указывает на их принадлежность друг другу. Что явно, так это граф - связь хранится под ключом path_<a>_<b>, указывающим имена двух прямоугольников, между которыми она проходит. Таким образом, импортер берет эти прямоугольники в качестве узлов и присваивает каждый второй элемент прямоугольнику, который его содержит, что, собственно, и делает ваш глаз.

Сохранены: блоки с указанием их положения, размера, формы и цвета, метки, значки (сопоставленные по ключевому слову, чтобы mdi:house-city и material-symbols:electric-car отображались корректно), идентификаторы состояний, включая add/subtract/convert в виде формулы, единицы измерения и десятичные дроби, включая режимы calculate_kw, соединения с указанием их направления, сторон, цвета и порогового значения.

Изменения не переносятся, а сообщаются, а не удаляются незаметно: CSS для каждого элемента, действия по клику, изображения и значения, отображающие что-то отличное от значения состояния. Вы получаете список затронутых изменений перед нажатием кнопки «Импорт».

Чего пока не хватает: истории просмотров, поэтому нет данных о минимальном/максимальном значении за последний день.

Разработка

Один пакет, содержащий три бандла, предварительную версию для разработчиков и три пакета с общим исходным кодом. Все объявлено в корневом каталоге package.json; у бандлов нет собственных зависимостей.

packages/core/          model, value resolution, geometry, SVG renderer — no MUI, no socket
packages/editor/        the designer (MUI + @iobroker/gui-components)
packages/translations/  the dictionary, used by both bundles
examples/               complete diagrams to import; `npm test` checks they stay valid
src-widgets/            the vis-2 widget set   -> widgets/flow/
src-dm-widgets/         the devices plugin     -> admin/dm-widgets/
src-admin/              the admin tab          -> admin/tab.html + admin/tab-assets/
src-preview/            dev server only: the admin-side GUI with hot reload, never built or shipped

npm install          # installs all three bundles and hoists the shared copies — do this at the root
npm run build        # previews + all three bundles, into widgets/ and admin/
npm run build-vis    # only the vis-2 bundle
npm run build-dm     # only the devices bundle
npm run build-admin  # only the admin tab
npm run dev          # the preview on http://localhost:3100, against a running ioBroker
npm run previews     # re-render the palette preview from the real renderer
npm run check        # type check the shared packages, tasks.ts, tools/ and the tests
npm run lint
npm test             # unit tests of the core plus the ioBroker package checks

npm install должен запускаться в корневом каталоге и только там: все зависимости объявляются в корневом package.json, поэтому для всего существует один node_modules. Это сделано намеренно - packages/core и packages/editor компилируются в оба пакета и должны видеть ту же копию React и MUI, что и окружающий их пакет.

Работа над графическим интерфейсом пользователя

npm run dev запускает src-preview: вкладку администрирования, виджет, отображаемый в виде представления (с динамическими значениями и ползунком ширины), и редактор атрибутов конфигураций vis-2 / устройств / адаптеров, каждый на отдельной странице, с возможностью горячей перезагрузки. Он компилирует те же исходные коды, что и реальные пакеты, поэтому нет сборки и нет iobroker upload между редактированием и отображением результата.

По умолчанию связь с администратором осуществляется через ADMIN_URL в src-preview/vite.config.ts, http://localhost:8081. Для другой машины измените эту константу, например, на 'http://vitanova:8081', или установите её для одного запуска: IOBROKER_ADMIN=http://vitanova:8081 npm run dev. Администратор должен быть доступен без входа в систему через браузер, как и для любого сервера разработки ioBroker.

cd src-widgets && npm start - это собственный сервер разработки виджета (Vite на порту 4173, проксирующий трафик к веб-адаптеру ioBroker на порту 8082); для отображения чего-либо ему необходим запущенный vis-2.

Переводы

packages/translations/src/*.json - en и de являются полными, остальные девять языков намеренно оставлены пустыми: I18n.t использует английский язык для отсутствующего ключа, а в пустом файле указано «ещё не переведено», тогда как в английском варианте было бы указано обратное. Приветствуются любые предложения по улучшению.

Changelog

0.0.2 (2026-10-03)

  • (@GermanBluefox) Corrections for publication

0.0.1 (2026-09-25)

  • (@GermanBluefox) Initial release

License

MIT License

Copyright (c) 2026 Denis Haev dogafox@gmail.com

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.