foobar2000のカスタマイズ 2

長らく使っていたfoobar2000のデザインを大幅に変更した。

今回のデザインはかなりフラットなもので、アクセントカラーを変えるだけでも雰囲気がガラッと変わるので、色々と遊べて結構長持ちしそう。また、構成がシンプルになったので、後から入れたい機能が出てきても簡単に組み込める。再生などの操作は基本的にホットキーで行うので、リピートやシャッフルなどを変更するもののみ。

他にもfoobar2000の画面サイズがでかくなったりプレイリストをジャンル別に管理するようになったりと色々変わったが、一番大きい変更点はGraphical Browserを導入したこと。

以前からGraphical Browserは使ってみたかったが、実際に組み込んでみるとどうしてもCDジャケットの主張が強くなりすぎてしまい、全体のバランスが悪くなるので敬遠していた。なので今回のデザイン刷新ではGraphical Browserを中心に構築し、パネルで切り替えてそのときの気分によって使い分けられるようにした。

詳しい設定は以下の通り。

コンポーネント

• Channel Spectrum panel
• Columns UI
• cwbowron's hooks
• ELPlaylist
• foo_func
• Graphical Browser
• Panel Stack Splitter
• Playlists Dropdown
• Track info panel mod

画像ファイル

• overlay_reflect.png
  CDジャケットにかかる光沢の画像
• no_image.jpg
  表示するCDジャケットがない場合に表示される画像

レイアウト

 

設定

• Panel Stack Splitter
  • Track info mod 1
  • Channel spectrum panel
  • Track info mod 2
  • Playlists Dropdown
  • ELPlaylist
  • Graphical Browser 1
  • Graphical Browser 2

 

• Panel Stack Splitter
  Playlistパネルのヘッダ、下部のボタンの表示。
  • PanelList
    
  • Script
    PerTrack

    // Header
    $drawrect(250,10,462,50,192-192-192,)
    $drawtext(%album%,260,20,442,13,255-255-255,)
    $drawtext(%artist%,260,35,442,13,255-255-255,)
    $drawtext($meta(genre),260,35,442,13,255-255-255,right)
    
    $drawrect(722,10,248,50,192-192-192,)
    $drawtext(%cwb_activelist%,732,20,228,13,255-255-255,)
    $drawtext($playlist_group(group,'%album%',0) groups $cwb_splitnum(%cwb_activelist_count%,',') tracks,732,35,228,13,255-255-255,)
    
    
    // Button
    $font(,7,)
    $ifequal($replace(%cwb_playback_order%,'Repeat (playlist)',1),1,
    $textbutton(10,620,60,20,'Default','Default',COMMAND:'Playback/Order/Repeat (playlist)';REFRESH,fontcolor:255-255-255 brushcolor:81-134-165,fontcolor:255-255-255 brushcolor:81-134-165),
    $textbutton(10,620,60,20,'Default','Default',COMMAND:'Playback/Order/Repeat (playlist)';REFRESH,fontcolor:96-96-96 brushcolor:240-240-240,fontcolor:81-134-165 brushcolor:224-224-224)
    )
    $ifequal($replace(%cwb_playback_order%,'Repeat (track)',2),2,
    $textbutton(70,620,60,20,'Repeat','Repeat',COMMAND:'Playback/Order/Repeat (track)';REFRESH,fontcolor:255-255-255 brushcolor:81-134-165,fontcolor:255-255-255 brushcolor:81-134-165),
    $textbutton(70,620,60,20,'Repeat','Repeat',COMMAND:'Playback/Order/Repeat (track)';REFRESH,fontcolor:96-96-96 brushcolor:255-255-255,fontcolor:81-134-165 brushcolor:224-224-224)
    )
    $ifequal($replace(%cwb_playback_order%,'Shuffle (albums)',3),3,
    $textbutton(130,620,60,20,'Shuffle','Shuffle',COMMAND:'Playback/Order/Shuffle (albums)';REFRESH,fontcolor:255-255-255 brushcolor:81-134-165,fontcolor:255-255-255 brushcolor:81-134-165),
    $textbutton(130,620,60,20,'Shuffle','Shuffle',COMMAND:'Playback/Order/Shuffle (albums)';REFRESH,fontcolor:96-96-96 brushcolor:240-240-240,fontcolor:81-134-165 brushcolor:224-224-224)
    )
    
    
    $if($isvisible_c(Graphical Browser 1),
    $textbutton(250,620,60,20,'Playlist','Playlist',PANELSHOW:ELPlaylist:1;PANELSHOW:Graphical Browser 1:1;PANELSHOW:Graphical Browser 2:0;REFRESH,fontcolor:255-255-255 brushcolor:81-134-165,fontcolor:255-255-255 brushcolor:81-134-165),
    $textbutton(250,620,60,20,'Playlist','Playlist',PANELSHOW:ELPlaylist:1;PANELSHOW:Graphical Browser 1:1;PANELSHOW:Graphical Browser 2:0;REFRESH,fontcolor:96-96-96 brushcolor:240-240-240,fontcolor:81-134-165 brushcolor:224-224-224)
    )
    $if($isvisible_c(Graphical Browser 2),
    $textbutton(310,620,60,20,'Browser','Browser',PANELSHOW:ELPlaylist:0;PANELSHOW:Graphical Browser 1:0;PANELSHOW:Graphical Browser 2:1;REFRESH,fontcolor:255-255-255 brushcolor:81-134-165,fontcolor:255-255-255 brushcolor:81-134-165),
    $textbutton(310,620,60,20,'Browser','Browser',PANELSHOW:ELPlaylist:0;PANELSHOW:Graphical Browser 1:0;PANELSHOW:Graphical Browser 2:1;REFRESH,fontcolor:96-96-96 brushcolor:255-255-255,fontcolor:81-134-165 brushcolor:224-224-224)
    )
    $textbutton(370,620,60,20,'Config','Config',COMMAND:'File/Preferences',fontcolor:96-96-96 brushcolor:240-240-240,fontcolor:81-134-165 brushcolor:224-224-224)

    
    Titleformat mode on startup : follow cursor
  • Behaviour
    Custom backgroud colour : 255-255-255
    Default font : Arial 8pt

 

• Track info mod 1
  再生中の曲情報・CDジャケットの表示。
  • Font
    Arial 8pt
  • Colours
    Default text : 64-64-64
    Background : 255-255-255
  • Formatting string
    

    // Global
    $puts(PROGRESSBAR_WIDTH,$muldiv(%playback_time_seconds%,116,%length_seconds%))
    
    $ifequal($get(PROGRESSBAR_WIDTH),0,
    $puts(PROGRESSBAR_BLANK_FLAG,1),
    $puts(PROGRESSBAR_BLANK_FLAG,0)
    )
    
    
    //Background
    $button(,,0,0,%_width%,%_height%,,,Activate now playing,)
    
    $if($or(%ispaused%,%isplaying%),
    $drawrect(55,360,120,10,brushcolor-null pencolor-212-212-212)
    )
    
    
    // PerTrack
    $imageabs2(180,180,,,180,180,25,70,
    $if($fileexists($replace(%path%,%filename_ext%,)%album%.jpg),
    $replace(%path%,%filename_ext%,)%album%.jpg,
    C:\Program Files\foobar2000\images\no_image.jpg),
    valign-b)
    
    $imageabs2(180,180,,,180,180,25,70,C:\Program Files\foobar2000\images\overlay_reflect.png,valign-b)
    
    $imageabs2(180,180,,,180,180,25,250,
    $if($fileexists($replace(%path%,%filename_ext%,)%album%.jpg),
    $replace(%path%,%filename_ext%,)%album%.jpg,
    C:\Program Files\foobar2000\images\no_image.jpg),
    rotateflip-6 valign-t)
    
    $imageabs2(180,180,,,180,180,25,250,C:\Program Files\foobar2000\images\overlay.png,valign-t)
    
    $alignabs(5,280,220,20,center,middle)[%Title%]
    $font(,,,)
    $alignabs(5,300,220,20,center,middle)[%artist%]
    $alignabs(5,320,220,20,center,middle)[%album%]
    
    
    // PerSecond
    $ifequal($get(PROGRESSBAR_BLANK_FLAG),1,,
    $drawrect(57,362,$get(PROGRESSBAR_WIDTH),6,brushcolor-81-134-165 pencolor-null)
    )
    
    $font(,7,,96-96-96)
    $alignabs(,376,230,20,center,)[[%playback_time% / ]%length%]

    
    

• Channel spectrum panel
  
  Foreground : 160-160-160
  Background : 255-255-255

 

• Track info mod 2
  音量・ミュートボタンの表示。
  • Font
    Arial 7pt
  • Colours
    Default text : 96-96-96
    Background : 240-240-240
  • Formatting string
    

    // PerTrack
    $if($and($not(%ispaused%),$not(%isplaying%)),
    $alignabs(,,%_width%,%_height%,center,middle)Volume,
    $ifequal(%cwb_volume%,-100.00,
    $button2(,,0,0,%_width%,%_height%,
    '$drawrect(,,%_width%,%_height%,brushcolor-81-134-165 pencolor-null)$alignabs(,,%_width%,%_height%,center,middle)$font(,,,255-255-255)Mute',
    '$drawrect(,,%_width%,%_height%,brushcolor-81-134-165 pencolor-null)$alignabs(,,%_width%,%_height%,center,middle)$font(,,,255-255-255)Mute',
    'Volume mute',),
    $button2(,,0,0,%_width%,%_height%,
    '$drawrect(,,%_width%,%_height%,brushcolor-240-240-240 pencolor-null)$alignabs(,,%_width%,%_height%,center,middle)$font(,,,96-96-96)[%cwb_volume% dB]',
    '$drawrect(,,%_width%,%_height%,brushcolor-224-224-224 pencolor-null)$alignabs(,,%_width%,%_height%,center,middle)$font(,,,81-134-165)[%cwb_volume% dB]',
    'Volume mute',)
    ))

 

• Playlists Dropdown
  • Display
    Display

    %title%

    
    Style

    $if($and(%_list%,$not(%_themed%)),
    // Dim even rows
    
    $ifequal($mod(%list_index%,2),0,$set_style(back,$blend($color(back),$blend_target($color(back)),3,64),$color(selected_back)),)
    // Highlight active playlist
    $if(%isactive%,$set_style(text,$blend($color(text),$color(selected_back),1,2),$color(selected_text)))
    )

    
    Padding : top・bottom 1px, right 10px, left 7px
  • Colours
    Item : Foreground 64-64-64, Background 255-255-255
    Selected item : Foreground 255-255-255, Background 81-134-165
    Inactive selected item : Foreground 255-255-255, Background 81-134-165
  • Fonts 
    Arial 8pt

 

• ELPlaylist
  選択しているアルバムの曲だけ一覧表示。
  
  • Script
    Track list

    // Even background
    $ifequal($mod(%el_item_index2%,2),1,
    $fillrect(,,,,%EVEN.BG%,),
    )
    
    // Now playing
    $if(%el_isplaying%,
    $fillrect(,,,,%PLAYING.BG%,)
    $drawstring(%tracknumber%,10,,%el_width%,%el_height%,%PLAYING%,vcenter nowrap elipchar)
    $drawstring(%title%,30,,$sub(%el_width%,90),%el_height%,%PLAYING%,vcenter nowrap elipchar),
    
    // Focus
    $if(%el_focused%,
    $fillrect(,,,,%FOCUS.BG%,)
    $drawstring(%tracknumber%,10,,%el_width%,%el_height%,%FOCUS%,vcenter nowrap elipchar,)
    $drawstring(%title%,30,,$sub(%el_width%,70),%el_height%,%FOCUS%,vcenter nowrap elipchar,)
    $drawstring(%length%,,,$sub(%el_width%,10),%el_height%,%FOCUS%,vcenter right nowrap elipchar,),
    
    // Default
    $drawstring(%tracknumber%,10,,%el_width%,%el_height%,%TEXT%,vcenter nowrap elipchar,)
    $drawstring(%title%,30,,$sub(%el_width%,70),%el_height%,%TEXT%,vcenter nowrap elipchar,)
    $drawstring(%length%,,,$sub(%el_width%,10),%el_height%,%TEXT%,vcenter right nowrap elipchar,)
    ))

    Per Second

    $drawstring(%playback_time% / %length%,,,$sub(%el_width%,9),%el_height%,%PLAYING%,vcenter right nowrap elipchar hq)

  • Style
    dafoult font : Arial 7pt
    Custom Background Colour : Total 255-255-255
    Scrollbar : hide 4
  • Grouping
    Group format

    %album%

    Sort format

    $ifequal($replace($meta(genre),Compilation,1),1,$meta(genre) %album%,$ifequal($replace($meta(genre),Soundtrack,1),1,$meta(genre) %album%,%artist%)) $meta(date) %album%

    Row height : 25
  • Field definition
    EVEN.BG : 240-240-240
    PLAYING.BG: 81-134-165
    PLAYING : 255-255-255 
    FOCUS.BG : 224-224-224
    FOCUS : 81-134-165
    DEFAULT : 96-96-96
  • Behaviour
    Mouse Hover Action : Enable hover, Item Focus, Item Delay 0
    Display only the focused group
    Update every second(for per second)

• Graphical Browser 1
  • Group 

    %album%

  • Sort 

    $ifequal($replace($meta(genre),Compilation,1),1,$meta(genre) %album%,$ifequal($replace($meta(genre),Soundtrack,1),1,$meta(genre) %album%,%artist%)) $meta(date) %album%

  • Item size
    236 × 50
  • Popup size
    300 × 100
  • Draw
    Item

    // Even background
    $ifequal($mod(%gb_item_index%,2),1,
    $set_brush(240-240-240)
    $fill_rect(0,0,%gb_width%,%gb_height%),
    )
    
    
    // Now playing
    $set_font(Arial,8,)
    $if(%gb_isplaying%,
    $set_brush(81-134-165)
    $fill_rect(0,0,%gb_width%,%gb_height%)
    
    $draw_image(10,10,30,30,$replace(%path%,%filename_ext%,)*.jpg,255,)
    
    $set_font_color(255-255-255)
    $draw_text(%album%,50,10,$eval(%gb_width%-60),%gb_height%,word_ellipsis)
    $set_font_color(224-224-224)
    $draw_text(%artist%,50,25,$eval(%gb_width%-60),%gb_height%,word_ellipsis),
    
    
    // Focus
    $if(%gb_focused%,
    $set_brush(208-208-208)
    $fill_rect(0,0,%gb_width%,%gb_height%)
    
    $draw_image(10,10,30,30,$replace(%path%,%filename_ext%,)%album%.jpg,255,)
    
    $set_font_color(81-134-165)
    $draw_text(%album%,50,10,$eval(%gb_width%-60),%gb_height%,word_ellipsis)
    $set_font_color(128-128-128)
    $draw_text(%artist%,50,25,$eval(%gb_width%-60),%gb_height%,word_ellipsis),
    
    
    // Mouse over
    $if(%gb_mouse_over%,
    $set_brush(224-224-224)
    $fill_rect(0,0,%gb_width%,%gb_height%)
    
    $draw_image(10,10,30,30,$replace(%path%,%filename_ext%,)%album%.jpg,255,)
    
    $set_font_color(81-134-165)
    $draw_text(%album%,50,10,$eval(%gb_width%-60),%gb_height%,word_ellipsis)
    $set_font_color(128-128-128)
    $draw_text(%artist%,50,25,$eval(%gb_width%-60),%gb_height%,word_ellipsis),
    
    
    // Default
    $draw_image(10,10,30,30,$replace(%path%,%filename_ext%,)%album%.jpg,230,)
    
    $set_font_color(81-134-165)
    $draw_text(%album%,50,10,$eval(%gb_width%-60),%gb_height%,word_ellipsis)
    $set_font_color(144-144-144)
    $draw_text(%artist%,50,25,$eval(%gb_width%-60),%gb_height%,word_ellipsis)
    )))

    Popup

    $gp_set_pen(255-192-192-192,2)
    $gp_draw_rectangle(0,0,%gb_width%,%gb_height%)
    
    $draw_image(10,10,80,80,$replace(%path%,%filename_ext%,)%album%.jpg,255,)
    
    $set_font(Arial,8,)
    $set_font_color(96-96-96)
    $draw_text(Album : %album%,100,12,$eval(%gb_width%-110),13,word_ellipsis)
    $draw_text(Artist : %artist%,100,28,$eval(%gb_width%-110),13,word_ellipsis)
    $draw_text(Genre : $meta(genre),99,44,$eval(%gb_width%-110),13,word_ellipsis)
    $draw_text(Date : $meta(date),100,60,$eval(%gb_width%-110),13,word_ellipsis)
    $draw_text(%gb_track_count% Tracks   %gb_length%,100,76,$eval(%gb_width%-110),13,word_ellipsis,right)

  • Others
    Scroll type : Vertical scroll
    Scroll by a multiple of scroll size
    Show scrollbar
    Scroll size : 100

 

• Graphical Browser 2
  Graphical Browser 1と同じ設定だが、背景色が入るマスの位置だけが違う。
  • Draw
    Item

    // Odd background
    $ifequal($mod(%gb_item_index%,2),0,
    $set_brush(240-240-240)
    $fill_rect(0,0,%gb_width%,%gb_height%),
    )
    
    
    
    // Now playing
    $set_font(Arial,8,)
    $if(%gb_isplaying%,
    $set_brush(81-134-165)
    $fill_rect(0,0,%gb_width%,%gb_height%)
    
    $draw_image(10,10,30,30,$replace(%path%,%filename_ext%,)*.jpg,255,)
    
    $set_font_color(255-255-255)
    $draw_text(%album%,50,10,$eval(%gb_width%-60),%gb_height%,word_ellipsis)
    $set_font_color(224-224-224)
    $draw_text(%artist%,50,25,$eval(%gb_width%-60),%gb_height%,word_ellipsis),
    
    
    // Focus
    $if(%gb_focused%,
    $set_brush(208-208-208)
    $fill_rect(0,0,%gb_width%,%gb_height%)
    
    $draw_image(10,10,30,30,$replace(%path%,%filename_ext%,)%album%.jpg,255,)
    
    $set_font_color(81-134-165)
    $draw_text(%album%,50,10,$eval(%gb_width%-60),%gb_height%,word_ellipsis)
    $set_font_color(128-128-128)
    $draw_text(%artist%,50,25,$eval(%gb_width%-60),%gb_height%,word_ellipsis),
    
    
    // Mouse over
    $if(%gb_mouse_over%,
    $set_brush(224-224-224)
    $fill_rect(0,0,%gb_width%,%gb_height%)
    
    $draw_image(10,10,30,30,$replace(%path%,%filename_ext%,)%album%.jpg,255,)
    
    $set_font_color(81-134-165)
    $draw_text(%album%,50,10,$eval(%gb_width%-60),%gb_height%,word_ellipsis)
    $set_font_color(128-128-128)
    $draw_text(%artist%,50,25,$eval(%gb_width%-60),%gb_height%,word_ellipsis),
    
    
    // Default
    $draw_image(10,10,30,30,$replace(%path%,%filename_ext%,)%album%.jpg,230,)
    
    $set_font_color(81-134-165)
    $draw_text(%album%,50,10,$eval(%gb_width%-60),%gb_height%,word_ellipsis)
    $set_font_color(144-144-144)
    $draw_text(%artist%,50,25,$eval(%gb_width%-60),%gb_height%,word_ellipsis)
    )))