OrangeScada. Приложение H

Код JavaScript можно использовать как альтернативу для привязки свойств графических объектов к тегам. Если Вы знакомы с JavaScript, то возможно такой подход окажется Вам ближе, нежли выполнение привязки при помощи стандартных инструментов графического редактора. При разработке кода можно пользоваться стандартными возможностями JavaScript и библиотеки jQuery.

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

Добавить

Создание нового скрипта и подключение его к тегу

Сохранить

Сохранение текущего скрипта

Удалить

Удаление текущего скрипта

Закрыть

Закрытие окна редактора скриптов

При нажатии на кнопку "Добавить" открывается окно выбора тега, который будет подвязан к скрипту

Код скрипта

Для доступа к элементам мнемосхемы используется селектор jQuery вида $("#<идентификатор элемента>") Значение идентификатора элемента можно увидеть в панели свойств графического редактора при выборе нужного элемента:

Для того, чтобы задействовать в коде значение подключенного тега, необходимо указывать в коде ключевое слово value

Для доступа к текстовым свойствам элемента нужно пользоваться конструкцией $("#<идентификатор элемента>").html(<Значение>)

$("#text65").html("Hello, world")

Присвоение тексту с идентификатором text65 константы

$("#text65").html(value ? "Работа" : "Неисправность")

Присвоение тексту с идентификатором text65 текстового значения, зависимого от value

Для того, чтобы получить доступ к стилистическим свойствам элемента, необходимо воспользоваться конструкцией $("#<идентификатор элемента>").prop("style")["<Свойство>"]

$("#g64m27").prop("style")["opacity"] = 0.5

Присвоение группе с идентификатором g64m27 значение прозрачности 0.5

$("#text4").prop("style")["fill"] = "#ff0000"

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

if(value > 50){$("#rect66").prop("style")["fill"] = "#000000"}

Присвоение прямоугольнику rect66 черного цвета при определенном условии

Для того, чтобы получить доступ к атрибутам элемента, необходимо воспользоваться конструкцией $("#<идентификатор элемента>").attr(<Объект с атрибутами: значениями>)

$("#circle14").attr({r:value*50})

Присвоение атрибуту радиус окружности с идентификатором circle14 значения в зависимости от значения тега

$("#rect68").attr({width: 50, height: 50})

Присвоение атрибутам ширина и высота прямоугольника rect68 констант

Таблица доступа к свойствам элементов

Видимость Нет/Да

$("#id").hide() / $("#id").show()

$("#id").attr({x: value})

$("#id").attr({y: value})

cx (центр окружности)

$("#id").attr({cx: value})

cy (центр окружности)

$("#id").attr({cy: value})

Радиус окружности

$("#id").attr({r: value})

Радиус скругления X (эллипс/прямоугольник)

$("#id").attr({rx: value})

Радиус скругления Y (эллипс/прямоугольник)

$("#id").attr({ry: value})

Ширина

$("#id").attr({width: value})

Высота

$("#id").attr({height: value})

Прозрачность [0..1]

$("#id").prop("style")["opacity"] = value

Поворот(град)

os.func_svg.rotate(id, angle, isAbsolute)
id - строка, идентификатор элемента
angle - число, угол поворота
isAbsolute - true/false, повернуть на абсолютный угол, или относительно текущего угла поворота

Цвет (окантовка)

$("#id").prop("style")["stroke"] = value (color string);

Толщина (окантовка)

$("#id").prop("style")["stroke-width"] = value (number);

Прозрачность (окантовка) [0..1]

$("#id").prop("style")["stroke-opacity"] = value;

Тип линии (окантовка)

$("#id").prop("style")["stroke-dasharray"] = "number1, .., numberN";

Цвет (фон)

$("#id").prop("style")["fill"] = value (color string);

Прозрачность (фон) [0..1]

$("#id").prop("style")["fill-opacity"] = value;

Подсказка

$("#id").attr({"os_title_obj":"Текст"});

Вкл/выкл (анимация)

os.func_svg.animation.play("id анимации")/os.func_svg.animation.stop("id анимации")

Задержка (анимация)

os.func_svg.animation.update_delay("id анимации");

Поворот букв (текст)

$("#id").attr({"rotate":value});

Текст (значение)

$("#id").html(value)

Шрифт (текст)

$("#id").prop("style")["font-family"] = "Шрифт";

Размер шрифта (текст)

$("#id").prop("style")["font-size"] = value;

Интервал между буквами (текст)

$("#id").prop("style")["letter-spacing"] = value;

Выравнивание (текст)

$("#id").prop("style")["text-anchor"] = ["start", "middle", "end"];

Наклонный шрифт (текст)

$("#id").prop("style")["font-style"] = "italic";

Жирный шрифт (текст)

$("#id").prop("style")["font-weight"] = "bold";

Подчеркнутый шрифт (текст)

$("#id").prop("style")["text-decoration"] = "underline";

Приложение H. Руководство по использованию функций JS в графическом редакторе

Код скрипта

Таблица доступа к свойствам элементов