Recherche de site Web

Comment installer, configurer et personnaliser la barre de chemin sur Linux

Waybar est une barre Wayland hautement personnalisable pour Sway et d’autres compositeurs basés sur Wlroots, tels que Hyprland ou River. Les nombreuses fonctionnalités disponibles de Waybar sont organisées en modules, qui peuvent être facilement configurés et stylisés.

Dans ce tutoriel, nous apprenons à installer et à configurer Waybar sur certaines des distributions Linux les plus utilisées.

Dans ce tutoriel, vous allez apprendre :

  • Comment installer Waybar
  • Comment configurer et styliser la barre de cheminement et certains des modules les plus utiles

Installation

Waybar est un logiciel gratuit et open source. le code est disponible sur GitHub, mais toutes les principales distributions Linux incluent une version précompilée de la barre, prête à être installée, dans leurs dépôts officiels. Pour installer Waybar sur la dernière version stable de Debian (Bookworm) et d’autres distributions basées sur Debian, nous pouvons exécuter :

sudo apt install waybar

Sur Fedora, à la place, nous pouvons installer le paquet « waybar » en utilisant dnf :

sudo dnf install waybar

La barre de chemin est également disponible dans le dépôt « Extra » d’Archlinux. Nous pouvons l’installer avec pacman :

sudo pacman -Sy waybar

Configuration de la barre de cheminement

La barre de chemin utilise un format de fichier JSONC (JSON avec commentaires) pour sa configuration et recherche un fichier de configuration aux emplacements suivants, par ordre de priorité :

  • $XDG_CONFIG_HOME/barre de chemin/config
  • ~/.config/waybar/config
  • ~/.waybar/config
  • /etc/xdg/barre de cheminement/config

Avant de commencer à parler des modules et de la façon de les configurer, nous voulons écrire la configuration « générale » de la barre de cheminement. En voici un exemple :

{
  "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"]
}

À l’aide de l’identificateur de calque, nous spécifions si la barre doit être affichée en haut ou derrière d’autres fenêtres. Dans les environnements de gestion de fenêtres en mosaïque, cela devient pertinent lors de l’utilisation d’utilitaires tels que « dmenu », pour s’assurer que la fenêtre de menu est visible, si, lorsqu’elle est appelée, elle apparaît à la même position de la barre. Les valeurs valides sont « top » et « bottom », qui est la valeur par défaut. Avec la touche de position, nous déclarons de quel côté de l’écran la barre doit être placée. Les options valides sont : « haut », « bas », « gauche », « droite ».

Les touches de hauteur et d’espacement prennent toutes deux une valeur entière qui spécifie la hauteur de la barre et la quantité d’espace entre les modules, respectivement. Enfin, les touches modules_left, modules_center et modules_right nous permettent de spécifier les modules que nous voulons utiliser dans les segments correspondants de la barre. Chacune de ces clés accepte un tableau de noms de modules en valeur.

Modules de barre de chemin

Waybar est livré avec une vaste sélection de modules. Bien qu’il soit impossible de tous les voir dans ce tutoriel, jetons au moins un coup d’œil à ceux que nous avons inclus dans la configuration ci-dessus.

Le module « balancement/espaces de travail »

Le module sway/workspaces affiche les espaces de travail actuellement utilisés dans le gestionnaire de fenêtres Sway. Par défaut, seuls les numéros d’espaces de travail sont affichés ; Cependant, cela peut être modifié à l’aide de la clé de format et des espaces réservés disponibles. Parmi les autres :

  • {value} : remplacé par le nom de l’espace de travail tel que défini dans la configuration de sway dans son intégralité
  • {name} : remplacé par la valeur à droite de la colonne si le nom de l’espace de travail est spécifié au format « <number> :<name> ». Si le nom de l’espace de travail est « 1 :TERMINAL », par exemple, le module affichera : « TERMINAL »
  • {output} : remplacé par la sortie où se trouve l’espace de travail (par exemple HDMI-A-2)

Le module « balancement/mode »

Le module sway/mode est utilisé pour afficher le mode Sway WM actuel (par exemple le mode « resize »). Par défaut, le nom du mode s’affiche, qui correspond à la configuration suivante :

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

Le module « balancement/fenêtre »

Le module sway/window affiche le titre de la fenêtre actuellement active. La configuration par défaut garantit que seul le titre de la fenêtre est affiché, en utilisant l’espace réservé « {title} » comme valeur de la clé de format :

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

Les autres espaces réservés disponibles sont « {app_id} » qui est remplacé par l’ID de l’application ciblée (par exemple : org.kde.ghostwriter), et « {shell} », qui est remplacé par le shell de la fenêtre ciblée : « xwayland » pour les fenêtres utilisant xwayland ou « xdg-shell » pour les applications natives wayland.

Le module « Inhibiteur d’inactivité »

Le module d’inhibition d’inactivité peut être utilisé pour activer ce que l’on appelle le « mode de présentation », qui implique la suspension des activités d’économie d’énergie telles que l’effacement et le verrouillage de l’écran. Un clic sur le module affiché dans la barre de chemin permet de basculer l’état du mode de présentation. Voici un exemple de configuration :

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

Il y a deux espaces réservés qui peuvent être utilisés comme valeurs de format : « {status} », qui est remplacé par une chaîne représentant l’état de l’inhibiteur inactif (« actived » vs « deactivated »), et « {icon} », qui est remplacé par l’icône correspondante, définie dans l’objet format-icons.

Les polices Font-awesome fournissent une série d’icônes unicode vraiment sympas qui peuvent être utilisées dans la barre de chemin. Les polices sont souvent empaquetées dans le référentiel des distributions les plus utilisées. Sur Debian et ses dérivés, par exemple, le paquet s’appelle « fonts-font-awesome » ; sur Fedora, les polices sont fournies dans le paquet « fontawesome-fonts », et sur ArchLinux, elles sont empaquetées sous la forme « otf-font-awesome ».

Au cours de ce tutoriel, nous représentons les icônes avec leur séquence d’échappement unicode, pour nous assurer que vous êtes en mesure de les visualiser correctement. Dans votre configuration, cependant, vous pouvez simplement copier et coller les caractères correspondants.

Le module « cpu »

Le module CPU est utile pour garder un œil sur l’utilisation du CPU. Par défaut, les données signalées sont mises à jour toutes les 10 secondes et l’utilisation est affichée sous forme de pourcentage. Ceci est défini via la clé de format, à l’aide de l’espace réservé « {usage} » :

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

Voici d’autres espaces réservés que nous pouvons utiliser :

  • {load} : remplacé par la charge actuelle du CPU
  • {avg_frequency} : remplacé par la fréquence moyenne actuelle du processeur en GHz pour tous les cœurs
  • {min_frequency} : remplacé par la fréquence minimale la plus basse du cœur en GHz
  • {max_frequency} : remplacé par la fréquence maximale actuelle du noyau de fréquence le plus élevé en GHz

Le module « mémoire »

Le module de mémoire affiche l’utilisation de la RAM et de l’espace d’échange. Par défaut, seul le statut du premier est affiché, sous forme de pourcentage, à l’aide de l’espace réservé « {percentage} ». Le statut est mis à jour toutes les 30 secondes :

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

En utilisant certains des autres placehodlers disponibles, nous pouvons afficher la quantité de mémoire et l’utilisation des swaps sur le total disponible. En voici un exemple :

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

L’espace réservé « {used} » est augmenté dans la quantité de mémoire utilisée exprimée en Gio, tandis que « {total} » est remplacé par la mémoire totale disponible. Les espaces réservés « {swapUsed} » et « {swapTotal} » font de même pour l’échange. À l’intérieur des espaces réservés, nous avons spécifié le style de formatage : « 0.1f » formate la sortie de sorte qu’une seule valeur décimale est affichée, pour une meilleure lisibilité.

Le module « batterie »

Le module de batterie affiche la charge actuelle de la batterie disponible et son état. Voici un exemple de sa configuration :

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

La touche bat est utilisée pour spécifier quel contrôleur de batterie le module doit utiliser parmi ceux disponibles dans le fichier /sys/proc/power_supply. Si cette option est laissée vide, la valeur est détectée automatiquement ; Vous pouvez le spécifier si votre machine dispose de plus d’une batterie. La clé states prend un objet JSON comme valeur ; Chaque paire clé-valeur qu’il contient représente un état et le pourcentage de charge correspondant.

Nous pouvons utiliser les touches format-charging, format-plugged et format pour définir comment les données sont formatées lorsque la batterie est en charge, lorsque l’adaptateur secteur est branché (le fait d’avoir l’adaptateur branché ne signifie pas nécessairement que la batterie est en charge : voir les seuils de charge), et dans toutes les autres situations, respectivement.

Le module « horloge »

Nous pouvons utiliser le module d’horloge pour afficher la date et l’heure actuelles. Par défaut, seul le temps est inclus dans la sortie :

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

Pour afficher également la date du jour, nous pourrions utiliser la configuration suivante :

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

Pour afficher un petit calendrier sous forme d’infobulle, nous pouvons utiliser la clé tooltip-format, à partir de la valeur suivante :

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

Le style du calendrier peut être personnalisé à l’aide de l’objet calendrier. Pour colorier le nom du mois en jaune, et le jour courant en rouge, par exemple, on pourrait écrire :

"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>"
    }
  }
},

Vous pouvez à peu près configurer le calendrier comme vous le souhaitez. Quelques exemples de configuration sont affichés sur la page GitHub du module.

Le module « pulseaudio »

Le module pulseaudio fournit des informations sur le volume actuel de pulseaudio. La configuration par défaut n’affiche que le pourcentage de volume :

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

Pour rendre les choses plus agréables, nous pourrions afficher une icône à côté de la valeur en pourcentage. Nous pouvons définir les icônes à utiliser en fonction du niveau de volume (faible à élevé), en utilisant la touche format-icons :

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

En faisant défiler la molette de la souris sur le module « pulseaudio » dans la barre de cheminement, il est possible d’augmenter et de diminuer le niveau de volume. Il serait également intéressant d’avoir un moyen rapide de couper complètement le son. On peut le faire mais en spécifiant une commande « pactl » (pactl est un utilitaire pour contrôler le serveur Puseaudio), lorsque l’un des événements « on-click », « on-click-right », ou « on-middle-click » sont enregistrés. Dans l’exemple ci-dessous, nous coupons l’audio au clic gauche de la souris et lançons pavucontrol au clic droit :

"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"
},

Enfin, nous pouvons vouloir spécifier un format à utiliser lorsque l’audio est mis en sourdine. Nous pouvons le faire en utilisant la touche format-muted :

"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}%"
},

Le module « Plateau »

Les barres à plateau sont un élément fondamental de l’expérience de bureau traditionnelle. Certaines applications sont conçues pour être minimisées dans le bac lorsqu’elles sont fermées, et sans un, il est impossible d’obtenir leur état. La barre de chemin prend en charge les fonctionnalités du plateau via le module « plateau ».

Certaines des touches que nous pouvons utiliser dans la configuration du module de barre d’état sont : icons-size, qui définit la taille des icônes dans la barre d’état, et spacing, qui définit l’espace entre les icônes. Les deux clés prennent un entier comme valeur. Voici une configuration typique du plateau :

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

Assembler le tout

Voici à quoi ressemble notre configuration complète lorsque nous rassemblons tous les éléments :

{
  "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
  },
}

Style de la barre de chemin

Nous pouvons personnaliser l’apparence de Waybar en utilisant l’un des fichiers css suivants :

  • ~/.config/waybar/style.css
  • ~/barre de chemin/style.css
  • /etc/xdg/waybar/style.css

Nous pouvons référencer les différents éléments de la barre à l’aide de sélecteurs. Voyons quelques exemples. Supposons que nous voulions définir les couleurs d’arrière-plan et de texte de la barre de cheminement ; nous référencerions la barre par ID :

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

Dans cet autre exemple, nous définissons la couleur de fond du module « idle_inhibitor », lorsque le mode présentation est actif (voir la classe « .activated ») :

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

Pour définir globalement la famille de polices et leur taille, procédez comme suit :

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

Vraiment simple et intuitif. Toutes les classes CSS valides pour les modules sont répertoriées sur la page des modules. À titre d’exemple, voici le style que j’applique actuellement :

* {
    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;
}

Et voici à quoi ressemble la barre de chemin résultante. Rien de trop sophistiqué, assez laid en effet, mais j’espère que cela vous donne une idée générale. La limite de la personnalisation est à peu près votre créativité :

Conclusions

Dans ce tutoriel, nous avons vu comment installer, configurer et personnaliser la barre de cheminement sous Linux. Waybar est une barre Wayland très puissante pour les compositeurs basés sur Wlroots comme Sway. Nous avons vu comment créer un fichier de configuration simple, comment utiliser certains des nombreux modules intégrés dans Waybar, et, enfin, comment styliser la barre à l’aide d’une feuille de style CSS. Si c’est la première fois que vous utilisez Waybar, pour éviter d’avoir à le configurer à partir de zéro, vous pouvez copier le fichier de configuration à l’échelle du système installé sous le nom /etc/xdg/waybar/config sous ~/.config/waybar, et l’utiliser comme point de départ.

Articles connexes: