Редактирование SVG Dacsboard

1

Есть ли “правильный” способ редактирование основы (файла, создаваемого во внешнем редакторе) svg панели, что бы при добавлении элементов и последующей загрузки этого файла, предыдущие связи не сбрасывались?

2

Есть, приведу тут выдержку, подробнее в документации: SVG-панели (Dashboards) — Wiren Board

изображение
изображение961×474 81.2 KB

3

Я редактирую svg программой Illustrator. После обновления у меня элементам присваиваются новые id. Ниже приведена часть json файла одного и того же элемента “id”: “f184cd3f0b05” - это до обновления файла, id": “f184f19b8268 - этот же элемент после обновления (настройки разные, что бы было проще найти…) id”: "f184f19b8268 создается в конце файла, т.е. как будто бы новый элемент…
Понятно, что руками можно поправить, но если файл большой с большим кол-вом элементов, это как миниимум неудобно…

[
{
“id”: “f184cd3f0b05”,
“read”: {
“enable”: true,
“channel”: “wb-modbus-0-1/Давление 1”,
“value”: “val.toFixed(2) + " бар"”
},
“write”: {
“enable”: false,
“channel”: null,
“value”: {
“on”: 1,
“off”: 0
}
},
“visible”: {
“enable”: false,
“channel”: null,
“condition”: “==”,
“value”: null
},
“style”: {
“enable”: false,
“channel”: null,
“value”: null
}
},
….
{
“id”: “f184f19b8268”,
“read”: {
“enable”: true,
“channel”: “wb-gpio/5V_OUT”,
“value”: “val”
},
“write”: {
“enable”: false,
“channel”: null,
“value”: {
“on”: 1,
“off”: 0
}
},
“visible”: {
“enable”: false,
“channel”: null,
“condition”: “==”,
“value”: null
},
“style”: {
“enable”: false,
“channel”: null,
“value”: null
}
}
]

4

“Illustrator” - это имеется в виду Adobe Illustrator?

5

да - Adobe Illustrator CC

6

id в JSON файле — это data-svg-param-id в самом SVG.

Опишите, пожалуйста, по шагам свои действия. В Illustrator сейчас проверить не могу.

7
  1. Создание файла svg в AI (Adobe Illustrator)
  2. Создание SVG панели в web интерфейсе wb (wirenboard)
  3. Импортирование svg файла (кнапка загрузить)
  4. Настройка элементов в web интерфейсе wb
  5. Проверка - данные верно изменяются на панели, все ок
  6. Через кнопку Редактировать вход в режим редактирования панели
  7. Скачивание svg файла на компьютер кнопкой " стрлка вниз"
  8. Редактирование (добавление нового элемента) в программе AI, сохранение файла
  9. Выбор измененного файла кнопкой Обзор, загрузка кнопкой Записать.
    После этого настройки всех элементов пустые и при их редактировании появляются новые id…
8

Делаете всё верно, значит Adobe Illustrator пересоздаёт SVG заново при сохранении и я могу предположить причину: SVG не родной для иллюстратора формат, он из него может импортировать и экспортировать. Видимо он внутри как-то работает с объектами по своему, очищая по пути наши идентификаторы. Далее наш редактор их не находит, поэтому добавляет новые.

Единственный вариант остаётся — редактирование SVG в рекомендованном нами Inkscape. Спасибо за обратную связь, добавим в документацию пометку, что иллюстратор использовать для этого нельзя.

1 лайк
9

Да, с Inkscape такой проблемы вроде нет. Спасибо!

1 лайк
10

Эта тема была автоматически закрыта через 7 дней после последнего ответа. В ней больше нельзя отвечать.