Help us understand the problem. What is going on with this article?

Noodlで色の変わるOn/Offボタンを作る

More than 1 year has passed since last update.

概要

 NoodlでOn/Offボタンを作ってみました。その備忘録を残します。
↓のようにボタンを押すと色とテキストが変わります。

 

全体のフローは次の通りです。
image.png

作ってみる

使用するノード

 次の4種類のノードを使用します。

Circle
 ボタンの外見に使用します。
Text
 ボタンに表示するテキストです。
States
 ボタンのOn/OFF状態を設定します。
Color Blend
 複数の色を用意し、"Blend Value"で与えられた値に応じて色を出力します。

ボタンを押すと状態遷移

 Circleノードを押すと、Statesが変わるようにしています。Circleノードの"Tap"とStatesノードの"Toggle"を接続します。これで状態が遷移するようになります。
image.png

Statesノードで扱う"States"と"Values"は次の通りです。
image.png

各状態のValueは次のように設定しました。
image.png

状態で色を変える

image.png

色のコントロールは"Color Blend"ノードで行います。
このノードは予め色を登録しておき、"Blend Value"で与えられた値によって、出力する色を変えます。
今回は次のように設定しました。
image.png

Blend Valueは各色の割合を設定するようです。
 0 → Color0
 1 → Color1

0.5を設定すると、Color0とColor1の中間色が出力されるようです。
Color Blendノードの"Result"をCircleノードの"Color"に接続します。

以上でボタンの色を変えることができました!

kmaepu
自由気ままにものづくりをする組込みソフトエンジにゃ~。
iotlt
IoT縛りの勉強会です。 毎月イベントを実施しているので是非遊びに来てください! 登壇者を中心にQiitaでも情報発信していきます。 https://iotlt.connpass.com
https://iotlt.connpass.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away