Pesquisa de site

Como instalar, configurar e personalizar o Waybar no Linux


Waybar é uma barra Wayland altamente personalizável para Sway e outros compositores baseados em Wlroots, como Hyprland ou River. As diversas funcionalidades disponíveis do Waybar estão organizadas em módulos, que podem ser facilmente configurados e estilizados.

Neste tutorial aprendemos como instalar e configurar o Waybar em algumas das distribuições Linux mais utilizadas.

Neste tutorial você aprenderá:

  • Como instalar o Waybar
  • Como configurar e estilizar o Waybar e alguns dos módulos mais úteis

Instalação

Waybar é um software gratuito e de código aberto; o código está disponível no GitHub, mas todas as principais distribuições do Linux incluem uma versão pré-compilada da barra, pronta para ser instalada, em seus repositórios oficiais. Para instalar o Waybar no Debian estável mais recente (Bookworm) e em outras distribuições baseadas em Debian, podemos executar:

$ sudo apt install waybar

No Fedora, em vez disso, podemos instalar o pacote “waybar” usando dnf:

$ sudo dnf install waybar

Waybar também está disponível no repositório “Extra” do Archlinux. Podemos instalá-lo com o pacman:

$ sudo pacman -Sy waybar

Configuração da barra de caminho

Waybar usa um formato de arquivo JSONC (JSON com comentários) para sua configuração e procura um arquivo de configuração nos seguintes locais, em ordem de prioridade:

  • $XDG_CONFIG_HOME/waybar/config
  • ~/.config/waybar/config
  • ~/.waybar/config
  • /etc/xdg/waybar/config

Antes de começar a falar sobre módulos e como configurá-los, queremos escrever a configuração “geral” do Waybar. Aqui está um exemplo:

{
  "layer": "bottom",
  "position": "top",
  "height": 24,
  "spacing": 5,
  "modules-left": ["sway/workspaces","sway/mode"],
  "modules-center": ["sway/window"],
  "modules-right": ["idle_inhibitor","cpu","memory","battery","pulseaudio","clock","tray"]
}

Usando a tecla layer, especificamos se a barra deve ser exibida no topo ou atrás de outras janelas. Em ambientes de gerenciamento de janelas lado a lado, isso se torna relevante ao usar utilitários como “dmenu”, para garantir que a janela do menu esteja visível, se, quando invocada, ela aparecer na mesma posição da barra. Os valores válidos são “superior” e “inferior”, que é o padrão. Com a tecla position declaramos em que lado da tela a barra deve ser colocada. As opções válidas são: “superior”, “inferior”, “esquerda”, “direita”.

Ambas as teclas height e spacing assumem um valor inteiro que especifica a altura da barra e a quantidade de espaço entre os módulos, respectivamente. Finalmente, as teclas modules_left, modules_center e modules_right nos permitem especificar os módulos que queremos usar nos segmentos correspondentes da barra. Cada uma dessas chaves aceita um array de nomes de módulos como valor.

Módulos de barra de caminho

Waybar vem com uma vasta seleção de módulos. Embora seja impossível ver todos eles neste tutorial, vamos pelo menos dar uma olhada naqueles que incluímos na configuração acima.

O módulo “balanço/espaços de trabalho”

O módulo sway/workspaces mostra os espaços de trabalho atualmente em uso no gerenciador de janelas Sway. Por padrão, apenas os números dos espaços de trabalho são exibidos; isso, entretanto, pode ser alterado usando a chave format e os espaços reservados disponíveis. Entre outros:

  • {value}: substituído pelo nome do espaço de trabalho conforme definido na configuração do sway em sua totalidade
  • {nome}: substituído pelo valor à direita da coluna se o nome do espaço de trabalho for especificado no formato “:”. Se o nome do espaço de trabalho for “1:TERMINAL”, por exemplo, o módulo exibirá: “TERMINAL”
  • {output}: substituído pela saída onde o espaço de trabalho está localizado (por exemplo, HDMI-A-2)

O módulo “oscilação/modo”

O módulo oscilação/modo é usado para exibir o modo Sway WM atual (por exemplo, modo “redimensionar”). O padrão é apenas exibir o nome do modo, que corresponde à seguinte configuração:

"sway/mode": { 
  "format": "{}"
},

O módulo “oscilação/janela”

O módulo oscilação/janela exibe o título da janela atualmente em foco. A configuração padrão garante que apenas o título da janela seja exibido, usando o espaço reservado “{title}” como valor da chave format:

"sway/window": { 
  "format": "{title}"
}

Outros espaços reservados disponíveis são “{app_id}”, que é substituído pelo ID do aplicativo em foco (por exemplo: org.kde.ghostwriter), e “{shell}”, que é substituído pelo shell da janela em foco: “xwayland” para janelas usando xwayland ou “xdg-shell” para aplicativos wayland nativos.

O módulo “Inibidor de Inatividade”

O módulo Idle Inhibitor pode ser usado para ativar o chamado “modo de apresentação”, que envolve a suspensão de atividades de economia de energia, como apagamento e bloqueio de tela. Um clique no módulo exibido no Waybar alterna o estado do modo de apresentação. Aqui está um exemplo de configuração:

"idle_inhibitor": { 
  "format": "{icon}", 
  "format-icons": { 
    "activated": "\uf06e", 
    "deactivated": "\uf070" 
  } 
}

Existem dois espaços reservados que podem ser usados como valores de formato: “{status}”, que é substituído por uma string representando o status do inibidor inativo (“ativo” vs “desativado”), e “{icon}”, que é substituído pelo ícone correspondente, definido no objeto format-icons.

Fontes incríveis fornecem uma série de ícones Unicode muito legais que podem ser usados no Waybar. As fontes geralmente são empacotadas no repositório das distribuições mais utilizadas. No Debian e derivados, por exemplo, o pacote é chamado de “fonts-font-awesome”; no Fedora as fontes vêm no pacote “fontawesome-fonts” e no ArchLinux elas são empacotadas como “otf-font-awesome”.

Ao longo deste tutorial, representamos ícones com sua sequência de escape unicode, para garantir que você consiga visualizá-los corretamente. Na sua configuração, entretanto, você pode simplesmente copiar e colar os caracteres correspondentes.

O módulo “cpu”

O módulo CPU é útil para monitorar a utilização da CPU. Por padrão, os dados relatados são atualizados a cada 10 segundos e o uso é exibido em forma de porcentagem. Isso é definido através da chave format, usando o espaço reservado “{usage}”:

"cpu": { 
  "interval": 10, 
  "format": "CPU: {usage}%" 
},

Alguns dos outros espaços reservados que podemos usar são:

  • {load}: substituído pela carga atual da CPU
  • {avg_frequency}: substituído pela frequência média atual da CPU em GHz para todos os núcleos
  • {min_frequency}: substituído pela frequência mínima do núcleo mais baixa em GHz
  • {max_frequency}: substituído pela frequência máxima atual do núcleo de frequência mais alta em GHz

O módulo de “memória”

O módulo de memória exibe RAM e uso de swap. Por padrão, apenas o status do primeiro é mostrado, em formato percentual, usando o espaço reservado “{percentage}”. O status é atualizado a cada 30 segundos:

"memory": { 
  "interval": 30, 
  "format": "{percentage}%" 
},

Usando alguns dos outros placehodlers disponíveis, podemos exibir a quantidade de memória e o uso de swap no total disponível. Aqui está um exemplo:

"memory": {
  "interval": 30,
  "format": "RAM: {used:0.1f}GiB/{total:0.1f}GiB ({percentage}%) SWAP: {swapUsed:0.1f}GiB/{swapTotal:0.1f}GiB ({swapPercentage}%)"
},

O espaço reservado “{used}” é expandido na quantidade de memória usada expressa em GiB, enquanto “{total}” é substituído pela memória total disponível. Os espaços reservados “{swapUsed}” e “{swapTotal}” fazem o mesmo para troca. Dentro dos espaços reservados especificamos o estilo de formatação: “0.1f” formata a saída para que apenas um único valor decimal seja exibido, para melhor legibilidade.

O módulo “bateria”

O módulo de bateria exibe a carga atual disponível da bateria e seu status. Aqui está um exemplo de sua configuração:

"battery": {
  "bat": "BAT0",
  "states": {
    "good": 95,
    "warning": 30,
    "critical": 5
  },
  "format": "BAT0: {capacity}%",
  "format-charging": "BAT0: {capacity}% (charging)",
  "format-plugged": "BAT0: {capacity}% (plugged)",
},

A chave bat é usada para especificar qual monitor de bateria o módulo deve usar entre aqueles disponíveis em /sys/proc/power_supply. Se esta opção for deixada vazia, o valor será detectado automaticamente; você pode querer especificá-lo se sua máquina tiver mais de uma bateria. A chave states leva um objeto JSON como valor; cada par de valores-chave nele representa um status e o limite de porcentagem de cobrança correspondente.

Podemos usar as teclas format-charging, format-plugged e format para definir como os dados são formatados quando a bateria está carregando, quando o AC adaptador está conectado (ter o adaptador conectado não significa necessariamente que a bateria esteja carregando: consulte limites de carga) e em todas as outras situações, respectivamente.

O módulo “relógio”

Podemos usar o módulo de relógio para exibir a data e hora atuais. Por padrão, apenas o tempo é incluído na saída:

"clock": {
  "format": "{:%H:%M}"
},

Para exibir também a data atual, poderíamos usar a seguinte configuração:

"clock": {
  "format": "{:%Y/%m/%d %H:%M}",
},

Para exibir um pequeno calendário como uma dica de ferramenta, podemos usar a chave tooltip-format, dando a ela o seguinte valor:

"clock": {
  "format": "{:%Y/%m/%d %H:%M}",
  "tooltip-format": "<tt><small>{calendar}</tt>",
},

O estilo do calendário pode ser personalizado ainda mais usando o objeto calendar. Para colorir o nome do mês em amarelo e o dia atual em vermelho, por exemplo, poderíamos escrever:

"clock": {
  "format": "{:%Y/%m/%d %H:%M}",
  "tooltip-format": "<tt><small>{calendar}</tt>",
  "calendar": {
    "format": {
      "months": "<span color='#ffead3'><b>{}</b></span>",
      "today": "<span color='#ff6699'><b>{}</b></span>"
    }
  }
},

Você pode configurar o calendário como quiser. Alguns exemplos de configuração são exibidos na página GitHub do módulo.

O módulo “pulseaudio”

O módulo pulseaudio relata informações sobre o volume atual do pulseaudio. A configuração padrão exibe apenas a porcentagem do volume:

"pulseaudio": {
  "format": "{volume}%"
}

Para deixar as coisas mais bonitas, poderíamos exibir um ícone ao lado do valor percentual. Podemos definir quais ícones usar dependendo do nível de volume (de baixo para alto), usando a tecla format-icons:

"pulseaudio": { 
  "format": "{volume}% {icon}", 
  "format-icons": { 
    "default": ["\uf026", "\uf027", "\uf028"] 
  }  
},

Ao rolar a roda do mouse sobre o módulo “pulseaudio” no Waybar, é possível aumentar e diminuir o nível de volume. Também seria bom ter uma maneira rápida de silenciar completamente o áudio. Podemos fazer isso, mas especificando um comando “pactl” (pactl é um utilitário para controlar o servidor Puseaudio), quando um dos eventos “ao clicar”, “ao clicar com o botão direito” ou “ao clicar com o meio” estão registrados. No exemplo abaixo, silenciamos o áudio ao clicar com o botão esquerdo do mouse e iniciamos o pavucontrol ao clicar com o botão direito:

"pulseaudio": {
  "format": "{volume}% {icon}",
  "format-muted": " {volume}%",
  "format-icons": {
    "default": ["\uf026", "\uf027", "\uf028"]
  },
  "on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
  "on-click-right": "pavucontrol"
},

Finalmente, podemos querer especificar um formato a ser usado quando o áudio for silenciado. Podemos fazer isso usando a chave format-mute:

"pulseaudio": {
  "format": "{icon} {volume}%",
  "format-icons": {
    "default": ["\uf026", "\uf027", "\uf028"]
  },
  "on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
  "on-click-right": "pavucontrol",
  "format-muted": "\uf00d {volume}%"
},

O módulo “Bandeja”

As barras da bandeja são uma parte fundamental da experiência tradicional de desktop. Alguns aplicativos são projetados para serem minimizados na bandeja quando fechados e, sem isso, é impossível obter seu estado. Waybar oferece suporte a funcionalidades de bandeja por meio do módulo “bandeja”.

Algumas das chaves que podemos usar na configuração do módulo da bandeja são: icons-size, que define o tamanho dos ícones na bandeja, e spacing, que define o espaço entre ícones. Ambas as chaves recebem um número inteiro como valor. Aqui está uma configuração típica de bandeja:

"tray": {
  "icon-size": 20,
  "spacing": 10
}

Juntando tudo

Aqui está a aparência de nossa configuração completa quando juntamos todos os elementos:

{
  "layer": "bottom",
  "position": "top",
  "height": 24,
  "spacing": 5,
  "modules-left": ["sway/workspaces","sway/mode"],
  "modules-center": ["sway/window"],
  "modules-right": ["idle_inhibitor","cpu","memory","battery","pulseaudio","clock","tray"],
  "sway/mode": {
    "format": "{}"
  },
  "sway/window": {
    "format": "{title}"
  },
  "idle_inhibitor": {
    "format": "{icon}",
    "format-icons": {
      "activated": "\uf06e",
      "deactivated": "\uf070"
    }
  },
  "cpu": { 
    "interval": 10, 
    "format": "CPU: {usage}%" 
  },
  "memory": {
    "interval": 30,
    "format": "RAM: {used:0.1f}GiB/{total:0.1f}GiB ({percentage}%) SWAP: {swapUsed:0.1f}GiB/{swapTotal:0.1f}GiB ({swapPercentage}%)"
  },
  "battery": {
    "bat": "BAT0",
    "states": {
      "good": 95,
      "warning": 30,
      "critical": 5
    },
    "format": "BAT0: {capacity}%",
    "format-charging": "BAT0: {capacity}% (charging)",
    "format-plugged": "BAT0: {capacity}% (plugged)",
  },
  "clock": {
    "format": "{:%Y/%m/%d %H:%M}",
    "tooltip-format": "<tt><small>{calendar}</tt>",
    "calendar": {
      "format": {
        "months": "<span color='#ffead3'><b>{}</b></span>",
        "today": "<span color='#ff6699'><b>{}</b></span>"
      }
    }
  },
  "pulseaudio": {
    "format": "{icon} {volume}%",
    "format-icons": {
      "default": ["\uf026", "\uf027", "\uf028"]
    },
    "on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
    "on-click-right": "pavucontrol",
    "format-muted": "\uf00d {volume}%"
  },
  "tray": {
    "icon-size": 20,
    "spacing": 10
  },
}

Barra de estilo

Podemos personalizar a aparência do Waybar usando um dos seguintes arquivos CSS:

  • ~/.config/waybar/style.css
  • ~/waybar/style.css
  • /etc/xdg/waybar/style.css

Podemos referenciar os vários elementos da barra usando seletores. Vejamos alguns exemplos. Suponha que queiramos definir o plano de fundo e as cores do texto da barra de navegação; referenciaríamos a barra por ID:

#waybar { 
  background-color: #333333; 
  color: #ffffff; 
}

Neste outro exemplo, definimos a cor de fundo do módulo “idle_inhibitor”, quando o modo de apresentação está ativo (veja a classe “.activated”):

#idle_inhibitor.activated { 
  background-color: #285577; 
}

Para definir globalmente a família de fontes e seu tamanho:

*{ 
  font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; 
  font-size: 13px; 
}

Muito simples e intuitivo. Todas as classes CSS válidas para os módulos estão listadas na página de módulos. Apenas como exemplo, aqui está o estilo que estou aplicando atualmente:

* {
    font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
    font-size: 13px;
}

#waybar {
    background-color: #333333;
    color: #ffffff;
}

button {
    box-shadow: inset 0 -3px transparent;
    border: none;
    border-radius: 0;
    padding: 0 5px;
}

#workspaces button {
    background-color: #5f676a;
    color: #ffffff;
}

#workspaces button:hover {
    background: rgba(0,0,0,0.2);
}

#workspaces button.focused {
    background-color: #285577;
}

#workspaces button.urgent {
    background-color: #900000;
}

#workspaces button.active {
    background-color: #285577;
}

#clock,
#battery,
#cpu,
#memory,
#pulseaudio,
#tray,
#mode,
#idle_inhibitor,
#window,
#workspaces {
    margin: 0 5px;
}


.modules-left > widget:first-child > #workspaces {
    margin-left: 0;
}


.modules-right > widget:last-child > #workspaces {
    margin-right: 0;
}

@keyframes blink {
    to {
        background-color: #ffffff;
        color: #000000;
    }
}

#battery.critical:not(.charging) {
    background-color: #f53c3c;
    color: #ffffff;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

label:focus {
    background-color: #000000;
}

#tray > .passive {
    -gtk-icon-effect: dim;
}

#tray > .needs-attention {
    -gtk-icon-effect: highlight;
    background-color: #eb4d4b;
}

#idle_inhibitor {
    font-size: 15px;
    background-color: #333333;
    padding: 5px;
}

#idle_inhibitor.activated {
    background-color: #285577;
}

E aqui está a aparência do Waybar resultante. Nada muito sofisticado, muito feio mesmo, mas espero que dê uma ideia geral. O limite na personalização é basicamente a sua criatividade:

Conclusões

Neste tutorial vimos como instalar, configurar e personalizar o Waybar no Linux. Waybar é uma barra Wayland realmente poderosa para compositores baseados em Wlroots como o Sway. Vimos como criar um arquivo de configuração simples, como usar alguns dos vários módulos integrados no Waybar e, por fim, como estilizar a barra usando uma folha de estilo CSS. Se for a primeira vez que você usa o Waybar, para evitar ter que configurá-lo do zero, você pode copiar o arquivo de configuração de todo o sistema instalado como /etc/xdg/waybar/config em ~/.config/waybar e usá-lo como um ponto de partida.

Artigos relacionados: