article cover

CRパックのカラーセレクターを AIアプリのUIとして流用する

บทช่วยสอนหนึ่งนาทีเพื่อแบ่งปันความท้าทาย

※よく調べてないので😅文字表示(white,red,blue)で選択できるセレクターを作れないという前提で自分のAIアプリで使ってる方法です。

AIアプリで色入力して欲しい時にユーザーにRGB(0,150,255)  HEX(#3399FF等) の入力を求めるのはちょっと酷です。

(特に数値は 0が入力チェックエラーになるケースが残ったままだし)

一番楽なのはカラーパレット等GUI表示ですがAIアプリでは使えない様子。

また、組んだworkflowが複数ノードを同色にする必要が生じた場合など、それらノードがカラーセレクターのあるCRだとしても、複数個所を個別に同色に設定してもらうなんて言うお願いはなかなかしづらいです。

workflow内ならPrimitiveNode1個に全部繋げれば良いけどAIアプリにPrimitiveNodeは開放ができない。

そこで使い始めたのがこの方法です (使ってる人もいるかもですが)

🟧 CR Color Panel の カラーセレクターを AIアプリでカラーセレクター代わりにする

(青色ノードが必要なノード。 グレーはShowAny =仮の接続先)

1.CR Color Panel  の fill_color で選んだ色の極小の8x8のベタ画像を作り、色解析ノードでHEX(上) または 個別RGB(下)を取り出します。

2.この値を本来色を設定したいノードのHEX、RGB 入力部分のINソケットに突っ込みます

AIアプリでユーザーには fill_color を入力項目として開放します。

これでCR Color Panelのカラーセレクターが別のノードの代用として、複数ノード設定も可能な セレクトボックス代わりになります。

🟧 CRのカラーセレクターの29色が、思っている色と違うから 勝手にカスタマイズしちゃう

CRパックの色名の基準が、自分が考えてる色と微妙に違うとか、自分の思う色にしちゃいたい と言うわがままもありかと思います。

そこで前述の物に手を加えて、結果として出てくるHEX値を変えちゃおうという方法です。

(青色ノード 及び DictionaryのGroup が必要なノード。 グレーはShowAny =仮の接続先)

Dictionaryとは 設定した「 KeyとValue 」 のペアを格納しているリストです。

これは一般的なプログラムで言う 連想配列 と同じです。

作って置いた 連想配列(key=value型リスト) から Key で呼び出して Value を貰います。

これを使って先ほどカラーセレクターから得られたHEX値をそのまま使わず、DictのKeyとして扱い、そのKeyに呼応するValueを出力するようにすれば、CRパックの設定色と微妙に違う、オリジナルのHEX値を別ノードに渡す事が出来ます。 (あくまでも色名から想像されるベストであろう色です)

この画像では全て同じになっています。

例えばKey_1はカラーセレクターの 「White」が出すHEXですが、Whiteを少しクリーム色にしたいのなら Value_1 を #FFFCF3 に変える という事です。

オリジナルのR,G,Bに変えたい時は下図のように一旦前述のHEX値を自由に変える方法をにして出てきたオリジナルHEX値を、R,G,Bに分解してくれるRGB Valueノードに渡せばOKです。

こんな感じで、CR Color Panel のカラーセレクターが別のノードの色設定の為の セレクター として使えます。

Workflowの方ではあまり必要ないでしょうがWorkflow内で使う時はColorPanelを開いておくと大きいし邪魔だし、これなんだっけ?ってなるので

fill_colorの左のソケットをダブルクリックしてPrimitiveを出してColorPanelは閉じておいた方が良いかもです。

もっと簡単な方法で色指定できるよっていう場合は、教えてください😅

【その他 色変換色々】 

🟧R、G、B値をHEXに変換 (フロー内で変換が必要な時やAIアプリとして開放する時)

先ほどのと同じように、R,G,Bで色指定してベタ画像を作る Image Blank ノードを利用してHEX値に変換します。

🟧RGB値の取り出し

繋げてませんんが、4つの違う型 を出ノードからのR,G,B個別変換です。

1.[R,G,B]と言うリスト型の文字列を出すValue

2.#RRGGBBという値を出すValue (これは4と同じ文字列のようです) 

3.#RRGGBBという値をだすcolor という型

4.#RRGGBBと言う文字列

型や出力名の違うこれらを RGB Value ノードが受け入れて 各RGB値に変換してくれます。

唯一? RGBを合わせた10進数の数値で表現するこの方法は RGB Valueノードでは対応できないようなので、これはお決まりの計算式で各RGB値を出します。

(MathExpressionは整数出口が自動でfloorですが、式にも入れてあります)

※SimpleMathは式にfloorが使えず、出口の整数も四捨五入の値なので使わない事

CRの色セレクターを借用サンプル | ComfyUI Workflow

以上、色、色々 でした m(__)m

英語だと  Colors and all that.  な感じかな?💦

■5px ライン

■2px ライン

■透過5x5px

↑見えないけどあります

104
0 ความคิดเห็น
119
39
104
0
0/1000