ปรับแต่งหน้าจอ i3wm ให้สวยด้วย Polybar Themes

บน linux นี้มีสิ่งที่เรียกว่า Status bars ให้เลือกใช้งานหลากหลายเจ้า ซึ่งหลังจากที่เราติดตั้ง i3wm ไปแล้ว i3 เขาก็มี i3status ติดตั้งมาพร้อมใช้งานอยู่แล้ว แต่เราจะไม่ใช้นะครับผมจะพามาติดตั้งเจ้า Polybar กันแทนเพราะว่ามันสวยกว่านั่นเอง ซึ่งตามจริงเจ้า i3status ก็สามารถปรับแต่งได้เหมือนกัน แต่ความสามารถอื่นๆเทียบกับ Polybar แล้วยังนับว่าสู้ยากครับ มาเริ่มกันเลยดีกว่า

ขั้นตอนที่ 1 : ติดตั้ง

เริ่มจากติดตั้ง Dependencies กันก่อนนะครับ

sudo apt-get install cmake cmake-data libcairo2-dev libxcb1-dev libxcb-ewmh-dev libxcb-icccm4-dev libxcb-image0-dev libxcb-randr0-dev libxcb-util0-dev libxcb-xkb-dev pkg-config python3-xcbgen xcb-proto libxcb-xrm-dev libasound2-dev libmpdclient-dev libiw-dev libcurl4-openssl-dev libpulse-dev python3-sphinx libuv1-dev libcurl4-openssl-dev libmpdclient-dev libiw-dev libxcb-composite0-dev xcb-proto python3-xcbgen libjsoncpp-dev rofi python3-pip xbacklight libnl-genl-3-dev	

sudo pip3 install pywal

จากนั้นทำการติดตั้ง Polybar

cd .git
git clone https://github.com/polybar/polybar.git 
cd polybar
./build.sh

ต่อมาเราจะลองเรียกใช้งาน Polybar ดูครับ

polybar example

กด "Ctrl + C" เพื่อหยุดก่อนครับ ขั้นตอนต่อไปเราจะ ปรับแต่ง polybar ให้สวยขึ้น ด้วย Polybar Themes หรือถ้าพอใจกับ polybar เดิมๆ สามารถข้ามไป ขั้นตอนที่ 3 ได้เลยครับ

ขั้นตอนที่ 2 : ปรับแต่ง

มาถึงขั้นตอนปรับแต่ง Polybar ให้สวยขึ้นแล้วนะครับเอาหล่ะต่อเนื่องกันเลยครับ

2.1 ปรับแต่งธีม

cd .git/
git clone https://github.com/adi1090x/polybar-themes.git
chmod +x setup.sh
./setup.sh

เราสามารถเลือกได้นะครับระหว่าง Simple หรือ Bitmap หน้าตาจะคล้ายๆกันครับ

ต่อมาเราจะลองเรียกใช้งาน Polybar themes ดูครับ

~/.config/polybar/launch.sh --[themes]

รายชื่อ Themes ที่มีให้เลือก

• blocks
• colorblocks
• cuts
• docky
• forest
• grayblocks
• hack
• material
• panels
• pwidgets
• shades
• shapes

ยกตัวอย่าง

~/.config/polybar/launch.sh --hack

ต่อไปเราสั่งให้ i3 เรียกใช้งาน Polybar

เปิดใช้งาน nano text editor หรือถ้าใครสะดวกใช้ editor ตัวอื่นก็ตามความถนัดเลยครับ

nano $HOME/.config/i3/config

เพิ่มคำสั่งนี้เข้าไปในบรรทัดท้ายสุด

exec_always --no-startup-id  ~/.config/polybar/launch.sh --hack

แล้วปิดการใช้งาน i3bar โดยการลบบรรทัดนี้ครับ

bar {
    i3bar_command i3bar
}

เราสามารถเปลี่ยนสี theme ได้โดยการกดไปที่ icon หมายเลข 1 แล้วเลือก โทนสีได้ใน Launcher ที่ปรากฏขึ้นมา

2.2 ปรับแต่ง Network Manager

ต่อมาเรามาตั้งค่า Networkmanager กันนะครับ

cd .git/
git clone https://github.com/firecat53/networkmanager-dmenu.git
cd networkmanager-dmenu/
mkdir ~/.config/networkmanager-dmenu
mv config.ini.example ~/.config/networkmanager-dmenu/config.ini
mv networkmanager_dmenu /usr/bin/

เซ็ตให้ networkmanager-dmenu เรียกใช้งาน Theme

nano $HOME/.config/networkmanager-dmenu/config.ini

แก้ไขบรรทัดที่ 4 โดยการ uncomment แล้วเซ็ต PATH

nano $HOME/.config/networkmanager-dmenu/config.ini

2.3 ปรับแต่ง Launcher

ตอนนี้วิธีการเปิดเมนูของเรา สามารถเปิดใช้งานได้โดยการกดไปที่ สัญลักษณ์เมนู ซ้ายบนสุดนะครับ แต่ละธีมจะใช้ สัญลักษณ์ ไม่เหมือนกันนะครับที่นี้เราจะมาตั้งค่าคีย์ลัดเพื่อให้เรียกใช้งาน Launcher ได้สะดวกขึ้นนะครับ

nano $HOME/.config/i3/config

comment บรรทัดที่ 50 เพื่อปิดใช้งาน

# bindsym $mod+d exec dmenu_run

เพิ่มคำสั่งเรียกใช้งาน Launcher ในบรรทัดสุดท้าย

bindsym $mod+d exec "$HOME/.config/polybar/hack/scripts/launcher.sh"

ทำการบันทึกแล้ว restart i3 โดยการกด "mod + Shift + r"

จะได้หน้าตา i3 ประมาณนี้ครับ