SoloScada. Динамическое изменение размера и цвета прямоугольника

В статье рассказывается про изменение атрибутов графических примитивов во время исполнения.

Рассмотрим, какой код у фигуры прямоугольник в формате SVG

<rect x="-25" y="-25" rx="0" ry="0" width="50" height="50" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(144,168,175); fill-rule: nonzero; opacity: 1;" transform="translate(25.5 160.78) scale(1 6.31)"/>

Атрибуты x и y задают положение по осям, width и height задают длину и высоту соответственно.

Fillцвет заливки,

Transform – смещение по осям x и y, а так же растягивание.

Этими и другими атрибутами можно управлять.

Разберем на примере. Допустим, у нас есть бак с уровнем от 0 до 60 единиц. Нам надо визуально показывать уровень в баке, а также менять цвет уровня. При уровне меньше чем 25 цвет норма (код цвета $90a8af), при уровне от 25 до 44 желтый цвет ($ffff00), При уровне выше 45 красный цвет ($ff0000)

У нас будут 2 переменные:

urvenLevel – уровень в баке. Меняется от 0 до 60.

color_of_urven – цвет уровня. Задается в скрипте

if urvenLevel<25 then

color_of_urven:=$90a8af

else

if urvenLevel<45 then

color_of_urven:=$ffff00

else

color_of_urven:=$ff0000;

Управлять прямоугольником будем через свойство id.

Перейдите на вкладку «Редактор мнемосхем». Нажмите на кнопку «Редактировать схему». Добавьте на схему прямоугольник, выделите этот прямоугольник, на вкладке «Привязка и переходы» в поле привязка введите urven, нажмите на кнопку «установить ID». Не копируйте прямоугольники, всегда создавайте новые, иначе изменение атрибута цвет не будет работать.

Теперь необходимо получить SVG код прямоугольника. Выделите прямоугольник. Перейдите на вкладку «Загрузить SVG». В текстовом поле (оно растягивается) увидите код SVG, скопируйте его.

Сохраните схему. Закройте окно.

У нашего прямоугольника будем управлять атрибутами x, height и fill

<rect x="-25" y="-25" rx="0" ry="0" width="50" height="50" style="stroke: none; stroke-width: 1; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: rgb(144,168,175); fill-rule: nonzero; opacity: 1;" transform="translate(25.5 160.78) scale(1 6.31)"/>

Атрибут y, отвечает за положение верхней левой точки прямоугольника. Формула y=25- (urvenLevel/60)*50

Атрибут height, отвечает за высоту прямоугольника. Формула height = 50*urvenLevel/60

Атрибут fill, отвечает за цвет прямоугольника.

У Вас может возникнуть вопрос: если положение верхней левой точки отрицательное -25, то почему мы её видим. Потому что есть свойство transform, сдвигающее прямоугольник translate  и растягивающее scale.

Теперь выделите нашу мнемосхему, нажмите на кнопку «изменить настройки мнемосхемы».

В таблице Изменение свойств примитивов добавьте строку.

Будем управлять атрибутом y.

В ID элемента введите - urven,

в «атрибут» - y,

attr или css – attr,

Наличие # - ничего, (# используется только при работе с цветом!)

Выражение -  25-(data.val.urvenLevel/60)*50, кнопка «…» позволяет выбирать переменную из списка (перед переменными нужно ставить data.val. иначе не будет работать),

Представление - десятичное.

Для изменения высоты

В ID элемента введите - urven,

в «атрибут» - height,

attr или css – attr,

Наличие # - ничего,

Выражение -  50*data.val.urvenLevel/60,

Представление - десятичное.

Для управления цветом необходимо изменять не атрибут у прямоугольника, а css свойство Fill, причем цвет в javaScript представлен в шестнадцатеричном формате:

В ID элемента введите - urven,

в «атрибут» - fill,

attr или css – css,

Наличие # - необходим символ #,

Выражение -  data.val.color_of_urven,

Представление - Шестнадцатеричное.

Нажмите ОК, сохраните, перезапустите сервис. Должно получиться вот так: