メモ書き的な

だいぶ前に2ちゃんのfoobar質問スレを眺めていたら、回答者の方とやり取りしながらGraphical Browser(以下GB)のカスタマイズをしている方がいて、懐かしい気持ちになりました。優れたソフトやモジュールはいつまでも残り続けるように、このGraphical Browserも何年も昔に更新が停止しているにも関わらず、自分も含めて多くの人が今だに使い続けているコンポーネントです。
この間触発されて数年ぶりに自分も触ってみたのですが、綺麗さっぱり書き方忘れていますね。自分が書いたはずのコードも赤の他人のコードにしか見えず、コードの意図を思い出すのに苦労しました。Tips的なものを活用しないと実現できないものもあったりして、そういった情報も今は散逸・埋没しているので中々大変だったりします。
今更誰かがそういった情報を残してくれるはずもないので、誰のためでもなく、数年後の自分のために持っている知識や技術、コードを残しておくのが正解でしょう。そういう訳でここにGraphical Browserに関する自分の知見を列挙していきます。

基本的な使い方

redemeが非常に親切なので、これを読めば基本的なことは忘れていても思い返せます。
気をつけておきたいのはredemeにもあるように、ペンやブラシ、フォントはGDIとGDI+の描画で分かれて設定する必要がある点です。描画されない、色が違うといった場合、たいていこれが原因だったりします。

過去に見た質問 & 個人的に解決していない問題

・ポップアップが表示されない
haや2ちゃん質問スレでも過去頻出。初期設定ではポップアップの透明度が0に設定されているので任意の値の設定します。パネル状上で右クリック→Settings→Others/その他 タブ→Popup→Popup opacity

---

・画像(ジャケット)が表示されない
頻出。デフォルトでは最初から画像を表示させるコードが書かれていません。自分で書くしかありません。
また拾ってきた設定を入れた場合も、画像が置かれている環境が作成者と異なることが多いので、自分の環境に合わせて書き換える必要がわりとよくあります。

別にGBがどうこうというよりも、当時のfoobarはジャケットなどの表示も今よりも手軽に設定できず、スキンなど拾ってくるとこういう設定作業がつきものでした。

---

・音楽ファイルに埋め込んだ画像(ジャケット)が表示されない
仕様。埋め込み対応してないのでどうしようもありません。類似の機能を再現できる「ESplaylist」(DUI / CUI)や「Facets」(DUI)あるいは「JScript Panel」(DUI / CUI)で使える「JS Smooth Browser」を使う方が埋込み派には良いかもしれません。

どうしても使いたい場合は埋め込み画像を展開させるしかありません。
foobarのプレイリスト上で右クリック→Tagging→Manage attached pictuersで画像が展開できます。ただまとめて一括処理は無理だと思うので、Mp3Tagあたりでやった方が早いでしょう。
JScript Panel扱えるならばutils.GetAlbumArtEmbeddedとSaveAsメソッドを使う手段もありますが、単純な展開ならばMp3Tagの方が勝っています。
昔は画像展開できるコンポーネント(foo_func等)も存在していたんですけどね……

---

・ソートが他のプレイリストなどと違う結果になる(2バイト文字が正しく並ばない)
仕様、だと思われます。この当時作られたいくつかのコンポーネントがこうなるらしい。
根本的な解決策は不明ですが、プレイリストと同じグルーピング且つ並びで良いならば、$num(%gb_playlist_number%,6)といったようにソート設定欄に書いておけば同じ並びになります。$numはゼロパディングするために呼び出されています。

---

・%gb_calc_x%、%gb_calc_y%が正しい値を返さない
原因不明。情報もないため不具合とかでなく、自分の使い方が根本的に間違っているのかもしれません。過去に唯一同じ疑問を抱いた人が2ちゃんで質問していましたが、有為な回答は得られていません。
対処法はその都度、$add、$evalなどを使って修正するくらいでしょうか。

---

・コーデック情報の取得に失敗する
コーデック情報はTFの$codec()などで取得できますが、自分の環境だとGBのみ一部のアルバムコーデック情報の取得に失敗します(失敗すると拡張子を返す)。
一応True Audio(TTA)のみ確認しています、というかCDは全部TTAでリッピングしているので他のコーデックでも起きているのかもしれませんが。同じバージョンのEACでリッピングしても、一部のみGBではこうなります。情報も全くなくて原因不明。まぁこれもソート問題と同じで直接GBは関係ないのかもしれません。
対処法は簡単で、$strcmpで拡張子を返してきたら処理を分岐させ、好きな文字列に置き換えるだけです。

---

・マルチモニタ環境で、プライマリモニタにコンテキストメニューが必ず表示される。
仕様、だと思われます。対処方法はたぶんない(´・ω・｀)

---

Tips

・画像Aがある場合はAを、Aがないときは画像Bを表示する

GBには$findfileみたいな関数はないので一工夫必要になります。自分が知る限り2つ方法があります。

・$draw_imageの返り値を利用する
$draw_imageは描画に成功すると何か返しているようなので、これを利用します。
$if($draw_imageと、if文で分岐させる訳です。

・%gb_calc_width%、%gb_calc_height%を使う
$draw_imageを呼び出すと%gb_calc_width%、%gb_calc_height%に画像の大きさが格納されるので、その値を$ifgreater(%gb_calc_width%,1,,)といった感じで比較します。

余談ですが昔は拡張変数・関数を提供するコンポーネントでファイルの有無を調べたりもできました。他のコンポーネントでそのコンポーネントが提供する便利関数などを使えたのですが、まぁいろいろあって使えなくなりました。
haのGBスレッドの古い投稿にもそれらを使ったコードが散見されます。現在それらのコンポーネントは使えないのでコードを流用する場合は上記のような方法などで差し替える必要があります。

---

・ItemやPopup(track)の背景をアイテムやトラックごとに交互に色分けする
GBに限らず、オフィスソフトのセルの色分けとか色々なとこで見かけるし、方法もよく知られているので別に書かなくてさすがに忘れない気がしますが、一応書いておくと行と列番号を足すと偶数・奇数が交互に並ぶので、それを2で割って余りを$ifequalなどで比較分岐させて、ペンなりブラシを別々に設定するだけで実現できます。
$ifequal($mod($eval(%gb_col%+%gb_row%),2),0,処理1,処理2)みたいな感じです。

---

その他情報

現在入手できるGBはrev.015(リビジョン15)で、これが実質最終更新版の扱いとなっていますが、実はrev.016が存在します。以前作者の方が2ちゃんのあるスレに現れてそのときにアップロードされたもので、恐らくごく短期間しか存在していません。
rev.016ではアクティブプレイリストに加えてライブラリ全体との同期機能が備わっていたようですが、私も現在は手元に無いため詳細は不明です。

---

デザインとレイアウト & 類型

GBのデザインとレイアウトでよく見かけるものをサンプルコードで再現し、一定の類型で分類しています。類型は自分の見方であって、別に定着している訳ではありません。
ちなみに全部ジャケットやディスク表示が前提のデザインになっています。私、ジャケットはもちろん、
帯やディスクまで全部スキャンしないと気が済まない病的な部分があってですね……


・タイル（グリッド）型
アイテムをタイル状に敷き詰めていくGBの初期状態のレイアウトです。これにジャケット画像を表示させたカスタマイズが定番で、一番多く見た記憶があります。サンプルのようにジャケットの上に文字情報を重ねるとゴチャゴチャしたイメージが強く出やすいのでやめた方が良いかもしれません。




コード
Item

//// Album art
$puts(aart1,$replace(%path%,%filename_ext%,folder.*))
$puts(aart2,$replace(%path%,%filename_ext%,oblong folder.*))
$puts(aart3,$replace(%path%,%filename_ext%,special folder.*))
$puts(aart4,$replace(%path%,%filename_ext%,%album%.*))
$puts(disc,$replace(%path%,%filename_ext%,disc.*))



//// Font  & brush
$set_font(メイリオ,10,)
$gp_set_font(メイリオ,10,)
$gp_set_pen(255-255-255-255,10)
$gp_set_brush(255-255-255-255)
$gp_set_text_rendering_hint(ct)



//// Scale & coordinates
$puts(aart_size,118)
$puts(item_margin,2)



//// Draw album art
$draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart1),255,)

$ifgreater(%gb_calc_width%,1
        ,
        ,$draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart2),255,)

    $ifgreater(%gb_calc_width%,1
        ,
        ,$draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart3),255,)
    )
        $ifgreater(%gb_calc_width%,1
            ,
            ,$draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart4),255,)
        )
            $ifgreater(%gb_calc_width%,1
                ,
                ,$draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(disc),255,)
            )
)



//// Text background color
//$if($or(%gb_isplaying%,%gb_mouse_over%),
//  ,
//  $gp_set_brush(40-0-0-0)
//  $gp_fill_rectangle(0,0,%gb_width%,%gb_height%)
//)



//// focuse
$if(%gb_isplaying%,
    $if(%gb_mouse_over%,
        $gp_set_pen(222-255-199-143,10)
        $gp_draw_rectangle(0,0,%gb_width%,%gb_height%),
 
        $gp_set_pen(222-255-128-0,10)
        $gp_draw_rectangle(0,0,%gb_width%,%gb_height%)
    ),

    $if(%gb_mouse_over%,
        $gp_set_pen(100-255-255-255,10)
        $gp_draw_rectangle(0,0,%gb_width%,%gb_height%)
    ,)
)



//// Album info
$if(%gb_mouse_over%,
    ,
    $if(%gb_isplaying%,
        $set_font_color(255-128-0)
        $draw_text_blur(%gb_group%,$get(item_margin),$get(item_margin),%gb_width%,%gb_height%,20,3,wordbreak)
        $set_font_color(255-255-255)
        $draw_text(%gb_group%,$get(item_margin),$get(item_margin),%gb_width%,%gb_height%,wordbreak,),   

        $set_font_color(48-37-186)
        $draw_text_blur(%gb_group%,$get(item_margin),$get(item_margin),%gb_width%,%gb_height%,20,3,wordbreak)
        $set_font_color(255-255-255)
        $draw_text(%gb_group%,$get(item_margin),$get(item_margin),%gb_width%,%gb_height%,wordbreak,)
    )
)

Popup

//// Font  & brush
$gp_set_font(メイリオ,13,)
$gp_set_string_format(center,center,ellipsis_character)
$gp_set_smoothing_mode(1)
$gp_set_text_rendering_hint(ct)
$gp_set_brush(255-248-247-255)



//// Scale & coordinates
$puts(header_h,30)
$puts(track_h,30)



//// Resize popup
$set_size(400,$eval($get(track_h)*%gb_track_count%+$get(header_h)))



//// Background color
$gp_fill_rectangle(0,0,%gb_width%,%gb_height%)



//// Album title
$if(%gb_isplaying%,
    $gp_set_brush(255-255-128-0),
    $gp_set_brush(255-48-37-186)
)

$gp_draw_string(%album%,2,2,%gb_width%,$get(header_h))

Per track (Popup)

//// Font  & brush
$gp_set_font(メイリオ,10,)
$gp_set_pen(235-215-55-5,1)
$gp_set_brush(235-51-51-51)



//// Scale & coordinates
$puts(track_y,2)
$puts(track_h,30)
$puts(track_number_x,2)
$puts(track_number_w,30)
$puts(title_x,$add($get(track_number_x),$get(track_number_w),2))

$set_org(0,$eval($get(track_h)*%gb_track_index%+$get(track_h)))



//// Separator
$gp_draw_line(0,0,%gb_width%,0)



//// Track info
$if(%gb_isplaying%,
    $gp_set_brush(235-255-128-0)
    ,
)

$gp_set_string_format(far,center)
$gp_draw_string($add(%gb_track_index%,1),$get(track_number_x),$get(track_y),$get(track_number_w),$get(track_h))
$gp_set_string_format(near,center,ellipsis_character)
$puts(track_y,9)
$puts(track_h,16)
//$gp_draw_string(%title%,$get(title_x),$get(track_y),$sub(%gb_width%,$get(track_number_w)),$get(track_h))
$gp_draw_string(%title%,$get(title_x),$get(track_y),$sub(%gb_width%,$get(track_number_w)),$sub($get(track_h),0))

Item size: 120 x 120
Popup size: 400 x 480
"Per track"を処理する最大トラック数:　15

---

・カラム型
アイテムの情報を列表示させるレイアウトです。そのためアイテムが横長になっていることが多いのが特徴です。過去に見たものはどれもデザインがおしゃれなものばかりだった記憶があります。
作ったサンプルだとアクセントカラーも兼ねたジャンル色分けあたりが自分なりのドヤァな部分なんですが、これも自分の場合は持ってるジャンルが偏りすぎてて意味なかったりします。



コード
Item

//// Album art path
$puts(aart1,$replace(%path%,%filename_ext%,folder.*))
$puts(aart2,$replace(%path%,%filename_ext%,oblong folder.*))
$puts(aart3,$replace(%path%,%filename_ext%,special folder.*))
$puts(aart4,$replace(%path%,%filename_ext%,%album%.*))
$puts(disc,$replace(%path%,%filename_ext%,disc.*))



//// Font  & brush
$gp_set_font(メイリオ,10,)
$gp_set_text_rendering_hint(ct)
$gp_set_string_format(near,center,ellipsis_character)
$gp_set_smoothing_mode(1)



//// Scale & coordinates
$puts(aart_size,$sub(100,$get(item_margin)))
$puts(item_margin,2)
$puts(column_y,$add($get(item_margin),3))
$puts(column_h1,20)
$puts(column_h2,17)
$puts(text_x,$add($get(aart_size),7))
$puts(text_w,$sub(%gb_width%,$get(text_x)))
$puts(aartist_margin,7)



//// Draw background color
$ifequal($mod($eval(%gb_col%+%gb_row%),2),0,
    $gp_set_brush(255-248-247-255)
    $gp_fill_rectangle($get(item_margin),$get(item_margin),%gb_width%,%gb_height%)
    $if(%gb_isplaying%,
        $gp_set_brush(205-255-128-0,0,0,0-255-128-0,%gb_width%,%gb_height%)
        $gp_fill_rectangle($get(item_margin),$get(item_margin),%gb_width%,%gb_height%)      
    ),

    $gp_set_brush(255-230-230-236)
    $gp_fill_rectangle($get(item_margin),$get(item_margin),%gb_width%,%gb_height%)
    $if(%gb_isplaying%,
        $gp_set_brush(135-255-128-0,0,0,0-255-128-0,%gb_width%,%gb_height%)
        $gp_fill_rectangle($get(item_margin),$get(item_margin),%gb_width%,%gb_height%)      
    )
)



//// Draw album art
$draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart1),255,)

$ifgreater(%gb_calc_width%,1
        ,
        ,$draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart2),255,)

    $ifgreater(%gb_calc_width%,1
        ,
        ,$draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart3),255,)
    )
        $ifgreater(%gb_calc_width%,1
            ,
            ,$draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart4),255,)
        )
            $ifgreater(%gb_calc_width%,1
                ,
                ,$draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(disc),255,)
            )
)






//// focuse
//$if(%gb_isplaying%,
//$if(%gb_mouse_over%,
//$gp_set_pen(222-255-199-143,10)
//$gp_draw_rectangle(0,0,%gb_width%,%gb_height%),
 
//$gp_set_pen(222-255-128-0,10)
//$gp_draw_rectangle(0,0,%gb_width%,%gb_height%)
//),
//$if(%gb_mouse_over%,
//$gp_set_pen(100-255-255-255,10)
//$gp_draw_rectangle(0,0,%gb_width%,%gb_height%)
//,)
//)



//// Album info
$gp_set_font(メイリオ,12,u)
$gp_set_brush(235-51-51-51)
$gp_draw_string(%album%,$get(text_x),$get(column_y),$get(text_w),$get(column_h1))


// Genre & category
$gp_set_font(メイリオ,8,b)
$gp_set_string_format(far,center,ellipsis_character)
$gp_calc_string(%genre%)

$if($strcmp(%genre%,Game),
    $gp_set_brush(255-34-236-91),

    $if($strcmp(%genre%,Anime),
        $gp_set_brush(255-211-56-28),

        $if($strcmp(%genre%,Soundtrack),
            $gp_set_brush(255-193-228-233),

            $if($strcmp(%genre%,J-POP),
                $gp_set_brush(255-71-131-132),

                $if($strcmp(%genre%,EDM),
                    $gp_set_brush(255-183-159-203),

                    $if($strcmp(%genre%,Electronic),
                        $gp_set_brush(255-93-55-163),

                        $if($strcmp(%genre%,Drum and bass),
                            $gp_set_brush(255-159-22-106),

                            $if($strcmp(%genre%,Trance),
                                $gp_set_brush(255-187-185-153),

                                $if($strcmp(%genre%,House),
                                    $gp_set_brush(255-209-222-76),

                                    $if($strcmp(%genre%,Dance),
                                        $gp_set_brush(255-44-124-255),

                                        $if($strcmp(%genre%,Eurobeat),
                                            $gp_set_brush(255-0-139-187),

                                            $if($strcmp(%genre%,Rock),
                                                $gp_set_brush(255-227-172-174),

                                                $if($strcmp(%genre%,Classical),
                                                    $gp_set_brush(255-150-81-77),

                                                    $gp_set_brush(255-100-92-97)
)))))))))))))

$if(%genre%,
    $gp_fill_rectangle($sub(%gb_width%,%gb_calc_width%),$eval($get(column_h1)+$get(column_y)-1),%gb_calc_width%,%gb_calc_height%)
    $gp_set_brush(235-255-255-255)
    $gp_draw_string(%genre%,$get(text_x),$eval($get(column_h1)+$get(column_y)),$get(text_w),$get(column_h2)),
    
    $gp_calc_string(Other)
    $gp_set_brush(235-100-92-97)
    $gp_fill_rectangle($sub(%gb_width%,%gb_calc_width%),$eval($get(column_h1)+$get(column_y)-1),%gb_calc_width%,%gb_calc_height%)
    $gp_set_brush(235-255-255-255)
    $gp_draw_string(Other,$get(text_x),$eval($get(column_h1)+$get(column_y)),$get(text_w),$get(column_h2))
)


// Date
$gp_set_font(メイリオ,9,)
$gp_set_brush(235-51-51-51)
$gp_set_string_format(near,center,ellipsis_character)
$gp_draw_string(%date%,$get(text_x),$eval($get(column_h1)+$get(column_y)),$sub($get(text_w),%gb_calc_width%),$get(column_h2))


// Album artist
$gp_set_font(メイリオ,10,)
$gp_set_brush(235-51-51-51)
$gp_draw_string(%album artist%,$get(text_x),$eval($get(column_h1)+$get(column_y)+$get(column_h2)+$get(aartist_margin)),$get(text_w),$get(column_h2))


// Codec
$if($strcmp($codec(),TTA),
    $puts(codec,True Audio),
    
//$if($strcmp($codec(),FLAC),
//$puts(codec,Free Lossless Audio Codec),

//$if($strcmp($codec(),MP3),
//$puts(codec,MPEG-1 Audio Layer-3),
$puts(codec,$codec())
//))
)

$gp_draw_string($get(codec),$get(text_x),$eval($get(column_h1)+$get(column_y)+$get(column_h2)*2+$get(aartist_margin)),$get(text_w),$get(column_h2))


// Total track & total length
$gp_draw_string([%totaltracks% tracks - ]%gb_length%,$get(text_x),$eval($get(column_h1)+$get(column_y)+$get(column_h2)*3+$get(aartist_margin)),$get(text_w),$get(column_h2))

Popup

//// Font  & brush
$gp_set_font(メイリオ,13,)
$gp_set_string_format(center,center,ellipsis_character)
$gp_set_smoothing_mode(1)
$gp_set_text_rendering_hint(ct)
$gp_set_brush(255-248-247-255)



//// Scale & coordinates
$puts(header_h,30)
$puts(track_h,30)



//// Resize popup
$set_size(400,$eval($get(track_h)*%gb_track_count%+$get(header_h)))



//// Background color
$gp_fill_rectangle(0,0,%gb_width%,%gb_height%)



//// Album title
$if(%gb_isplaying%,
    $gp_set_brush(255-255-128-0),
    $gp_set_brush(255-48-37-186)
)

$gp_draw_string(%album%,2,2,%gb_width%,$get(header_h))

Per track (Popup)

//// Font  & brush
$gp_set_font(メイリオ,10,)
$gp_set_pen(235-215-55-5,1)
$gp_set_brush(235-51-51-51)



//// Scale & coordinates
$puts(track_y,2)
$puts(track_h,30)
$puts(track_number_x,2)
$puts(track_number_w,30)
$puts(title_x,$add($get(track_number_x),$get(track_number_w),2))

$set_org(0,$eval($get(track_h)*%gb_track_index%+$get(track_h)))





$ifequal($mod(%gb_track_index%,2),0,
    $gp_set_brush(255-248-247-255),
    $gp_set_brush(255-230-230-236)
)

$gp_fill_rectangle(0,0,%gb_width%,%gb_height%)





//// Separator
$gp_set_pen(235-215-55-5,1)
$gp_draw_line(0,0,%gb_width%,0)



//// Track info
$if(%gb_isplaying%,
    $gp_set_brush(235-255-128-0),
    $gp_set_brush(235-51-51-51)
)

$gp_set_string_format(far,center)
$gp_draw_string($add(%gb_track_index%,1),$get(track_number_x),$get(track_y),$get(track_number_w),$get(track_h))
$gp_set_string_format(near,center,ellipsis_character)
$puts(track_y,9)
$puts(track_h,16)
//$gp_draw_string(%title%,$get(title_x),$get(track_y),$sub(%gb_width%,$get(track_number_w)),$get(track_h))
$gp_draw_string(%title%,$get(title_x),$get(track_y),$sub(%gb_width%,$get(track_number_w)),$sub($get(track_h),0))

Item size: 400 x 100
Popup size: 400 x 480
"Per track"を処理する最大トラック数:　15

---

・インライン型
タイル型の亜種で、アイテムを縦か横一行に並べるレイアウトです。タイル型と違って場所を取りにくいので、常時表示させてる人が多いような気がします。自分がメインで使用しているfoobarも現在はこのサンプルを使用しています。
アイテム数が多いと目的のアイテムを探しにくいというデメリットがあるため、操作補助的な何かをレイアウトに組み込むが良いのではと思います。サンプル画像ではPanel Stack Spliterでヘッダーを別途作り、そこにGBを利用した頭文字検索やプレイリストの始端・終端・カレントアイテムにジャンプできるボタンを置いています。
GBの頭文字検索に関しては次の項目で説明しています。



コード
Item

//////Image Path//////
////layout
$puts(root_folder_path,'C:\Users\Admin\AppData\Roaming\foobar2000')
$puts(frame,$get(root_folder_path)'\images\frame_gray_01.png')
$puts(frame_playing,$get(root_folder_path)'\images\frame_orange_01.png')

////album art
$puts(aart1,$replace(%path%,%filename_ext%,folder.*))
$puts(aart2,$replace(%path%,%filename_ext%,oblong folder.*))
$puts(aart3,$replace(%path%,%filename_ext%,special folder.*))
$puts(aart4,$replace(%path%,%filename_ext%,%album%.*))
$puts(disc,$replace(%path%,%filename_ext%,disc.*))



//////Scale & Coordinates//////
$puts(aart_size,90)
$puts(item_margin,8)



//////Frame//////
$if(%gb_isplaying%
    ,$draw_image(4,4,98,130,$get(frame_playing),255,)
    ,$draw_image(4,4,98,130,$get(frame),255,)
)



//////Draw album art//////
$if($draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart1),255,),
    ,
    $if($draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart2),255,),
        ,
        $if($draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart3),255,),
            ,
            $if($draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(aart4),255,),
                ,
                $if($draw_image($get(item_margin),$get(item_margin),$get(aart_size),$get(aart_size),$get(disc),255,),
                    ,
                    $calc_text(,0,0,0,0)
)))))



//////Draw border frame//////
$gp_set_pen(255-255-255-255,2)

$ifgreater(%gb_calc_width%,1,
    $gp_draw_rectangle($eval(%gb_calc_x%+$get(item_margin)),$eval(%gb_calc_y%+$get(item_margin)),%gb_calc_width%,%gb_calc_height%),
    
    $gp_draw_rectangle($eval(%gb_calc_x%+$get(item_margin)),$eval(%gb_calc_y%+$get(item_margin)),$get(aart_size),$get(aart_size))
)




//////Focuse//////
$if(%gb_mouse_over%,
  $gp_set_pen(70-255-255-255,10)
  $gp_draw_rectangle(0,0,%gb_width%,%gb_height%)
,)


$if(%gb_focused%,
  $gp_set_brush(70-255-255-255)
  $gp_fill_rectangle(0,0,%gb_width%,%gb_height%)
,)




//////Album Info//////
$set_font(メイリオ,10,)


$if(%gb_isplaying%
    ,$set_font_color(45-45-45)
     $draw_text(%gb_group%,6,$eval(%gb_height%-40),$eval(%gb_width%-11),%gb_height%,singleline,)
     $draw_text(%album artist%,6,$eval(%gb_height%-22),$eval(%gb_width%-11),%gb_height%,singleline,)
    ,$set_font_color(48-37-186)
     $draw_text(%gb_group%,6,$eval(%gb_height%-40),$eval(%gb_width%-11),%gb_height%,singleline,)
     $draw_text(%album artist%,6,$eval(%gb_height%-22),$eval(%gb_width%-11),%gb_height%,singleline,)
)

$set_font_color(255-255-255)
$draw_text(%gb_group%,7,$eval(%gb_height%-40),$eval(%gb_width%-11),%gb_height%,singleline,)
$draw_text(%album artist%,7,$eval(%gb_height%-22),$eval(%gb_width%-11),%gb_height%,singleline,)

Popup

//////Image Path//////
////layout
$puts(root_folder_path,'C:\Users\Admin\AppData\Roaming\foobar2000')
$puts(arrow,$get(root_folder_path)'\images\arrow_blue_01.png')
$puts(arrow_playing,$get(root_folder_path)'\images\arrow_orange_01.png')
$puts(bar_orange,$get(root_folder_path)'\images\gradation_bar_orange_02.png')
$puts(bar_blue,$get(root_folder_path)'\images\gradation_bar_blue_02.png')



////album art
$puts(aart_type,0)
$puts(aart1,$replace(%path%,%filename_ext%,folder.*))
$puts(aart2,$replace(%path%,%filename_ext%,oblong folder.*))
$puts(aart3,$replace(%path%,%filename_ext%,special folder.*))
$puts(aart4,$replace(%path%,%filename_ext%,%album%.*))
$puts(disc,$replace(%path%,%filename_ext%,disc.*))



//////Scale & Coordinates//////
$puts(item_margin,30)
$puts(aart_y,0)
$puts(aart_size,$eval(%gb_width%-$get(item_margin)))
$puts(aart_opacity_1,255)
$puts(aart_opacity_2,0)  //calculate per track string coordinate



//////Draw album art//////
$if($draw_image($get(item_margin),$get(aart_y),$get(aart_size),$get(aart_size),$get(aart1),$get(aart_opacity_1),),
    $puts(aart_x,%gb_calc_x%)
    $puts(aart_y,%gb_calc_y%)
    $puts(aart_w,%gb_calc_width%)
    $puts(aart_h,%gb_calc_height%)
    $puts(aart_type,1),

    $if($draw_image($get(item_margin),$get(aart_y),$get(aart_size),$get(aart_size),$get(aart2),$get(aart_opacity_1),),
        $puts(aart_x,%gb_calc_x%)
        $puts(aart_y,%gb_calc_y%)
        $puts(aart_w,%gb_calc_width%)
        $puts(aart_h,%gb_calc_height%)
        $puts(aart_type,2),

        $if($draw_image($get(item_margin),$get(aart_y),$get(aart_size),$get(aart_size),$get(aart3),$get(aart_opacity_1),),
            $puts(aart_x,%gb_calc_x%)
            $puts(aart_y,%gb_calc_y%)
            $puts(aart_w,%gb_calc_width%)
            $puts(aart_h,%gb_calc_height%)
            $puts(aart_type,3),

            $if($draw_image($get(item_margin),$get(aart_y),$get(aart_size),$get(aart_size),$get(aart4),$get(aart_opacity_1),),
                $puts(aart_x,%gb_calc_x%)
                $puts(aart_y,%gb_calc_y%)
                $puts(aart_w,%gb_calc_width%)
                $puts(aart_h,%gb_calc_height%)
                $puts(aart_type,4),

                $if($draw_image($get(item_margin),$get(aart_y),$get(aart_size),$get(aart_size),$get(disc),$get(aart_opacity_1),),
                    $puts(aart_x,%gb_calc_x%)
                    $puts(aart_y,%gb_calc_y%)
                    $puts(aart_w,%gb_calc_width%)
                    $puts(aart_h,%gb_calc_height%),

                    $puts(aart_x,30)            
                    $puts(aart_w,$get(aart_size))
                    $puts(aart_h,$get(aart_size))

                    $gp_set_brush(255-248-247-255)
                    $gp_fill_rectangle($get(aart_x),$get(aart_y),$get(aart_size),$get(aart_size))
                    $puts(aart_x,0)
                    $puts(aart_type,0)
)))))



//////Layout//////
$if(%gb_isplaying%,
    $draw_image($get(aart_x),$eval($get(aart_y)+$get(aart_h)-23),50,50,$get(arrow_playing),255,)
    $draw_image($eval($get(aart_x)+30),$eval($get(aart_y)+24),$get(aart_w),2,$get(bar_orange),255,nokeepaspect),

    $draw_image($get(aart_x),$eval($get(aart_y)+$get(aart_h)-23),50,50,$get(arrow),255,)
    $draw_image($eval($get(aart_x)+30),$eval($get(aart_y)+24),$get(aart_w),2,$get(bar_blue),255,nokeepaspect)
)

//%gb_calc_x% bug?



//////Album Infol//////
$gp_set_font(メイリオ,12,)

$if(%gb_isplaying%,
    $gp_set_pen(255-255-128-0,2)
    $gp_set_brush(255-255-128-0),

    $gp_set_pen(255-48-37-186,2)
    $gp_set_brush(255-48-37-186)
)

$gp_set_string_format(center,near,ellipsis_character)
$gp_set_smoothing_mode(1)
$gp_set_text_rendering_hint(ct)

$gp_draw_string_path(%album%,18,stroke,$eval($get(aart_x)+$get(item_margin)),$get(aart_y),$get(aart_w),20)

$gp_set_pen(255-255-255-255,2)
$gp_set_brush(255-255-255-255)

$gp_draw_string_path(%album%,18,fill,$eval($get(aart_x)+$get(item_margin)),$get(aart_y),$get(aart_w),20)
$gp_set_string_format(near,near,ellipsis_character)



///////Calculate Per Track String Coordinate//////
$ifequal($get(aart_type),1,
    $draw_image($get(item_margin),0,$get(aart_size),$get(aart_size),$get(aart1),$get(aart_opacity_2),),

    $ifequal($get(aart_type),2,
        $draw_image($get(item_margin),0,$get(aart_size),$get(aart_size),$get(aart2),$get(aart_opacity_2),),

        $ifequal($get(aart_type),3,
            $draw_image($get(item_margin),0,$get(aart_size),$get(aart_size),$get(aart3),$get(aart_opacity_2),),

            $ifequal($get(aart_type),4,
                $draw_image($get(item_margin),0,$get(aart_size),$get(aart_size),$get(aart4),$get(aart_opacity_2),),

                ,
            )
        )
    )
)

Per track (Popup)

//////Scale & Coordinates//////
$puts(item_margin,30)
$set_org(0,$mul(16,%gb_track_index%))



//////Track Info//////
$gp_set_font(メイリオ,12,)

$if(%gb_isplaying%,
    $gp_set_pen(255-255-255-255,3),
    $gp_set_pen(255-255-255-255,3)
)

$gp_set_string_format(,,ellipsis_character)
$gp_set_smoothing_mode(1)
$gp_set_text_rendering_hint(ct)


$gp_draw_string_path(%tracknumber% - %title%,12,stroke,$eval(%gb_calc_x%+$get(item_margin)),$eval(%gb_calc_y%+$get(item_margin)),%gb_calc_width%,15)

$if(%gb_isplaying%,
    $gp_set_brush(255-255-128-0),
    $gp_set_brush(255-48-37-186)
)

$gp_draw_string_path(%tracknumber% - %title%,12,fill,$eval(%gb_calc_x%+$get(item_margin)),$eval(%gb_calc_y%+$get(item_margin)),%gb_calc_width%,15)

Item size: 106 x 138
Popup size: 338 x 338
"Per track"を処理する最大トラック数:　15

これだけ画像を使用しているので一部パスを書き換える必要があります。なぜかフレームのような単色塗りのGBの関数で描けるものまで画像使ってますけど、数年前のことでなぜ使ったかは自分でも覚えていません。えーとなんでだっけ……

---

・GBを使った頭文字検索



これは私が考えたものではなく、br3tt氏（foobar界隈では非常に著名な方です）が公開したものをfoobar2000私用wiki管理人の方が日本語環境向けにローカライズしたものです。様々なスキンにも使われていることもあり、今でもたまに見かけます。
foobar2000私用wikiは非常に有用なサイトだったのですが、現在は閉鎖しています。ただインターネットアーカイブから、頭文字検索のコードもまだ入手できます。

foobar2000私用Wiki Graphical Browser解説 [Internet Archive]
https://web-beta.archive.org/web/20090416083252/http://www7.atpages.jp:80/~customize/foobar2000/pukiwiki/index.php?foobar2000%2FComponents%2FGraphical%20Browser

ダウンロード(download)

上記3種の設定ファイルは必要ならば以下のリンクからダウンロードできます。
https://www.axfc.net/u/3796776.zip

参考リンク

GB本体は下記のリンクからダウンロード可能です。
http://foobar2000.xrea.jp/up/files/up1088.7z

foobar2000についてあれこれ
http://blog.livedoor.jp/foober2001/archives/cat_28174.html
わりと詳しい解説が載っているサイトです。特にGDI, GDI+の解説は図があるので、ここを参考にすれば描画時にあれこれ試さずに済みます。

https://hydrogenaud.io/index.php/topic,61412.0.html
haのGBトピックです。コードも投稿されていますが、$cwb_fileexistsなどの外部コンポーネント依存の部分は書き直す必要があるため注意が必要です。