[Touch Designer] Change the appearance color of Button COMP

ButtonCOMP。 I think that it is the operator who is most likely to use it when designing UI with Touch Designer.

The default is a gray button with 50 x 50 pixels, Because I use it the most, I thought that if I could customize the appearance of this button, the range of UI design would expand, so I picked up the places that could be easily tampered with.

In this article, I will change the color of the button. I will change the size a little.

① Take a look at the contents of Button COMP

The contents of Button COMP. It is made up of 6 operators.

Panel CHOP「panel1」 Get click information etc. of the parent container. The panel in the Button can extract 3 of "state", "rollover" and "select". To put it simply, there are three types: "the cursor is not on the panel", "the cursor is on the panel", and "the panel is clicked". simple. Select CHOP「select1」 Extracting the value of "select" from panel CHOP. This is because whether or not the button is pressed is sent out of the button. Out CHOP「out1」 Sends the value of select CHOP out of the button. By doing so, you can connect the button information to another CHOP in the next higher hierarchy. Expression CHOP「i」 In order to reflect the numerical value acquired by panel CHOP on the button color, the numerical value information is converted into 4 patterns. The cursor is not on the panel and the button is OFF → 0 The cursor is not on the panel and the button is ON → 1 The cursor is on the panel and the button is OFF → 2 The cursor is on the panel and the button is ON → 3 Like this. Text TOP「bg」 I am making a button design. Characters displayed on the button with Text> Text, In the Font tab, the font and size of characters. The text color, background color, border color and Common resolution of the Color tab are written in Python script. Table DAT「color」 The button color is specified by this operator.

② Take a closer look at Table DAT

It seems that you can change the color of the button by playing with it here. Let's take a closer look at each cell.

We have 4 types of packages of numerical values to be sent, such as off, on, rollover, and rollover on. Currently, there are three types in the package: font, background, and border.

Well then, if you change this value, the color of the button will change, but if you keep it as it is, it will be grayscale no matter what color you use.

But why. Let's take a look at Text TOP.

③ Play around with Text TOP

This is the font Color part of the Color tab of the Text TOP. The same description is given in all RGB fields. I am referring to the column called font of the operator "color (Table DAT)", but every time I add 1 to the value of the operator "i (expression CHOP)", the referenced row changes. That's fine, but when all three RGB values are the same, the output color is gray, isn't it?

Let's rewrite it so that each RGB refers to a different column.

Since all fontcolorr / g / b was written to refer to the column "font" in Table DAT, I rewrote it so that it would refer to the columns "fontR", "fontG", and "fontB" respectively. .. If you just change this, you'll get an error because the column with that name doesn't exist in the DAT.

Next, let's rewrite the DAT.

④ Return to Table DAT and try rewriting

First, I increased the number of columns and changed from font to fontR / G / B. Each number is red, green, blue, and dark blue for the sake of clarity. I want to put in my favorite color, but I don't know the RGB value! In that case, please make Constant TOP sideways and make your favorite color. I think it's easy to copy and paste that number.

Now, the font color of Text TOP is RGB, and each numerical value can be obtained. Let's go back up and see what the buttons look like.

The color of the letters has changed. It's a success.

⑤ Try changing other parts

The background is divided into bgR / G / B.

I tried to set the border so that the transparency changes instead of the color, the border is displayed when the cursor is over, and the border remains thin when it is on.

I also made a column called text so that the characters displayed on the button are different when it is on and when it is off.

Here is the finished product.

The size of the button is adjusted in the Layout tab of Button COMP. Originally, the resolution value is adjusted by Common> Resolution of the contents Text TOP, but Button COMP is described so that the resolution of the contents is automatically changed by changing the size of the parent hierarchy. Because it was.

The lines are out of focus due to the enlarged display, but I think the color scheme is quite nice. You can also change the appearance of the font.

With that feeling, please try changing the button design as well. The method of "changing the operator's value by referring to the table value" that I learned this time seems to be effective not only in Button COMP but also in various places.