foobarは一昨年くらい前に作ったのをずっと使ってきたのですが、PCも変えたことだしついでに作り直して見ました。

Before → After

前回はいろいろなCompornentを入れすぎてごちゃごちゃしていたので、今回はシンプルに。使用したのはColumns UI, Panel Stack Splitter, Library Tree, EsPlaylist, Channel spectrum panel, Lyrics Art, あとはMenu, volume, seekbarだけです。基本的にPanel Stack Splitterだけで各パネルの配置、表示、ボタンの配置をやってしまっています。いや本当にすばらしいCompornentですね、作者様に感謝。

 

ボタン欄の一番右を押すとジャケットモード（仮）になって上のような表示に変わります。ジャケットが中央に配置されて歌詞がその下に、奥にスペクトラムアナライザが配置されます。また、左右の矢印を押すとプレイリスト上での前後のアルバムを再生するようにしました。なかなか厄介だったのがPanel Stack Splitterを背景透過設定にしてもChannel spectrum panelをうまく表示してくれないんですね。しょうがないので、中央のジャケットはもう一枚Panel Stack Splitterを配置して、その上にジャケット画像を表示、さらにそのジャケ画像の大きさを取得して、動的にPanel Stack Splitterのサイズを変えることで対処しています。

これはmovepanelを使えばそこまで難しくなくて、put関数でジャケットの縦と横のサイズをjacket_h, jacket_wとおいて、jacket_wの半分の値をjacket_w2とした場合、

$movepanel(0,$sub($div(%ps_width%,2),$get(jacket_w2)),$sub(%ps_height%,[任意の値]),$get(jacket_w),$get(jacket_h))

と書けば、ウィンドウをどのようなサイズにしてもジャケットが中央に表示されます。[任意の値]の部分はウィンドウ内でのジャケットをどの高さに表示するか、を表します。事前に$imageabs(0,0,,,$get(jacket_path),nodisplay,,255,)でメモリにジャケット画像をキャッシュしておけば、$getimagewidth($get(jacket))などの関数でジャケットの縦、横サイズは把握できるので十分実現可能かと思います。余談ですが、下部の曲情報欄のガラスっぽいのは画像ではなく、Panel Stack Splitterの短形表示関数を組み合わせていたりします。

同じようなUIを作ろうとしている方の参考になれば（なるのかなあ）