トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS

foobar2000/Components/Panel Stack Splitter

Last-modified: 2008-11-09 (日) 13:35:02 (156d)
Top / foobar2000 / Components / Panel Stack Splitter

びみょーにかきかけかもしれないぺーじ


Panel Stack Splitter解説 †

目次

↑

特徴 †

・Columns UI用パネルを配置するためのSplitter
・かなり自由に配置できる
・splitterとしての機能以外に、文字列・図形・画像描画やボタンを作ることが可能で、
　splitterであることを忘れさせるほどいろいろできる。

↑

実際に作ってみるSTEP1 ～パネルの配置～ †

はじめに
解説を読む前にTitle Formattingを読んでださい。
Columns UIの知識もあることを前提で解説を進めます。
わからないことがあればColumnsUIの解説ページを読んでください。

では、実際に作ってみます。何も設定していないfoobarから作り上げることを想定していますので、いろいろ設定してしまっている方はPortable installationでどこか適当にfoobarをインストールしてから設定することをおすすめします。

先に述べたとおり、Panel Stack Splitterは「Splitter」です。(パネルをどのように配置するかを決めるもの)
ですので、まずどんなデザインで、どんなパネルを配置するかを決めたほうがよいです。

今回はこのようなものを作ってみたいと思います。
foo_panel_stack_splitter00.png
必要なコンポーネント
・foo_ui_columns.dll
・foo_chronflow.dll
・foo_uie_graphical_browser.dll
・foo_uie_vis_channel_spectrum.dll
・foo_uie_wsh_panel.dll

まずは、レイアウトで以下のとおりにパネルを配置します。
foo_panel_stack_splitter01.png
Panel Stack Splitterを配置する前に、Horizontal splitterとVertical splitterで３つに大まかな配置をしています。
つまり、Panel Stack Splitterは、ほかのSplitterの中で設置することもできます。

レイアウトは「File>Preferences>Display>Columns UI>Layout」で設定します。
Panel Stack Splitterを右クリックし、「Insert panel」のメニューから配置したいパネルを選択することで、
Panel Stack Splitter内にパネルを配置することができます。

画像通りにすると、このようにPanel Stack Splitter内のパネルが自動的に配置されます。
この自動的に配置されているパネルを後で好きに配置していくことになります。

パネルの配置はここで必ず慣れるようにしてください。そうしないと自分で設定をするときにわからなくなります。
画像通りの配置をするだけでなく、適当にパネルを配置して、どのような挙動になるのかを把握し、
画像通りに配置すると、どうして完成の画像と同じようになるのかを理解してください。

Playlists Dropdownだけ、なぜPanel Stack Splitterをまた配置しているのか疑問に思った方は優秀です(今は気にしないでください、後でわかります)。疑問に思わなかった方は、ちょっと心配です。もっとSplitterやパネルを自分なりに配置してパネルの配置に慣れてください。

次に、見栄えの問題から「File>Preferences>Display>Columns UI>Layout」の各パネルの「Item details」の中の
「Show Caption」のチェックをはずします。

↑

実際に作ってみるSTEP2 ～自動配置モードと強制配置モード～ †

今の状態で、次の画像のようになっているかと思います。
foo_panel_stack_splitter02.png
大まかに配置をかえてみます。
foo_panel_stack_splitter03.png
まず、この画像の黄色の部分がChannel Spectrum panelなのですが、ちょっと場所をとりすぎているので、ドラッグして、面積を狭くします。同様に青い部分も狭くします。
このような感じです。
foo_panel_stack_splitter04.png
次に、Panel Stack Splitter内のパネルが自動的に配置されている部分を自分の好きなように配置できるようにします。
まずは、先の画像の黄色い部分を設定します。
設定は黄色い部分のどこかを右クリックし、Splitter Settings...を選択します。
(場所によって出ないことがあるので注意してください、パネルとパネルの間をクリックするとでやすくなります)
foo_panel_stack_splitter05.png
設定画面をだしたところで、設定の項目を把握しましょう。

caption: パネルの名前(識別子)

forced layout: 自分の意図したところにパネルを配置（強制配置モード）
　use percentage value: 配置場所をパーセンテージで設定
　enable padding settings: paddingの設定を有効にする
　　left,top,width,height: 強制配置モードのとき、どこに配置するかを設定(パネルの右・上の位置とパネルの横幅・縦幅)

size: パネルの表示サイズ(Horizontalなら水平のサイズ、Verticalなら垂直のサイズ)
lock size: スケーリングしないで配置する
padding: パネルの上下左右のスペース

ignore panel size limits: パネルのサイズの限界を無視
hide panel on startup: foobarを起動したとき、パネルは非表示(ボタンを押すとパネルが表示されるようにしたときに使う)
panel placement mode: 自動配置モードの際、水平に自動配置するか、垂直に自動は位置するか。

文字だけ見てもわかりづらいと思うので実際にやってみましょう。
画像の通りに設定します。
foo_panel_stack_splitter06.png
左・上 0%, 横幅 50%, 縦幅 100% つまり、Panel Stack Splitterの左半分に配置。

foo_panel_stack_splitter07.png
上 0%, 左・横幅 50%, 縦幅 100% もうおわかりだろうか。

強制配置モードで、パーセンテージの指定をしました。
left,top,width,heightをよく見て、どうしてこのように設定するとレイアウトがきちんとできるのか考えてみてください。
やってみて、これはわざわざ強制配置モードにしなくても自動配置モードのままでよかったのではないかと気づくと思います。
しかし、まずは簡単なところでやってみてもらいたかったので、わざわざ強制配置モードでやりました。

それから「enable padding settings」にチェックを入れましたが、これは設定中にパネルの周りにスペースがなくなるとPanel Stack Splitter上で設定画面にいけなくなるからです。
(パネルで埋まってしまって右クリックしても設定画面にいけない)
なので、設定がすんだら「enable padding settings」のチェックははずしてしまいましょう。
後からまた設定したくなったら、File>Preferences>Display>Columns UI>Layoutから設定できます。

次に、最初のほうにあった色分けされた画像の緑色の部分を設定したいと思います。設定画面を出してください。
ChronflowとGraphical Browserは上に固定、WSH Panelは下に固定して配置したいと思います。
foo_panel_stack_splitter08.png
横幅=%ps_width% つまりPanel Stack Splitterの横幅=Chronflowの横幅。

foo_panel_stack_splitter09.png
foo_panel_stack_splitter10.png
途切れている部分は

$sub(%ps_height%,210)

Panel Stack Splitterの縦幅-210 ヒント: ほかのパネルの縦幅と「Chronflow上部の余白」の合計は？

foo_panel_stack_splitter11.png
途切れている部分は

$sub(%ps_height%,20)

WSH PanelのtopがPanel Stack Splitterの縦幅-20

先とは違いパーセンテージによる指定ではなく、ピクセル単位の指定です。
left,top,width,heightをよく見て、どうしてこのように設定するとレイアウトがきちんとできるのか考えてみてください。
%ps_width%,%ps_height%がポイントです。
width,height関連の変数はTitle Formattingのページを読んでいればわかるかと思うので解説は割愛します。

現段階でこのような感じになるかと思います。
foo_panel_stack_splitter12.png
(各コンポーネントの色などの設定は各自適当にやってください)
クリーム色っぽい部分の色はRGB表示で255-255-192です。

次に、最初のほうにあった色分けされた画像の青い部分を設定したいと思います。設定画面を出してください。
画像のように設定します。
foo_panel_stack_splitter13.png
foo_panel_stack_splitter14.png
途切れている部分は

$sub(%ps_height%,205)


foo_panel_stack_splitter15.png
途切れている部分は

$sub(%ps_height%,55)


foo_panel_stack_splitter16.png
途切れている部分は

$sub(%ps_height%,20)


パネルの配置にも慣れてきたでしょうか？ 現段階でこのような感じになるかと思います。
foo_panel_stack_splitter17.png

↑

実際に作ってみるSTEP3 ～配置の小技～ †

さらに、最初のほうにあった色分けされた画像の青い部分のPanel Stack Splitterの中のPanel Stack Splitter(子パネルにPlaylists Dropdownがある部分)の設定をします。
foo_panel_stack_splitter18.png
途切れている部分は

$add(%ps_width%,18)
$add(%ps_height%,3)

です。
ここは何をしているのかというと、Playlists Dropdownには、ビジュアルスタイル(Windowsのテーマ)に依存する部分があるのでその部分を隠しています。
このテクニックはほかの場面でも使えます。
例えば、Filterの上部もビジュアルスタイルに依存しますので、隠してみたい方はチャレンジしてみましょう。

↑

実際に作ってみるSTEP4 ～ボタンを作る～ †

プレイリスト上で作業をしたいとき、ChronflowとGraphical Browserがあると邪魔かもしれません。
ということで、ボタンで表示・非表示できるようにしてみましょう。
Panel Stack Splitterの設定画面をだします。(先の画像の緑色の部分)
ScriptタブのPerTrack?を選択します。こちらでコーディングします。

ボタンを作る前に、背景を塗りつぶします。

$fillrect(0,0,%ps_width%,%ps_height%,255-255-192,)

ボタンを作ります。

$textbutton(0,0,64,16,'切り替え','切り替え',PANELSHOW:Chronflow:-1;PANELSHOW:Graphical Browser:-1;REFRESH:,,)
$if($isvisible_c(Chronflow)
,$movepanel_c(Playlist,0,190,%ps_width%,$sub(%ps_height%,210))
,$movepanel_c(Playlist,0,20,%ps_width%,$sub(%ps_height%,50))
)

$textbuttonで、ChronflowとGraphical Browserの表示・非表示を行っています。
if文で、Chronflowが表示中か否かを判定し、パネルの移動をしています。
(ChronflowとGraphical Browserを非表示にした時、ChronflowとGraphical Browserがあった場所まで、~NGPlaylistをもってくる)

これを応用すればパネルの切り替えなんかもできると思います。狭いウィンドウを有効活用できるように、ボタン関数をマスターしてみてください。

ついでに、ほかのボタンも作ってみましょう。

$textbutton(65,0,64,16,'再起動','再起動',COMMAND:File/Restart,,)
$textbutton(129,0,64,16,'プロパティ','プロパティ',CONTEXT:Properties,,)

これで、foobarの再起動・再生中の曲のプロパティを表示ができるようになります。