[Touch Designer] Ändern Sie die Darstellungsfarbe von Button COMP

ButtonCOMP。 Ich denke, dass es der Bediener ist, der es am wahrscheinlichsten verwendet, wenn er die Benutzeroberfläche mit Touch Designer entwirft.

Die Standardeinstellung ist eine graue Schaltfläche mit 50 x 50 Pixel. Da ich es am häufigsten benutze, dachte ich, wenn ich das Erscheinungsbild dieser Schaltfläche anpassen könnte, würde sich der Bereich des UI-Designs erweitern, sodass ich die Stellen auswählte, die leicht manipuliert werden könnten.

In diesem Artikel werde ich die Farbe der Schaltfläche ändern. Ich werde die Größe ein wenig ändern.

① Sehen Sie sich den Inhalt von Button COMP an

Der Inhalt von Button COMP. Es besteht aus 6 Operatoren.

Panel CHOP「panel1」 Klickinformationen usw. des übergeordneten Containers abrufen. Das Bedienfeld innerhalb der Schaltfläche kann drei Elemente extrahieren: "Status", "Rollover" und "Auswählen". Einfach ausgedrückt gibt es drei Typen: "Der Status, in dem sich der Cursor nicht auf dem Bedienfeld befindet", "Der Status, in dem sich der Cursor auf dem Bedienfeld befindet" und "Der Status, in dem auf das Bedienfeld geklickt wird". einfach. Select CHOP「select1」 Extrahieren des Werts von "select" aus dem Bedienfeld CHOP. Dies liegt daran, dass unabhängig davon, ob die Taste gedrückt wird oder nicht, aus der Taste gesendet wird. Out CHOP「out1」 Sendet den Wert von select CHOP aus der Schaltfläche. Auf diese Weise können Sie die Schaltflächeninformationen mit einem anderen CHOP in der nächsthöheren Hierarchie verbinden. Expression CHOP「i」 Um den von Panel CHOP erfassten numerischen Wert auf der Tastenfarbe wiederzugeben, werden die numerischen Wertinformationen in 4 Muster konvertiert. Die Taste ist AUS → 0, wenn sich der Cursor nicht auf dem Bedienfeld befindet Die Schaltfläche ist eingeschaltet, wenn sich der Cursor nicht auf dem Bedienfeld befindet → 1 Der Cursor befindet sich auf dem Bedienfeld und die Taste ist AUS → 2 Der Cursor befindet sich auf dem Bedienfeld und die Schaltfläche ist eingeschaltet → 3 So was. Text TOP「bg」 Ich mache ein Knopfdesign. Das auf der Schaltfläche mit Text> Text angezeigte Zeichen, Auf der Registerkarte Schriftart die Schriftart und Größe der Zeichen. Die Textfarbe, Hintergrundfarbe, Rahmenfarbe und allgemeine Auflösung der Registerkarte Farbe werden in Python-Skripten geschrieben. Table DAT「color」 Die Tastenfarbe wird von diesem Operator festgelegt.

② Sehen Sie sich Tabelle DAT genauer an

Es scheint, dass Sie die Farbe der Schaltfläche ändern können, indem Sie hier damit spielen. Schauen wir uns jede Zelle genauer an.

Wir haben 4 Arten von Paketen mit numerischen Werten, die gesendet werden sollen, z. B. Aus, Ein, Rollover und Rollover Ein. Derzeit enthält das Paket drei Typen: Schriftart, Hintergrund und Rahmen.

Wenn Sie diesen Wert ändern, ändert sich die Farbe der Schaltfläche. Wenn Sie sie jedoch unverändert lassen, handelt es sich um eine Graustufe.

Aber wieso. Werfen wir einen Blick auf Text TOP.

③ Spielen Sie mit Text TOP

Dies ist der Schriftfarbe-Teil der Registerkarte Farbe des Text-TOP. Die gleiche Beschreibung wird in allen RGB-Feldern gegeben. Ich beziehe mich auf die Spalte mit der Bezeichnung Schriftart des Operators "Farbe (Tabelle DAT)", aber jedes Mal, wenn ich dem Wert des Operators "i (Ausdruck CHOP)" 1 hinzufüge, ändert sich die referenzierte Zeile. Das ist in Ordnung, aber wenn alle drei RGB-Werte gleich sind, ist die Ausgabefarbe grau, nicht wahr?

Schreiben wir es so um, dass sich jedes RGB auf eine andere Spalte bezieht.

Da alle fontcolorr / g / b so geschrieben wurden, dass sie auf die Spalte "font" in Tabelle DAT verweisen, habe ich sie so umgeschrieben, dass sie sich auf die Spalten "fontR", "fontG" bzw. "fontB" bezieht. .. Wenn Sie dies nur ändern, tritt ein Fehler auf, da die Spalte mit einem solchen Namen im DAT nicht vorhanden ist.

Als nächstes schreiben wir den DAT neu.

④ Kehren Sie zur Tabelle DAT zurück und versuchen Sie, sie neu zu schreiben

Zuerst habe ich die Anzahl der Spalten erhöht und von Schriftart zu Schriftart R / G / B gewechselt. Jede Zahl ist aus Gründen der Klarheit rot, grün, blau und dunkelblau. Ich möchte meine Lieblingsfarbe eingeben, kenne aber den RGB-Wert nicht! In diesem Fall machen Sie bitte Constant TOP seitwärts und machen Sie Ihre Lieblingsfarbe. Ich denke, es ist einfach, diese Nummer zu kopieren und einzufügen.

Die Schriftfarbe von Text TOP ist jetzt für RGB verfügbar. Lassen Sie uns zurückgehen und sehen, wie die Schaltflächen aussehen.

Die Farbe der Buchstaben hat sich geändert. Es ist ein Erfolg.

⑤ Versuchen Sie, andere Teile zu wechseln

Der Hintergrund ist in bgR / G / B unterteilt.

Ich habe versucht, den Rand so einzustellen, dass sich die Transparenz anstelle der Farbe ändert. Der Rand wird angezeigt, wenn sich der Cursor oben befindet, und der Rand bleibt dünn, wenn er aktiviert ist.

Ich habe auch eine Spalte namens Text erstellt, damit die auf der Schaltfläche angezeigten Zeichen unterschiedlich sind, wenn sie aktiviert und deaktiviert ist.

Hier ist das fertige Produkt.

Die Größe der Schaltfläche wird auf der Registerkarte Layout der Schaltfläche COMP angepasst. Ursprünglich wird der numerische Wert der Auflösung durch Allgemein> Auflösung des Textes OBEN des Inhalts angepasst. Die Schaltfläche COMP wird jedoch so beschrieben, dass die Auflösung des Inhalts automatisch geändert wird, indem die Größe der übergeordneten Hierarchie geändert wird. Weil es ... war.

Die Linien sind aufgrund des vergrößerten Displays unscharf, aber ich finde das Farbschema sehr schön. Danach können Sie anscheinend das Erscheinungsbild der Schriftart ändern.

In diesem Sinne versuchen Sie bitte auch, das Schaltflächendesign zu ändern. Die Methode, die ich dieses Mal gelernt habe, um den numerischen Wert des Operators unter Bezugnahme auf den numerischen Wert in der Tabelle zu ändern, scheint nicht nur in Button COMP, sondern auch an verschiedenen Stellen wirksam zu sein.