« 福島復興支援XSI男Tシャツ 会計報告。 | トップページ | 乱立2011。 »

2011年6月 2日 (木)

色がへくーす。

先日、かのお方に教えてもらった 16進数への変換 を使って書いた小ツールなんですが、けっこう便利に使ってます。



スライダで色を決めると、16進数の RGB 値になっている文字列を返す PPG です。

Hex


//    カスタムプロパティ作成
var oP = XSIFactory.CreateObject( "CustomProperty" );
oP.name = "色がへくーす";


//    カスタムプロパティに必要なパラメータ作成
oP.AddParameter2( "R", siDouble, 1, 0, 255 );
//    色パラメータは、RGB個別にパラメータ必要
oP.AddParameter2( "G", siDouble, 0, 0, 255 );
//    そして、R,G,B の順にパラメータを追加する必要がある
oP.AddParameter2( "B", siDouble, 0, 0, 255 );
//    途中で変なもの挟むとわかりにくくなるよ
oP.AddParameter2( "RRGGBB", siString, "" );   
//    0x 無しの16進数文字
oP.AddParameter2( "sHex", siString, "" );   
//    結果の16進数文字
oP.AddParameter2( "bHeader", siBool, true );   
//    0x 付けるかどうか

//    上で作成したパラメータを、PPG に追加(PPGLayout)
var oL = oP.PPGLayout;
var oItem = oL.AddColor( "R" );   
//色コントロールは AddColor で R のみ指定する
oItem.SetAttribute( siUINoLabel, true );
oL.AddRow();
    oItem = oL.AddItem( "sHex", "へくーす" );
    oItem = oL.AddItem( "bHeader", "0x" );
oL.EndRow();


//    スライダいじると自動でアップデートされるよう logic の仕込み
oL.Language = "JScript";
oL.Logic =    OnInit.toString() +
            bHeader_OnChanged.toString()+
            R_OnChanged.toString() +
            G_OnChanged.toString() +
            B_OnChanged.toString() +
            GetRGBHex.toString() +
            to2keta.toString()+
            ColorChange.toString();

function OnInit()
{
    ColorChange( );
}
function R_OnChanged( )
{
    ColorChange( );
}
function G_OnChanged( )
{
    ColorChange( );
}
function B_OnChanged( )
{
    ColorChange( );
}
function ColorChange( )
{
    PPG.RRGGBB.value = GetRGBHex( );
    bHeader_OnChanged( );
}
function GetRGBHex( )
{
   
//    0~1を 0~255 にし、それをさらに16進数に変換し、
    RR = Math.round( PPG.R.value * 255 ).toString( 16 );
    GG = Math.round( PPG.G.value * 255 ).toString( 16 );
    BB = Math.round( PPG.B.value * 255 ).toString( 16 );
   
//    ケタを合わせ、
    RRGGBB = to2keta( RR ) + to2keta( GG ) + to2keta( BB );
    return RRGGBB;   
//戻す。
}
function to2keta( str )
{
    if ( str.length <2 )   
//もうちょっとマシなケタ合わせルーチン教えて下さい
    {
        str = "0" + str;
    }
    return str;
}
function bHeader_OnChanged( )
{
    if ( PPG.bHeader.value )
    {
        PPG.sHex.value = "0x" + PPG.RRGGBB.value;
    }
    else
    {
        PPG.sHex.value = PPG.RRGGBB.value;
    }
}

//    PPG を表示しておしまい
InspectObj( oP );




何に使うのかと言いますとですね、今のところ XPOP3 で自作のポップアップメニューを作るのに使ってます。 XPOP3 は、メニューアイテムの背景色を16進数の RGB で指定しなければいけないんですが、これがめんどくさくて、しかも XSI の中にあるカラーピッカー・カラーホイールって16進数表記が無いんですよね。 無いよね? 無いと言ってくれ。 Photoshp のカラーホイールは16進数での RGB 表記も同時に出るので、しかたなく Photoshop と行き来してたんですよね。

なので、XSI の中だけでやりたかったというだけです。XSI の使い慣れたスライダで色を決め、その結果出てきた16進数の RGB 値(文字列)をコピペで XPOP3 のコードに持っていく。それだけです。

スライダをいじくって色を変えると、下の RGB 表記がインタラクティブにアップデートされます。あとは手でコピペして使ってくれというものです。 ど頭の 0x の表記を付けるかどうかはチェックボックスで切り替えられます。 XPOP3 では 0xRRGGBB と書いてやる必要があるみたいです。たぶん。







スクリプティング的なところでは、10進数を16進数に変換するあたりがポイントでしょうか。


function GetRGBHex( )
{
   
//    0~1を 0~255 にし、それをさらに16進数に変換し、
    RR = Math.round( PPG.R.value * 255 ).toString( 16 );
    GG = Math.round( PPG.G.value * 255 ).toString( 16 );
    BB = Math.round( PPG.B.value * 255 ).toString( 16 );
   
//    ケタを合わせ、
    RRGGBB = to2keta( RR ) + to2keta( GG ) + to2keta( BB );
    return RRGGBB;   
//戻す。
}
function to2keta( str )
{
    if ( str.length <2 )   
//もうちょっとマシなケタ合わせルーチン教えて下さい
    {
        str = "0" + str;
    }
    return str;
}



ここで、


  数値.toString(16);


とやっています。 いや、きっとポイントでも何でもなく、自分は今まで知らなかったというだけなんですが。 toString は元になる何かを文字列に変換するメソッドですが、括弧の中に○○進数というのを指定できる、のかな? こんなの知らなかった。簡単じゃないか。 ありがとうごてつさん。


これは JScript の場合であって、他の言語では全く違うと思います。 VBScript では Hex( 数値) ってのが使えますね。 これもすごく便利ですね。 a = Hex( 255 ) とかやると、a には FF が入っています。 これに相当することを JScript でやりたくて、でもわかんなくてモニタを投げていたら、賢人が教えてくれたのです。 ありがたいことです。  ぱいそんではどうやるのかな。


Math.round( 元の数値 * 255 ) とかやっているのは、XSI のスライダでは 0~1 の小数点を含んだ範囲なので、0~255の範囲の整数にリマップしているつもりです。 レンジのスタートは同じで、レンジの終わりだけが 1 だったものが 255 になればいいんだから、単純に 255 を掛け算している。小数点以下は四捨五入。 というつもりなんですが、これで計算式合ってる? テキトーですいません。


ケタ合わせはこんなのでいいのだろうか。文字列の長さを調べて、2文字以下だったら頭にゼロを足して2文字にした状態=2桁の文字列 にして返しています。 もっと上手い方法というか、プログラミングの常套手段的な、お定まりの方法あるんでしょ? 教えて下さい。






あとは、XSI の PPG にカラーなコントロールを付けるのはどうやればいいか、の参考になるんじゃないですかね。 


//    カスタムプロパティに必要なパラメータ作成
oP.AddParameter2( "R", siDouble, 1, 0, 255 );
//    色パラメータは、RGB個別にパラメータ必要
oP.AddParameter2( "G", siDouble, 0, 0, 255 );
//    そして、R,G,B の順にパラメータを追加する必要がある
oP.AddParameter2( "B", siDouble, 0, 0, 255 );
//    途中で変なもの挟むとわかりにくくなるよ
oP.AddParameter2( "RRGGBB", siString, "" );   
//    0x 無しの16進数文字
oP.AddParameter2( "sHex", siString, "" );   
//    結果の16進数文字
oP.AddParameter2( "bHeader", siBool, true );   
//    0x 付けるかどうか

//    上で作成したパラメータを、PPG に追加(PPGLayout)
var oL = oP.PPGLayout;
var oItem = oL.AddColor( "R" ); 
//色コントロールは AddColor で R のみ指定する


この辺の話ですが。
R,G,B は、コントロールとしては1つしかないけど、RGB個別のパラメータを与える必要があります。 でも PPGLayout に追加するときは、AddColor の呪文を使って R だけを追加します。 
※AddItem じゃない所が味噌です。 ま、おそらく AddItem と siControlRGB などの組み合わせでも可能かと思いますが、AddColor の方が楽でしょう。

順番が重要です。 Property.AddParameter2 などを使ってパラメータを追加するときに、 R G B の順番で必ず連続して追加しましょう。 この例では、パラメータの名前を "R" "G" "B" としています。 連続で追加しています。 もっとわかりやすい名前にすれば良かったな。。。。

順番が重要である理由は・・・・説明するのが面倒だなw

ええと、後に AddColor を使って R だけを PPG に登録するとXSI のあのカラースライダになるわけですが、このとき、PPG にとっては、パラメータが何であってもかまわないんですね。 AddColor のカッコの中で 「この名前のパラメータが RGBR  だぞ」 と指定すされたPPG は、カスタムプロパティ内の次のパラメータ次の次のパラメータをそれぞれ G B とみなしてしまうわけです。

最初にカスタムプロパティにパラメータを追加する時点で、その追加した順番は記憶されています。 PPG はこの順番を頼りに、最初に R だと指定されたパラメータを起点として続く2つのパラメータをゲットしてくるわけです。 なので順番が大事なのです。

まあ、俺はこの仕様はどうかと思いますけどね。パラメータが3つ分かれているのはいいとして、順番に関係なく、ちゃんとパラメータの名前で RGB 指定できるようにするべきじゃないですかねえ。





あとは、OnInit やら OnChanged やらで、数値が変わった時にどんな挙動をさせるか、その処理の参考になるかも知れません。

OnInit は PPG が開かれたとき(リフレッシュされたとき)に自動的に起動されるファンクションです。 それ以外の パラメータ名_OnChanged は、パラメータの数値に変化があった時に自動的に起動されるファンクションです。

ソースを見ると、OnInit が起動された時も、 RGB のパラメータに変化があった時も、ColorChange というファンクションに飛ばすようになってます。

ColorChange の中で、16進数に変換するファンクションに飛ばし、次に 0x を付けるか付けないかのファンクションに飛ばしています。 16進数変換のファンクションの中では、さらに2桁に変換するファンクションに飛ばしたりもしています。

こういうの、スパゲティコードって言うんですか? 違う? 俺の中では、無駄の無い、ロジカルな構造のつもりで書いているんですけどね。

でもまあ、ダブったコードを減らそうとしてファンクションでまとめすぎると、やはりわかりにくくなることはありますよね。 ファンクションでまとめるのは、実は 「無駄なくまとめられた」 という自己満足に過ぎないことも多く、ダブっていることを承知で、色んなファンクションの中に同じコートを書いてしまった方が分かり易い場合も多いです。 コピペすりゃいいわけだし。 これはいつも悩みどころです。




それではごきげんよう。



.

|

« 福島復興支援XSI男Tシャツ 会計報告。 | トップページ | 乱立2011。 »

コメント

コメントを書く



(ウェブ上には掲載しません)




トラックバック


この記事へのトラックバック一覧です: 色がへくーす。:

« 福島復興支援XSI男Tシャツ 会計報告。 | トップページ | 乱立2011。 »