[Touch Designer] Changer la couleur d'apparence du bouton COMP

ButtonCOMP。 Je pense que c'est l'opérateur qui est le plus susceptible de l'utiliser lors de la conception de l'interface utilisateur avec Touch Designer.

La valeur par défaut est un bouton gris de 50 x 50 pixels, Parce que je l'utilise le plus, j'ai pensé que si je pouvais personnaliser l'apparence de ce bouton, la gamme de conception de l'interface utilisateur s'élargirait, alors j'ai choisi les endroits qui pourraient être facilement falsifiés.

Dans cet article, je vais changer la couleur du bouton. Je vais changer un peu la taille.

① Jetez un œil au contenu de Button COMP

Le contenu de Button COMP. Il est composé de 6 opérateurs.

Panel CHOP「panel1」 Obtenez des informations sur les clics, etc. du conteneur parent. Le panneau du bouton peut en extraire trois, «état», «survol» et «sélection». Pour faire simple, il existe trois types: "l'état où le curseur n'est pas sur le panneau", "l'état où le curseur se trouve sur le panneau", et "l'état où le panneau est cliqué". Facile. Select CHOP「select1」 Extraire la valeur de "select" du panneau CHOP. C'est parce que le fait que le bouton soit enfoncé ou non est envoyé hors du bouton. Out CHOP「out1」 Envoie la valeur de select CHOP hors du bouton. Ce faisant, vous pouvez connecter les informations du bouton à un autre CHOP dans la hiérarchie supérieure suivante. Expression CHOP「i」 Afin de refléter la valeur numérique acquise par le panneau CHOP sur la couleur du bouton, les informations de valeur numérique sont converties en 4 modèles. Le bouton est OFF → 0 lorsque le curseur n'est pas sur le panneau Le bouton est activé lorsque le curseur n'est pas sur le panneau → 1 Le curseur est sur le panneau et le bouton est OFF → 2 Le curseur est sur le panneau et le bouton est ON → 3 Comme ça. Text TOP「bg」 Je fais un design de bouton. Le caractère affiché sur le bouton avec Texte> Texte, Dans l'onglet Police, la police et la taille des caractères. La couleur du texte, la couleur d'arrière-plan, la couleur de la bordure et la résolution commune de l'onglet Couleur sont écrites dans des scripts Python. Table DAT「color」 La couleur du bouton est spécifiée par cet opérateur.

② Regardez de plus près Table DAT

Il semble que vous puissiez changer la couleur du bouton en jouant avec ici. Examinons de plus près chaque cellule.

Nous avons 4 types de packages de valeurs numériques à envoyer, tels que désactivé, activé, survolé et activé. Actuellement, il existe trois types dans le package: police, arrière-plan et bordure.

Eh bien, si vous modifiez cette valeur, la couleur du bouton changera, mais si vous la gardez telle quelle, ce sera une échelle de gris.

Mais pourquoi. Jetons un coup d'œil à Text TOP.

③ Jouez avec Text TOP

Il s'agit de la partie Couleur de police de l'onglet Couleur du TOP Texte. La même description est donnée dans tous les champs RVB. Je fais référence à la colonne appelée police de l'opérateur "color (Table DAT)", mais chaque fois que j'ajoute 1 à la valeur de l'opérateur "i (expression CHOP)", la ligne référencée change. C'est bien, mais lorsque les trois valeurs RVB sont identiques, la couleur de sortie est grise, n'est-ce pas?

Réécrivons-le pour que chaque RVB se réfère à une colonne différente.

Puisque tout fontcolorr / g / b a été écrit pour faire référence à la colonne "font" dans le tableau DAT, je l'ai réécrit pour qu'il se réfère respectivement aux colonnes "fontR", "fontG" et "fontB". .. Si vous modifiez simplement cela, vous obtiendrez une erreur car la colonne portant ce nom n'existe pas dans le fichier DAT.

Ensuite, réécrivons le DAT.

④ Revenez à Table DAT et essayez de réécrire

Tout d'abord, j'ai augmenté le nombre de colonnes et changé de police en fontR / G / B. Chaque numéro est rouge, vert, bleu et bleu foncé pour des raisons de clarté. Je veux mettre ma couleur préférée, mais je ne connais pas la valeur RVB! Dans ce cas, veuillez créer Constant TOP sur le côté et créer votre couleur préférée. Je pense qu'il est facile de copier et coller ce numéro.

La couleur de police de Text TOP est désormais disponible pour RVB. Revenons en arrière et voyons à quoi ressemblent les boutons.

La couleur des lettres a changé. C'est un succès.

⑤ Essayez de changer d'autres pièces

L'arrière-plan est divisé en bgR / G / B.

J'ai essayé de définir la bordure pour que la transparence change au lieu de la couleur, la bordure s'affiche lorsque le curseur est en haut et la bordure reste mince lorsqu'elle est allumée.

J'ai également créé une colonne appelée texte pour que les caractères affichés sur le bouton soient différents lorsqu'il est activé et lorsqu'il est désactivé.

Voici le produit fini.

La taille du bouton est ajustée dans l'onglet Disposition du bouton COMP. À l'origine, la valeur numérique de la résolution est ajustée par Commun> Résolution du texte TOP du contenu, mais le bouton COMP est décrit de sorte que la résolution du contenu est automatiquement modifiée en changeant la taille de la hiérarchie parent. Parce que c'était.

Les lignes sont floues en raison de l'affichage agrandi, mais je pense que la palette de couleurs est assez agréable. Après cela, il semble que vous puissiez modifier l'apparence de la police.

Avec ce sentiment, essayez également de changer la conception du bouton. La méthode de "changer la valeur numérique de l'opérateur en se référant à la valeur numérique du tableau" que j'ai apprise cette fois semble être efficace non seulement dans Button COMP mais aussi à divers endroits.