Как связать элемент CSS в TwinCat 3 HMI с параметром

Я использовал веб-компонент индикатор состояния в своем HTML-хосте HMI в twincat.

Я создал HTMLhost и добавил в скрипт следующие строки:

       <style>
        @import 'status-indicator';
        </style>

        <div class="indicator">
            <status-indicator positive></status-indicator>
        </div>

        <style>
            .indicator {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        </style>

и выглядит это так: Индикатор статуса в HTMLhost

Я также создал одно значение BOOL в параметрах, чтобы изменить статус с активированного на деактивированный из ПЛК, например:

переменная BOOL для изменения статуса

Проблема в том, что я не знаю, как связать <status-indicator positive></status-indicator> с этим параметром BOOL, чтобы его можно было использовать для изменения его статуса из ПЛК?

Буду признателен за вашу помощь, заранее спасибо.


javascript plc twincat structured-text
person Nikola Petrovic    schedule 24.12.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я не лучший объяснитель, и это довольно сложно, пожалуйста, спросите больше, если вам нужно.

Я знаю 2 способа выполнить то, что вы хотите, только 1 применим к этому сценарию, поскольку вы создаете пользовательский элемент управления.

Оба начинаются с; (в вашем случае привяжите здесь Status-BOOL вместо моего PLC1.Calling_Sys), но если вы работаете с userControl, вы должны сделать это присоединение к .userControl, а не внутри .Content, чтобы оно всегда было готово в вашем UserControl. Кроме того, если .userControl, вы не должны напрямую присоединять Status-BOOL (если только вы не знаете, что это всегда будет один и тот же BOOL), а вместо этого создавать привязываемый параметр для userControl в его файле JSON.

Прикрепить символ для выполнения действия (при изменении) в меню Lightning объекта управления

Затем отредактируйте действие, нажав перо, и в редакторе действий и условий вы можете выбрать JavaScript и обратиться к своему объекту управления (HTMLHost в вашем случае) по его имени идентификатора с кодом $(#idNameinTwincatHere)

введите здесь описание изображения

При этом вы делаете все, что вы могли бы делать с любым объектом DOM HTML, в вашем примере <status-indicator positive></status-indicator> будет $(#idName).children[0].children[0] Я думаю, поэтому продолжайте копать объект DOM с помощью консоли. .log, чтобы увидеть, что вы хотите. Похоже, вы немного разбираетесь в HTML, поэтому я не буду углубляться.

НО, ПОСКОЛЬКУ ВЫ СОЗДАЕТЕ ПОЛЬЗОВАТЕЛЬСКИЙ КОНТРОЛЬ, ЭТОТ УДОБНЫЙ МЕТОД В ЭТОТ РАЗ НЕ РАБОТАЕТ, поскольку ваш окончательный идентификатор будет зависеть от идентификатора, который вы применяете для экземпляра пользовательского элемента управления, который вы помещаете в файл . файл содержимого. Я просто поместил его там для других случаев, потому что другой способ, который я знаю, более сложен.

Другой способ:

Создайте новую функцию введите здесь описание изображения

Сделайте это JavaScript введите здесь описание изображения

Отредактируйте файл JSON введите здесь описание изображения

Создайте параметр типа Control введите здесь описание изображения

А теперь вместо этого в редакторе действий и условий не выбирайте JavaScript, а выберите свою функцию и создайте привязку данных типа «элементы управления» или выберите свой объект управления из раскрывающегося списка. Просто убедитесь, что это идентификатор внутри пользовательского элемента управления, а не ссылка на экземпляр пользовательского элемента управления в .content, а также, конечно, что событие (ваш символ состояния) является привязываемым символом или логическим параметром в userControl JSON, и затем прикрепите этот параметр к триггеру действия, как показано на рисунке 1. введите здесь описание изображения

Теперь внутри функции вы можете манипулировать позитивом с помощью JavaScript.

Заключительное слово: намного проще делать такие вещи (эллипс индикатора состояния) с помощью инструментов, которые вы предоставили в Twincat HMI, просто создайте Ellipse, прикрепите BOOL-Status к привязке Action, как показано выше, а затем из меню Action. выберите «Условие», «ИСТИНА» --> прикрепите цвет заливки эллипса и выберите цвет для «Истина», то же самое для «Ложь», готово. Вы можете создать box-shadow для эллипса, если хотите, чтобы он выглядел круче. Вы даже можете прикрепить классы, чтобы сделать некоторую магию CSS, например, переходы, если хотите, но это уже другая тема. Поэтому, на мой взгляд, то, что вы пытаетесь сделать, не имеет смысла с HTML Host.

person Miikka Kosonen    schedule 13.01.2021