#author("2016-04-05T00:58:03+09:00","","")
#author("2016-04-05T00:59:31+09:00","","")
[[非 mod 版>User interface#z88526c8]] の解説は[[Track Info Panel 解説]]です
----

#contents

*これ何? [#rd9bdc39]
再生している音楽ファイルの詳細な情報を表示するパネル、 [[Track info Panel>User interface#z88526c8]] の改造版。
従来の機能に加えて、フォントの変更、画像表示、ボタンの設置などができる。

*導入方法 [#y188c394]

-Columns UI および [[.NET C++ ランタイム:http://www.microsoft.com/downloads/details.aspx?displaylang=ja&FamilyID=32bc1bee-a3f9-4c13-9c99-220b62a191ee]] が必要です(参考:[[Columns UI 解説]])。
-非 mod 版とは共用しないほうが無難

+Preferences - Display - Columns UI から、右側の Layout タブを選択
+Track Info Panel mod を挿入したいスプリッタを右クリックし、Insert Panel - Panels - Track Info mod を選択

*設定画面 [#pfd6d378]

パネル上を右クリックして "Settings" をクリックすると設定画面が表示される
-''Font'' (フォント) : デフォルトでのフォント
-''Colours'' (色)
--''Default text'' : デフォルトでのテキストの色
--''Background'' : デフォルトでの背景の色
-''Display options'' (ディスプレイに関する設定)
--''Minimum height'' : 高さの最小値。高さがこの値以下にならなくなる
--''Edge Style'' : パネルの周辺のスタイル。好みに合わせて設定する
-''Formating string'' : ここに構文を書き込む
-''Edit'' : メモ帳などで構文を開く
-''Color code'' : [[Title formatting>Title Formatting 解説#y5449c9e]]の "Color" の項を参照

*Now Playing と Follow cursor [#j5fb66e9]

パネル上を右クリックして "Mode" から選択
-''Now Playing''
--再生中の音楽トラックの情報を表示
-''Follow cursor''
--プレイリスト上で選択した音楽トラックの情報を表示

*書式 [#sc64eefc]

Track info mod では行頭にある半角スペースは無視されます。
-例
 $if(%isplaying%,
 	Playing
 ,
 	Not Playing
 )

行頭にある半角スペースを文字として表示したい場合は、クォーテーションマークで囲みます。
-例
 test$char(10)
      test$char(10)
 '     'test$char(10)

*コメント行について [#s67369d5]

本来、Titleformatting では ''//…'' と行頭に書くとコメント扱いになりますが、 Track info mod においては以下の四つで構文を更新する条件を変更することができます。
 // Global
global values を書く (例: $puts() など)
 // Background
背景を書く (例: 後述する $imageabs() など)
 // PerTrack
トラックごとに切り替わるものを書く (例: %title% など)
後述する $button() もここに書く
 // PerSecond
毎秒アップデートするものを書く (例: %playback_time% など)

-例
 // Global
 $if($meta_test(album artist),$puts(album_is_va,1))
 $puts(fontStyle,$font(Calibri,10,bold,0-255-128))
 ...
 // Background
 $imageabs(,,images\bground.png,)
 ...
 // PerTrack
 $button(0,0,0,0,0,0,'images\play.png,images\play_hover.png','Play or Pause',)
 ...
 // PerSecond
 %playback_time%
 ...

*関数 [#k6e4a623]

-以下で使われる「始点」は左上の角を基準にしています。((座標系はそこを原点として右方向にx、下方向にy。位置を指定する引数には負の値が使える。))
-' n 'には非負整数を入れてください。
-[]でデフォルトの値を表すことにします。デフォルトの値でいい場合は記述を省略することが可能です。

**文字の配置 [#x81fe002]

***$align() [#b780f238]

 $align(H,V)
-H: left / center / right [left]
-V: top / middle / bottom [top]

文字の配置を指定する関数です。曲名を左のまん中に表示させたい場合は
 $align(left,middle)%title%
のようにします。

***$alignabs() [#n3f36012]

 $alignabs(X,Y,w,h,H,V)
-X: 横方向の始点 (長方形領域の左上隅のx座標) [0]
-Y: 縦方向の始点 (長方形領域の左上隅のy座標) [0]
-w: 横幅 [0]
-h: 高さ [0]
-H: left / center / right [left]
-V: top / middle / bottom [top]

[[$align()>#b780f238]]を高級にしたものです。
まず文字を表示可能な長方形領域を作成し、その中で文字の表示位置を指定します。
ペイントで長方形を選択するのと似たような感覚です。複雑な表示を行いたい場合は長方形達が重ならないよう気をつけましょう。

#imgr(./snaps/up312.png);

***$alignset() & $alignrel() [#l99e8ced]

 $alignset()
これを使う直前までの文字表示位置の中で最も下にあるもののy座標((厳密にはその次の行左上隅のy座標))を$alignrel()で文字を表示する領域の縦方向の始点Yにします。

 $alignrel(H,V)
-H: left / center / right [left]
-V: top / middle / bottom [top]

$alignset()で定めた始点(0,Y)から[[%_width%>#j31e68d5]]×([[%_height%>#j31e68d5]]-Y)の長方形領域を作成し、その中で文字の表示位置を指定します。

例えば
 $align(right,middle)$font(,,bold,)'$align(right,middle)'
 $alignabs(75,10,250,125,right,top)$font(,,italic,)'$alignabs(75,10,250,125,right,top)'
 $alignset()
 $alignrel(left,middle)$font(,,,)'$alignrel(left,middle)'
という書式だと下図のようになります。

#imgr(./snaps/up313.png);

**フォント [#z994a153]

***$font() [#h6bd0f79]

 $font(NAME,SIZE,OPTIONS,COLOR)
-NAME: フォント名
-SIZE: フォントのサイズ
-OPTIONS: 
--bold: 太字
--italic: 斜体
--underline: 下線
--strikeout: 取消線
--nocleartype: クリアタイプ無効
--glow-R-G-B: 影をつける
--glowexpand-n: ぼかしを広げる [2]
--glowalpha-n: ぼかしの透過度 [2]
--glowblur-n: ぼかす
--uppercase: すべて大文字に
--lowercase: すべて小文字に
--textalpha-n: 文字の透過度
--textblur-n: 文字をぼかす
--textexpand-n: 文字を広げる
--fixedwidth-n: 文字幅を固定する
--shadow: 影をつける
-Color: R-G-BかSYSCOL-n((msstyleの色をとってくる))
--SYSCOLの値
||LEFT:||LEFT:||LEFT:|c
|0|3D オブジェクト|11|非アクティブ ウィンドウの境界|22|ButtonLight|
|1|デスクトップ|12|アプリケーション作業域|23|InfoText|
|2|アクティブ タイトル バー 色1|13|選択項目|24|InfoWindow|
|3|非アクティブ タイトル バー 色1|14|選択項目のフォント|25|ButtonAlternateFace|
|4|メニュー|15|ButtonFace|26|HotTrackingColor|
|5|ウィンドウ|16|ButtonShadow|27|アクティブ タイトル バー 色2|
|6|WindowFrame|17|GrayText|28|非アクティブ タイトル バー 色2|
|7|メニューのフォント|18|3D オブジェクトのフォント|29|MenuHilight|
|8|ウィンドウのフォント|19|非アクティブ タイトル バーのフォント|30|MenuBar|
|9|アクティブ タイトル バーのフォント|20|ButtonHilight|||
|10|アクティブ ウィンドウの境界|21|ButtonDkShadow|||

OPTIONSをいくつか組み合わせて使用することもできます。一回使用すると次にまた使用するまでフォントは維持されます。
頭のほうに$puts(font1,$font(arial,9,,0-0-0))のようにしておくと後々楽かもしれません。

[[Hydrogenaudio Wiki:http://wiki.hydrogenaudio.org/index.php?title=Foobar2000:0.9_Single_Column_Playlist_(foo_uie_single_column_playlist)#Font_style]]のページにわかりやすい画像があります。

**画像 [#v2e2e73a]

***$imageabs() [#xed87898]

 $imageabs(X,Y,image,options)
-X: 画像を表示させる領域の横方向の始点 (画像左上隅のx座標) [0]
-Y: 画像を表示させる領域の縦方向の始点 (画像左上隅のy座標) [0]
-image: 画像の場所(相対パス)
-options:
--flow: 最前面に表示する
--alpha-n: 画像の透過度(0-255)
--rotateflip-n: 画像の上下左右の入れ替え、回転
---rotateflipの値:
||左右|上下|両方|none|
|90°|5|7|3|1|
|180°|6|4|0|2|
|270°|7|5|1|3|
|none|4|6|2|0|
~回転は時計回りです。

任意の位置(X,Y)に画像を表示させます。画像の場所はfoobar2000のプロフィールフォルダ((User Profile Supportが有効になっていればC:\Documents and Settings\ユーザー名\Application Data\foobar2000\, それ以外はfoobar2000本体のあるディレクトリ))からの相対パスです。絶対パスを使う場合は後述の[[$imageabs2()>#o8aa93f9]]を使いましょう。

以下にいくつか例を挙げます。
-画像Aの上に画像Bをかぶせる
 $imageabs(0,0,covers\%album%.png,)$imageabs(0,0,images\overlay.png,)
-再生中は画像Aを、そうでないときは画像Bを表示する
 $if(%_isplaying%,$imageabs(0,0,images\a.jpg,),$imageabs(0,0,images\b.jpg,))
-alpha-nオプションを使って文字を透かしてみる
 $alignabs(10,10,150,150,center,middle)$font(arial,14,bold,0-0-0)foobar2000
 $imageabs(10,10,images\abc_150×150.jpg,alpha-150)

***$imageabs2() [#o8aa93f9]

 $imageabs2(resizeW,resizeH,srcX,srcY,srcW,srcH,dstX,dstY,image,options)
-resizeW: 画像の横方向のリサイズ
-resizeH: 画像の縦方向のリサイズ
-srcX: リサイズした画像を切り取る((クロップする))横方向の始点(画像上のx座標)[0]
-srcY: リサイズした画像を切り取る縦方向の始点(画像上のy座標)[0]
-srcW: 切り取る横幅 [%_width%]
-srcH: 切り取る高さ [%_height%]
-dstX: 切り取った画像を表示させる領域の横方向の始点 (画像左上隅のx座標)[0]
-dstY: 切り取った画像を表示させる領域の縦方向の始点 (画像左上隅のy座標)[0]
-image: 画像の場所(相対or絶対)
-options:
--flow: 最前面に表示する
--alpha-n: 画像の透過度(0-255)
--nokeepaspect: リサイズ時アスペクト比を維持しません
--valign-t: 画像の上寄せ((アスペクト比を維持したリサイズで効果を発揮します))
--valign-b: 画像の下寄せ
--halign-l: 画像の左寄せ
--halign-r: 画像の右寄せ
--rotateflip-n: 画像の上下左右の入れ替え、回転
---rotateflipの値:
||左右|上下|両方|none|
|90°|5|7|3|1|
|180°|6|4|0|2|
|270°|7|5|1|3|
|none|4|6|2|0|
回転は時計回りです。共にリサイズ前の画像に適用されます。

[[$imageabs()>#xed87898]]を高級にしたものです。
画像をresizeW×resizeHにリサイズし、その中の長方形領域(srcX,srcY,srcW,srcH)を(dstX,dstY)に表示します。
拡大させたい場合はnokeepaspectをつけます。なお、アスペクト比を維持して拡大することはできません。
大雑把に言えば引数の上6つは画像の編集、下4つは[[$imageabs()>#xed87898]]の機能です。

以下にいくつか例を挙げます。
-画像をx×yにリサイズし、(10,20)に表示する
 $imageabs2(x,y,0,0,x,y,10,20,C:\program files\foobar2000\images\abc.jpg,)
-500×500の画像を300×300にリサイズし、そのリサイズした画像の右上75×75を(5,5)に表示する
 $imageabs2(300,300,225,0,75,75,5,5,D:\images\abc_500×500.jpg,)
-150×150の画像を300×300にリサイズし、そのリサイズした画像の右上75×75を90°回転させ、(0,0)に表示する
 $imageabs2(300,300,225,225,75,75,0,0,images\def_150×150.jpg,rotateflip-1 nokeepaspect)

**長方形を描く [#i7d8f66d]

***$drawrect() [#n50e44d7]

 $drawrect(X,Y,W,H,brushColor-R-G-B penColor-R-G-B OPTIONS)
-X: 横方向の始点 (長方形の左上隅のx座標) [0]
-Y: 縦方向の始点 (長方形の左上隅のy座標) [0]
-W: 横幅 [%_width%]
-H: 高さ [%_height%]
-brushColor-R-G-B: 長方形の色 [-0-0-0]
-penColor-R-G-B: 境界の色 [-0-0-0]
-OPTIONS:
--ALPHA-n: 透過度 (0-255)
--EXPAND-n: 指定した数値分長方形を拡張する
--BLUR-n: ぼかす
--WIDTH-n: 境界の太さ [1]

長方形を描きます。偶奇で背景色を分ける場合などに使いましょう。
色をSYSCOL-nで指定する事も可能です。brushColor-nullで枠だけ、penColor-nullで枠無しの長方形を描くことができます。

以下に例を挙げます。
-20×20の黒枠を作る
 $drawrect(10,10,20,20,brushcolor-null pencolor-0-0-0)

**ボタン - $button() & $button2() [#lf6a01df]

 $button(DstX,DstY,X,Y,W,H,IMAGE,HOVER IMAGE,COMMAND,OPTIONS)
ボタンを画像で表示します。
-DstX: 画像を表示する横方向の始点 [0]
-DstY: 画像を表示する縦方向の始点 [0]
-X: ボタンが起動する有効範囲のDstXからの横方向の始点 [0]
-Y: ボタンが起動する有効範囲のDstYからの縦方向の始点 [0]
-W: ボタンが起動する有効範囲の横幅 [値を指定しないとフリーズ?]
-H: ボタンが起動する有効範囲の高さ [値を指定しないとフリーズ?]
-IMAGE: 画像を相対パスか絶対パスで指定
-HOVER IMAGE: マウスを載せたときの画像を相対パスか絶対パスで指定
-COMMAND: コマンドを指定 (下記参照)
-OPTIONS: なし

 $button2(DstX,DstY,X,Y,W,H,TEXT,HOVER TEXT,COMMAND,OPTIONS)
ボタンをテキストまたは画像で表示します。
-DstX: テキストを表示する横方向の始点 [0]
-DstY: テキストを表示する縦方向の始点 [0]
-X: ボタンが起動する有効範囲のDstXからの横方向の始点 [0]
-Y: ボタンが起動する有効範囲のDstYからの縦方向の始点 [0]
-W: ボタンが起動する有効範囲の横幅 [値を指定しないとフリーズ?]
-H: ボタンが起動する有効範囲の高さ [値を指定しないとフリーズ?]
-TEXT: 表示するテキスト
-HOVER TEXT: マウスを載せたときのテキスト
-COMMAND: コマンドを指定 (下記参照)
-OPTIONS: なし

ボタンを表示します。以下に注意点をあげます。
-画像、テキストに対して W と H の値があまりに小さいとボタンが表示されないことがある
-画像の表示に相対パスを使う場合、最初に半角スラッシュを付ける
 $button(0,0,0,0,25,25,/images\pause.png,images\pause_hover.png,pause,)
-画像のパスに "#" の文字を使うのは避けたほうがよい
-IMAGE,HOVER IMAGE,TEXT,HOVER TEXT,COMMAND の部分はシングルクォーテーションマークで囲んだほうがよい(特に、$,%,[,] などの文字を含んでいるとき)
 $button2(0,0,0,0,30,13,'$font(tahoma,8,,0-0-0)Forward','$font(tahoma,8,underline,0-0-0)Forward','Seek ahead by 10 seconds',)

***COMMAND について [#h3ac1509]

コマンドから以下のことが実行できます。
+メインメニュー、コンテキストメニューなどのコマンドを実行
--メインメニューやコンテキストメニューのコマンドを実行できます。
例えば、メインメニューの Playback/Order/Default を実行したい場合は、COMMMAND に
 Default
と、コンテキストメニューの [[Properties>Properties 解説]] を実行したい場合は
 Properties
と書きます。
--[[その他のコマンドの一覧>コマンド一覧]]
+プレイリスト、Columns UI の Layout の "Presets" などの切り替え
--それぞれの切り替えたいものの名前を打ち込みます。
例えば、Columns UI の Layout の Preset を "temporary" という名前のものに切り替えたいときは、 COMMMAND を
 temporary
と、"My Best" という名前のプレイリストをアクティブにしたい場合は
 'My Best'
とします。
ここで名前がが他のものと被っていると思うように動作しないことがあります。
例えば、"Default" という名前のプレイリストに切り替えたい場合、COMMANDに
 Default
と書くと、Playback/Order/Default が実行されてしまいます。
この問題を解決するには、プレイリストの名前を変更する必要があります。
+コンテキストメニューから、Media Library にある曲を絞り込み検索
 FILTER:name|value:name2|value2…
という形で記入します。
--''name''
---この部分には好きな名前を記入してください。
--''value''
---この部分に選別方法を [[TitleFormatting]] で記述します。
--''!source!'' と書くことでプレイリストから絞込むことができます。
---''例''
 ''FILTER:source|!source!:decade|$mul($div(%date%,10),10):artist|%artist%:album|%album%:'
+コンテキストメニューから、プレイリスト上の曲をソート
 FILTER:name|value:name2|value2…
という形で記入します。
--''name''
---この部分には好きな名前を記入してください。
--''value''
---この部分に選別方法を [[TitleFormatting]] で記述します。
--''RESET'' , ''$sorted()'' などについては編集希望
---''例''
 'SORT:genre|%genre%:artist|%artist%:album|%album%'
+タグの value の編集
 TAG:type:tag:value
という形で記入します。
--''type''
---この部分に ''SET'' と書き込むことでタグを上書き、''ADD'' でタグを追加、''REMOVE'' でタグを削除することが出来ます。
--''tag''
---この部分にタグ名を記入します。
--''value''
---タグ付けする値を記入します。
--''例''
 TAG:SET:rating:1
%rating% の値が1になります。
+PVAR…
--編集希望

***ボタンの設定例 [#bae9139b]

-文字で再生、一時停止などをする (Mode は Now Playing にしてください)
 $button2(5,2,0,2,30,21,'$alignrel(center,middle)$font(MS ゴシック,10,,)Stop','$alignrel(center,middle)$font(MS ゴシック,10,underline,)Stop',Stop,)
 
 $if($and(%_isplaying%,$not(%_ispaused%)),
 $button2(44,2,0,2,36,21,'$alignrel(center,middle)$font(MS ゴシック,10,,)Pause','$alignrel(center,middle)$font(MS ゴシック,10,underline,)Pause',Pause,)
 ,
 $button2(44,2,0,2,36,21,'$alignrel(center,middle)$font(MS ゴシック,10,,)Play','$alignrel(center,middle)$font(MS ゴシック,10,underline,)Play',Play,)
 )
 
 $button2(95,2,0,2,30,21,'$alignrel(center,middle)$font(MS ゴシック,10,,)Prev','$alignrel(center,middle)$font(MS ゴシック,10,underline,)Prev',Previous,)
 
 $button2(135,2,0,2,30,21,'$alignrel(center,middle)$font(MS ゴシック,10,,)Next','$alignrel(center,middle)$font(MS ゴシック,10,underline,)Next',Next,)
-画像で再生、一時停止などをする (Mode は Now Playing にしてください)
--http://foobar2000.xrea.jp/up/files/up534.zip
-%rating% の値を1増やす
 $button2(5,2,0,0,50,21,'$alignrel(center,middle)$font(MS ゴシック,10,,)Rate ++','$alignrel(center,middle)$font(MS ゴシック,10,underline,)Rate ++','TAG:SET:rating:'$if(%rating%,$add(%rating%,1),1),)

**寸法 [#j2690196]

***$calcwidth() [#k94181b5]

 $calcwidth(text)
textはなんでもかまいません。textの横幅を返します。$if()などと共に使いましょう。
-フォントサイズ15で%title%の横幅が%_width%を超えてしまうときはフォントサイズを9にする
 $ifgreater($calcwidth($font(,15,,)%title%),%_width%,$font(,9,,),$font(,15,,))%title%

***$calcheight() [#z7b99f18]

 $calcheight(text)
textはなんでもかまいません。textの高さを返します。$if()などと共に使いましょう。

**$pad() [#r960218d]

 $pad(x,y)
左右をx、上下をyだけ詰めます。[[$align()>#b780f238]], [[$alignrel()>#l99e8ced]], [[$drawrect()>#n50e44d7]]に影響します。
例えば
 $pad(a,b)
 $align(left,top)
は
 $alignabs(a,b,$sub(%_width%,2*a),$sub(%_height%,2*b),left,top)
と同値です。

**$fileexists() [#reb31330]

 $fileexists(File path)
ファイルが存在すれば1を返し、存在しなければ何も返しません。
画像Aがあるときはそれを、ない時は画像Bを表示させるには
 $if($fileexists(images\aaa.jpg),$imageabs(0,0,images\aaa.jpg,),$imageabs(0,0,images\bbb.jpg,))
のようにします。

**$textcolor() [#o7e77a94]

 $textcolor(n-n-n)
文字色を指定します。$rgb()や$hsl()と違い、SYSCOL-nを使用することができます。

**## [#p8cfe0a8]

 #lineheight,n#
文字列の高さを指定します。[[$align()>#b780f238]]などで表示位置を指定している場合はその後で使います。効果が今ひとつピンとこない場合は適当に広い場所で$crlf()や$char(10)を使い改行させてみましょう。
 #shade#
文字列の背景色を濃くします。上と同様に[[$align()>#b780f238]]の後で使います。

*Tips [#mb1b32f2]

-パネルのレイアウトを変更すると設定が消えてしまうので、 Formatting string のバックアップをとっておくこと
//-縦方向のスクロールは、パネルの上でマウスホイールを回転させる
//↑Mod版はスクロール不可
-音楽ファイルをパネルにドラッグすると、そのファイルの情報が表示される
-非Mod版と異なり、マウスホイールを用いても縦方向のスクロールすることができない

*リンク集 [#k4e74907]

-英語版wiki
--http://wiki.hydrogenaudio.org/index.php?title=Foobar2000:0.9_Track_Info_Panel_Mod_(foo_uie_trackinfo_mod)
-急ごしらえなぺーじ
--http://www5.pf-x.net/~motorhead/trackinfomod01.html

IP:180.29.92.183 TIME:"2016-04-05 (火) 00:59:31" REFERER:"http://foobar2000.xrea.jp/index.php?cmd=edit&page=Track%20info%20mod%20%E8%A7%A3%E8%AA%AC" USER_AGENT:"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; Win64; x64; Trident/6.0)"