Как установить цвет виджета с помощью триггера

Вот как использовать цветовые переменные для динамического изменения цвета различных виджетов.

В этой статье вы узнаете:

• Как использовать переменные "Цвет"".
• Как добавить определенный цвет к полю в таблице

Назначение

Tulip позволяет динамически изменять цвет кнопок, датчиков и многих других виджетов.

Как

Для этого сначала необходимо сохранить цвет в переменной или поле таблицы.

Вот как создать новую переменную Color с помощью диалога Variables в контекстной панели:

Здесь приведен пример создания поля "Цвет" в таблице:

Затем, создав переменную цвета, можно вручную выбрать ее почти в каждом колорпикере, щелкнув на вкладке "Переменные" в колорпикере:

В результате к виджету будет применен цвет, хранящийся в переменной.

В этом руководстве мы рассмотрим несколько распространенных примеров использования цветовых переменных и цветовых полей в приложениях.

Изменение цвета кнопки

Допустим, в вашем приложении есть кнопка "Далее", и вы хотите изменить ее цвет в зависимости от того, была ли пройдена проверка качества.

Для начала необходимо создать переменную "check_status_color" и установить для нее значение по умолчанию "red" через диалог Variables в контекстной панели.

Вот как добавить новую переменную в Контекстной панели:

А вот как создать переменную и установить для нее значение "красный":

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

Затем установите цвет кнопки на нужную переменную на вкладке Widget, нажав "Button Color" и выбрав переменные:

Наконец, когда проверка качества пройдена, необходимо обновить цвет переменной с помощью триггера "Манипуляция данными". Например:

• "Манипуляция данными" "Хранить" данные: "Static Value" "color" (blue) location: "переменная" "check_status_color"

И еще один момент: возможно, вам захочется добавить оператор "if" к кнопке "Далее", чтобы не дать оператору продвигаться вперед до тех пор, пока не будет пройдена проверка качества.

Вот как это можно сделать с помощью оператора "if":

IF

• "Переменная" "test1" "Is True"

THEN

• "Go To Step" "Next"

Переключение видимости кнопки

Помимо изменения цвета, можно сделать кнопку невидимой, динамически изменяя ее прозрачность.

Для этого необходимо связать цвет кнопки с переменной цвета, как показано выше.

Чтобы изменить прозрачность кнопки, создайте оператор "Тогда", аналогичный приведенному выше. Затем перетащите ползунок "прозрачность" до упора влево.

Например:

Вот как выглядит ползунок прозрачности на панели выбора цвета:

Индикация состояния в таблице

Допустим, вы хотите создать приборную панель Kamishibai или отслеживать состояние нескольких производственных линий в одном месте.

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

Сначала сохраните цвет в поле цвета в таблице. Вот пример того, как это будет выглядеть:

Затем загрузите запись таблицы в приложение.

Наконец, добавьте "Запись таблицы" под виджет "Текст":

Затем выберите поле "Цвет" из выпадающего списка в контекстной панели внутри созданного ранее держателя записи:

Поле цвета будет автоматически добавлено к открытому шагу в ограничивающую рамку:

Когда вы откроете приложение в Tulip Player, вы увидите, что цвет появился в этом ограничительном поле:

Дальнейшее чтение

• Как добавить цвета вашей компании в Tulip

Вы нашли то, что искали?

Вы также можете зайти на community.tulip.co, чтобы задать свой вопрос или узнать, сталкивались ли другие с подобным вопросом!