Konfigurasi DWM dengan Fitur Keren

JagoTekno.com - Sebelumnya saya sudah menjelaskan tentang apa itu DWM dan bagaimana saya menggunakan DWM untuk kebutuhan sehari-hari.

Pada artikel ini saya ingin membagikan konfigurasi DWM Window Manager memiliki lebih banyak fitur.

Motivasinya supaya tidak lupa saja, dan siapa tahu teman-teman yang masih pemula ingin beralih dari Desktop Environtment ke Window Manager untuk mendesain desktop nya sendiri.

Berikut hasil konfigurasi DWM yang saya maksud.

Tampilan desktop linux dengan DWM window manager

Login DWM tanpa display manager

Di sistem Artix saya set automatic login. Jadi saat komputer dinyalakan sistem akan otomatis login tanpa perlu mengetikkan username dan password lalu mengetik startx untuk masuk ke tampilan GUI.

Dengan menggunakan cara ini, tidak diperlukan lagi login manager seperti GDM, Lightdm, Slim, SDDM dan lain-lain.

Hanya perlu menyalakan tombol power laptop lalu tunggu sampai komputer siap digunakan.

Pada tutorial di atas, tidak perlu membuat xsession karena akan otomatis dijalankan melalui xinitrc.

Gunakan font SF Pro Display

Font ini adalah font yang digunakan pada MacOS.

Status Bar menggunakan dwm-bar dan patch systray

Pada bagian sudut kanan atas desktop saya menggunakan status bar custom, yang mana sebelumnya sudah dipasangkan patch Systray pada DWM. Ada banyak pilihan status bar, tetapi yang paling mudah untuk saya konfigurasi adalah dwm-bar.

Di sini terdapat beberapa modul yang bisa diaktifkan seperti :

• Battery
• Volume
• Brightness
• Date
• Spotify dan lain-lain

Menurut saya ini keren sih, cukup mudah dipahami oleh pemula seperti saya. Tutorialnya juga ada di youtube.

Update, saat ini sedang menggunakan dwmblocks, karena lebih simple dan script dwm-bar bisa dipasang juga pada dwmblocks.

Saya sebenarnya hanya membutuhkan beberapa icon sebagai status bar seperti :

• Volume
• Wifi
• Power
• Date

patch systray dan dwmblocks

Jadi DWMblocks saya pasangkan Date dan power saja. Sedangkan untuk icon wifi saya menggunakan nm-applet dan untuk icon volume saya menggunakan pa-applet.

Dengan applet tersebut bisa diklik (clickable), dibandingkan status dwm-bar atau dwblocks yang hanya menampilkan status saja.

Definisikan keyboard yang digunakan pada config dwm

Buka config.h yang ada di folder dwm lalu masukkan kode ini sebelum key definitions

#include <X11/XF86keysym.h>

Kode tersebut digunakan untuk bisa menggunakan tombol FN atau tombol pada khusus pada keyboard anda. Pada laptop Thinkpad x220 saya terdapat tombol volume up dan down. Jadi untuk mengaktifkan fungsi tombol tersebut maka kode ini harus didefinisikan terlebih dahulu.

Saya menggunakan tombol FN + Page Up dan page down untuk setting kecerahan layar monitor.

Sebelumnya, install dulu xbacklight untuk fungsi kecerahan layar dan pamixer untuk volume.

Jadi kodenya seperti ini.

{ 0,                            XF86XK_AudioLowerVolume, spawn, {.v = downvol } }, // include x11/xf86keysym.h first
	{ 0,                            XF86XK_AudioMute,        spawn, {.v = mutevol } }, // include x11/xf86keysym.h first
	{ 0,                            XF86XK_AudioRaiseVolume, spawn, {.v = upvol   } }, // include x11/xf86keysym.h first
	{ 0,                            XF86XK_MonBrightnessUp,	spawn,		SHCMD("xbacklight -inc 15") }, // include x11/xf86keysym.h first
	{ 0,                            XF86XK_MonBrightnessDown,	spawn,		SHCMD("xbacklight -dec 15") }, // include x11/xf86keysym.h first
};

Untuk melihat layout keyboard yang tersedia di sistem, cari dengan perintah ini

grep -l '#define.*XK_' /usr/include/X11/*.h

Icon menggunakan Font Awesome

Install font awesome di sistem terlebih dahulu.

Pada tag dan dwm-bar saya selipkan font-awesome untuk menampilkan icon seperti icon baterai, dan volume.

Pada file config.h dwm, tuliskan font awesome terlebih dahulu sebelum font lain. Kira-kira seperti ini.

static const char *fonts[]          = { "Font Awesome:size=17", "SF Pro Display Bold:size=10" };
static const char dmenufont[]       = "SF Pro Display:size=10";

Lalu scroll ke bawah untuk mengganti simbol layout DWM menjadi font awesome, kira-kira seperti ini :

static const Layout layouts[] = {
        { "",      tile },
	{ "",      NULL },
	{ "",      monocle },
};

Begitupun untuk dwm-bar, tinggal copy paste font awesome ke dalam script tiap-tiap modul yang ingin diaktifkan.

Ingat untuk menonaktifkan $IDENTIFIER terlebih dahulu supaya font awesome dapat dikenali

Contoh script modul untuk baterai di dwm-bar saya

dwm_battery () {
    # Change BAT1 to whatever your battery is identified as. Typically BAT0 or BAT1
    CHARGE=$(cat /sys/class/power_supply/BAT0/capacity)
    STATUS=$(cat /sys/class/power_supply/BAT0/status)
     if [ "$STATUS" = "Charging" ]; then
            printf " %s%% %s" "$CHARGE" 
    	else
            printf " %s%% %s" "$CHARGE" 
    	fi
}

dwm_battery

Contoh script modul untuk volume di dwm-bar, jangan lupa install pamixer terlebih dahulu untuk membaca pulse audio.

dwm_pulse () {
    VOL=$(pamixer --get-volume)
    printf "%s" "$SEP1"
    if [ "$IDENTIFIER" = "" ]; then
        if [ "$VOL" = "muted" ] || [ "$VOL" -eq 0 ]; then
            printf "🔇"
        elif [ "$VOL" -gt 0 ] && [ "$VOL" -le 33 ]; then
            printf " %s%%" "$VOL"
        elif [ "$VOL" -gt 33 ] && [ "$VOL" -le 66 ]; then
            printf "🔉 %s%%" "$VOL"
        else
            printf "🔊 %s%%" "$VOL"
        fi
    else
        if [ "$VOL" = "muted" ] || [ "$VOL" -eq 0 ]; then
            printf "  "
        elif [ "$VOL" -gt 0 ] && [ "$VOL" -le 33 ]; then
            printf "   %s%%" "$VOL"
        elif [ "$VOL" -gt 33 ] && [ "$VOL" -le 66 ]; then
            printf "   %s%%" "$VOL"
        else
            printf "   %s%%" "$VOL"
        fi
    fi
    printf "%s\n" "$SEP2"
}

dwm_pulse

Contoh script untuk mengaktifkan tanggal di dwm-bar

dwm_date () {
    printf "📆%s" "$(date "+%A, %d %B %H:%M")"
    printf "%s\n" "$SEP2"
}

dwm_date

Selanjutnya silahkan aktifkan sendiri modul yang ingin anda gunakan.

Wallpaper menggunakan Feh

Pengaturan Feh saya sederhana saja, saya set feh untuk otomatis menampilkan gambar random pada saat sistem startup. Masukkan kode ini pada file .xinitrc sebelum exec dwm.

feh --bg-fill --randomize ~/Pictures/Wallpapers/* &

Kemudian saya juga setting fungsi yang sama pada file config.h dwm lalu memberikan shortcut (win+z) untuk mengganti background secara random.

Kira-kira kodenya seperti ini

{ MODKEY, XK_z, spawn, SHCMD("feh --bg-fill --randomize ~/Pictures/Wallpapers/* &") },

Efek transparan dan transisi menggunakan Picom

Untuk mendapatkan efek transparansi, saya mendapatkan settingan picom yang berjalan sangat normal di sistem saya.

Pertama install picom terlebih dahulu, lalu edit file /.config/picom.conf dengan config ini.

Jangan lupa memanggil picom melalui file .xinitrc

picom --config ~/.config/picom.conf &

Update, saat ini saya bisa menaruh picom di file autostart.sh saja karena sudah memasang patch autostart di DWM. Jadi .xinitrc lebih rapih.

Setting resolusi untuk 2 monitor menggunakan Arandr

Karena saya menggunakan 2 monitor, saya harus mendefinisikan resolusi untuk masing-masing desktop.

Untuk itu saya menggunakan Arandr. Install arandr dulu dengan command :

sudo pacman -S arandr

Cara menggunakannya sangat mudah, setelah install arandr di sistem, buka lalu definisikan sendiri resolusi yang diinginkan.

Setelah itu save konfigurasinya ke dalam satu file.

Di dalam file tersebut, copy semua isinya lalu paste ke dalam file .xinitrc supaya DWM bisa langsung mengenali resolusi sistem anda. Berikut settingan resolusi monitor sistem saya.

xrandr --output LVDS1 --off --output DP1 --primary --mode 1920x1080 --pos 0x0 --rotate normal --output DP2 --off --output DP3 --off --output HDMI1 --off --output HDMI2 --off --output HDMI3 --off --output VGA1 --off --output VIRTUAL1 --off & 

Update, saya membuat 2 script arandr.sh. 1 untuk setting monitor besar, dan 1 lagi untuk setting monitor laptop. Dengan kombinasi keybind pada config.h saya bisa lompat dari monitor 1 dan 2 dengan mudah.

Optional : Color scheme menggunakan Pywal

Hal menarik di dwm yaitu kita bisa menggenerate ratusan color scheme, baik dark maupun light.

Pertama install pywal di sistem.

Kemudian buka terminal lalu ketik wal untuk melihat berbagai macam konfigurasi yang bisa anda lakukan.

Untuk mendapatkan random color sheme gunakan perintah

wal -f random

Color scheme yang sudah di regenerate terdapat di

~/.cache/wal/

Untuk digunakan di dwm, pertama install patches dwm bernama Urgentborder. Lalu komentari bagian ini di file config.h dwm

//static const char col_urgborder[]   = "#ff0000";
//static const char col_yellow[]        = "#fce94f";
//static const char *colors[][3]      = {
	/*               fg         bg         border   */
//	[SchemeNorm] = { col_gray3, col_gray1, col_gray2 },
//	[SchemeSel]  = { col_gray4, col_blue,  col_yellow },
// 	[SchemeUrg]  = { col_gray4, col_cyan,  col_urgborder  },
//};

Lalu masukkan kode ini di bawahnya sebagai tanda untuk menggunakan konfigurasi color scheme dari pywal

/* generate color with pywal */
#include "/home/userNameAnda/.cache/wal/colors-wal-dwm.h"

Terakhir jangan lupa menambahkan ini pada file .xinitrc

wal -R &

Akhir kata

Demikian konfigurasi DWM keren.

Masih sangat sederhana dibandingkan konfigurasi teman-teman yang ada di forum /unixporn di reddit atau grup facebook Linuxer Desktop Art. Tapi pengalaman untuk membuat konfigurasi seperti ini rasanya sangat bagus.

Jika anda punya pertanyaan seputar konfigurasi DWM window manager, silahkan komentar di bawah.