DJ Fancxy Fox: Foobar2000 Columns UI介面設計-Part5

Foobar2000 Columns UI介面

(Columns UI panel)

上一個部分大致介紹了foobar2000預設介面的調整, 往下要介紹的是columns UI介面的調整, 兩個介面可以說是不同的介面系統, 所以在一個介面裡, 另一個介面的調整則無效. columns UI介面的自由度則比預設介面的自由度大, 可依照自己的需求崁入多種欄位, 像是各種面板(panels)、工具欄(toolbars)有專輯圖片(artwork view)、傳記(biography)、歌詞秀(lyric show)、時間軸(seekbar)等等..., 而這些面板的標題也可以自行更改. 設計完成的foobar2000 columns UI介面, 呈現了自己想要的風格.

要使用Columns UI介面則先要安裝foo_ui_columns.dll元件, 下載後將此檔擺在foobar2000檔案路徑中的元件(components)資料夾裡: C:\Program Files\foobar2000\components. 另外, 要在columns UI介面裡插入不同功能的面板則還需要安裝UI面板元件, 在foobar2000的官網也提供部分UI面板元件下載, 一樣都擺在foobar2000的元件(components)資料夾裡.

另外, 為了方便起見我以目前正在使用的UI面板foo_fox.fcl來做介紹, 將此面板檔案複製在foobar2000檔案路徑即可: C:\Program Files\foobar2000. 在網路上也有很多網友自行設計的面板檔案提供下載.

外掛元件下載:

foo_ui_columns.dll Columns UI介面元件

UI功能面板元件:

foo_uie_biography.dll 傳記(Biography)

foo_uie_wsh_panel.dll 視覺化時間軸(WSH panel)

foo_uie_lyrics.dll 歌詞秀(Lyric show)

foo_uie_lyrics3.dll 歌詞秀3(Lyric show3)

foo_uie_panel_splitter.dll 面板分割(Panel Stack Splitter)

foo_quicksearch.dll 快速搜尋列(Quick search bar)

foo_uie_trackinfo_mod.dll 歌曲資訊(Track info mod)

foo_uie_vis_channel_spectrum.dll 頻譜面板(Channel spectrum panel)

UI面板檔案下載:

foo_fox.fcl

UI面板檔案下載(by Mulberry):

http://mulberry24.deviantart.com/art/foo-library-150857408

Columns UI介面元件下載(官網):

http://yuo.be./columns.php

UI功能面板元件下載(官網):

http://www.foobar2000.org/components/tag/Default+UI+element

切換columns UI介面

重啟foobar2000在參數設定中點選display: 檔案(file)----> 參數設定(preferences) ----> components----> display, 在使用者介面模組(use interface module)下方的下拉選單選擇columns UI介面, 將預設介面切換至columns UI介面, 再重啟一次foobar2000始生效.

輸入fcl面板

開啟foobar2000後將fcl面板輸入: 檔案(file)----> 參數設定(preferences) ----> components----> display----> columns UI. 選擇columns UI設定中的main標籤, 在fcl importing and exporting框中點選輸入(import), 將foo_fox.fcl面板檔案導入即可顯示新的面板.

UI介面配置

在foobar2000參數設定中點選columns UI設定中的介面(layout)標籤, 就會在下框看到目前介面配置的情形, 包含不同的功能面板.

在框中的水平分割(horizontal splitter)或垂直分割(vertical splitter)項目上按滑鼠右鍵, 選擇插入面板(insert panel)即可新增想要的功能面板; 在所有的項目上按右鍵即可進行各功能面板上移(move up)、下移(move down) 、刪除(remove panel)與複製(copy panel)的動作, 在後續的介面設計上即是用這樣的方式進行編輯. 在UI介面設計中會在介紹水平分割(horizontal splitter)與垂直分割(vertical splitter)的作用.

功能面板介紹

Panels(面板)

Artwork view---- 專輯圖片

Biography---- 傳記

Filter---- 篩選器

Item details---- 目前播放的歌曲

Item properties---- 歌曲資訊(藝術家、歌曲標題、專輯名稱、檔案位置等...資訊)

Lyric show---- 歌詞秀
Lyric show3---- 歌詞秀3
Playlists switcher---- 播放清單切換器

Track info mod---- 歌曲資訊(藝術家、歌曲標題、專輯名稱)
WSH panel---- 視覺化時間軸面板

Playlists views(播放清單)

Columns playlist---- 播放清單(顯示播放清單中各曲目的藝術家、歌曲標題、專輯名稱、時間等...)

NG playlist---- 播放清單(以專輯分類)

splitter(版面分割)

Horizontal splitter---- 水平分割

Panel Stack Splitter---- 面板分割(在同一個面板裡)
Playlists tabs---- 播放清單標籤
Tab stack---- 標籤(不詳)
Vertical splitter---- 垂直分割

Toolbars(工具欄)

Buttons---- 按鈕

Filter search---- 篩選搜尋列

Menu---- 功能表

Playback order---- 播放順序

Quick search toolbar---- 快速搜尋列

Seekbar---- 時間軸

Volume---- 聲音

Visualisations(視覺化效果)

Channel spectrum panel---- 頻譜面板
Spectrum analyser---- 頻譜分析器

UI介面設計

在columns UI介面的設計上是以水平分割(horizontal splitter)與垂直分割(vertical splitter)來分割各個區塊. 以目前小狐所使用的foo_fox.fcl面板來說, 整體版面大致分為左(A)、右(B、C、D、E、F、G)兩個區塊, 所以先在columns UI設定中介面(layout)標籤的項目框裡選擇水平分割(horizontal splitter), 使形成水平配置的左、右兩個區塊. 然而為了讓左、右兩個區塊裡的功能面板能以垂直的方式排列, 因此要在水平分割(horizontal splitter)裡再插入左、右各一個垂直分割(vertical splitter), 即在水平分割(horizontal splitter)項目上點擊右鍵----> 插入面板(insert panel)----> splitter(介面分割)----> 垂直分割(vertical splitter).

左邊(A)區塊裡分別插入(垂直排列):

專輯圖片(Artwork view)
快速搜尋列(Quick search toolbar)
歌曲資訊(Track info mod)
播放清單切換器(Playlists switcher)
頻譜面板(Channel spectrum panel)

右邊(B、C、D、E、F、G)區塊分別插入(垂直排列):

功能表(Menu)
水平分割(Horizontal splitter)x3 (C、D、E)
垂直分割(Vertical splitter)x2 (F、G)

(C)區塊裡分別插入(水平排列):

按鈕(Buttons)
播放順序(Playback order)

(D)區塊裡分別插入(水平排列):

頻譜分析器(Spectrum analyser).

(E)區塊裡分別插入了(垂直排列):

視覺化時間軸面板(WSH panel)、聲音(Volume).

(F)區塊裡分別插入(垂直排列):

傳記(Biography).

(G)區塊裡分別插入(垂直排列):

播放清單(Columns playlist)
歌詞秀(Lyric show)

插入面板完成後則可利用游標進一步調整各個功能面板的大小. 當然有人會問如何讓設計好的UI介面有個固定的大小, 不會因為介面本身可隨意的調整而改變各功能面板的大小, 關於這部分問題在《Part7-Foobar2000Columns UI介面固定》這篇文章有詳細的介紹.

輸出fcl面板

完成之後記得將設計好的面板輸出以備份: 檔案(file)----> 參數設定(preferences) ----> components----> display----> columns UI. 選擇columns UI設定中的main標籤, 在fcl importing and exporting框中點選輸出(export)以存檔.