Wayland. Панель Waybar

Wayland. Панель Waybar

1 Общая информация

• Репозиторий: https://github.com/Alexays/Waybar
• Wiki: https://github.com/Alexays/Waybar/wiki

2 Конфигурация

2.1 Общая информация

• Wiki: https://github.com/Alexays/Waybar/wiki/Configuration
• Конфигурация использует формат файла JSONC и называется config или config.jsonc.
• Каталоги для этого файла:
  • $XDG_CONFIG_HOME/waybar/
  • ~/.config/waybar/
  • ~/waybar/
  • /etc/xdg/waybar/
  • SYSCONFDIR/xdg/waybar (если SYSCONFDIR установленный во время сборки, отличается от /etc, например /usr/local/etc в системах BSD).

2.2 Файл конфигурации

2.2.1 Начало

1// vim:ft=json -*- mode: js-json -*-
2{

2.2.2 Общие настройки

1// General
2"layer": "top",
3// Waybar position (top|bottom|left|right)
4"position": "top",
5// Waybar height (to be removed for auto height)
6"height": 30,
7// Gaps between modules (4px)
8"spacing": 4,

2.2.3 Расположение модулей

 1// Modules
 2"modules-left": [
 3    "sway/workspaces",
 4    "custom/scratchpad",
 5],
 6"modules-center": [
 7    "sway/mode",
 8    "custom/weather",
 9    "custom/clipboard",
10    "idle_inhibitor",
11],
12"modules-right": [
13    "memory",
14    "cpu",
15    "temperature",
16    "battery",
17    "battery#bat1",
18    "network",
19    "backlight",
20    "wireplumber",
21    "clock",
22    "sway/language",
23    "keyboard-state",
24    "tray",
25    "custom/power",
26],

2.2.4 Конфигурация модулей

1. Информационные модули

   1. Память

      1// Memory
      2"memory": {
      3    "interval": 30,
      4    "format": " {used:0.1f}G/{total:0.1f}G {}%",
      5    "tooltip": true,
      6    "tooltip-format": "Free {avail:0.1f}G",
      7},
      

      Распечатка 4: config

   2. Процессор

      1// Cpu
      2"cpu": {
      3    "interval": 10,
      4    "format": " {usage}% {icon}",
      5    "max-length": 10,
      6    "format-icons": ["▁", "▂", "▃", "▄", "▅", "▆", "▇", "█"],
      7},
      

      Распечатка 5: config

   3. Батарея

       1// Battery
       2"battery": {
       3    "bat": "BAT0",
       4    "states": {
       5      "full": 100,
       6      "good": 95,
       7      "warning": 30,
       8      "critical": 15
       9    },
      10    "format": "{icon}  {capacity}% ({time})",
      11    "format-charging": " {icon}  {capacity}% ({time})",
      12    "format-full": " {icon}  Full",
      13    "format-time": "{H}h{M}m",
      14    "interval": 30,
      15    "on-click": "gnome-power-statistics",
      16    "format-icons": [
      17      " ",
      18      " ",
      19      " ",
      20      " ",
      21      " "
      22    ]
      23},
      

      Распечатка 6: config

   4. Температура подсистем

      • Задаётся для температурных зон /sys/class/thermal/ или для показаний сенсоров /sys/class/hwmon/hwmon*/temp*_input.
      • Просмотреть все типы температурных зон:

        1for i in /sys/class/thermal/thermal_zone*; do echo "$i: $(<$i/type)"; done
        

      • Если нет тепловой зоны, можно использовать сенсоры (sensors), чтобы найти предпочтительный источник температуры:

        1for i in /sys/class/hwmon/hwmon*/temp*_input; do echo "$(<$(dirname $i)/name): $(cat ${i%_*}_label 2>/dev/null || echo $(basename ${i%_*})) $(readlink -f $i)"; done
        

      • Сама конфигурация выглядит следующим образом:

       1// Themperature
       2"temperature": {
       3    "critical-threshold": 80,
       4    "interval": 5,
       5    "thermal-zone": 1,
       6    "format": "{icon} {temperatureC}°C",
       7    "format-icons": [
       8        "", // Icon: temperature-empty
       9        "", // Icon: temperature-quarter
      10        "", // Icon: temperature-half
      11        "", // Icon: temperature-three-quarters
      12        ""  // Icon: temperature-full
      13    ],
      14    "tooltip": true
      15},
      

      Распечатка 7: config

   5. Отображение времени

       1// Clock
       2"clock": {
       3    "format": " {:%H:%M  %F, %a} ",
       4    "format-alt": " {:%A, %B %d, %Y (%R)}",
       5    "tooltip-format": "<tt><small>{calendar}</small></tt>",
       6    "calendar": {
       7        "mode"          : "year",
       8        "mode-mon-col"  : 3,
       9        "weeks-pos"     : "right",
      10        "on-scroll"     : 1,
      11        "format": {
      12            "months":     "<span color='#ffead3'><b>{}</b></span>",
      13            "days":       "<span color='#ecc6d9'><b>{}</b></span>",
      14            "weeks":      "<span color='#99ffdd'><b>W{}</b></span>",
      15            "weekdays":   "<span color='#ffcc66'><b>{}</b></span>",
      16            "today":      "<span color='#ff6699'><b><u>{}</u></b></span>"
      17        }
      18    },
      19    "actions":  {
      20        "on-click-right": "mode",
      21        "on-scroll-up": "tz_up",
      22        "on-scroll-down": "tz_down",
      23        "on-scroll-up": "shift_up",
      24        "on-scroll-down": "shift_down"
      25    }
      26},
      

      Распечатка 8: config

   6. Состояние клавиатуры

       1// Keyboard
       2"keyboard-state": {
       3    "numlock": true,
       4    "capslock": true,
       5    "format": " {name} {icon}",
       6    "format-icons": {
       7        "locked": " ",
       8        "unlocked": " "
       9    }
      10},
      

      Распечатка 9: config

   7. Сеть

       1// Network
       2"network": {
       3    "format": "{ifname}",
       4    "format-wifi": " {essid}",
       5    "format-ethernet": " {ifname}",
       6    "format-disconnected": "", //An empty format will hide the module.
       7    "tooltip-format": "{ipaddr}/{cidr} via {gwaddr}",
       8    "tooltip-format-wifi": " {essid} ({signalStrength}%)",
       9    "tooltip-format-ethernet": "󰩠 {ipaddr}/{cidr} via {gwaddr}",
      10    "tooltip-format-disconnected": "󰲛 Disconnected",
      11    "max-length": 50,
      12    "on-click": "nm-connection-editor"
      13},
      

      Распечатка 10: config

2. Управляемые модули

   1. Звук

      1. Pulseaudio

          1// Sound (pulseaudio)
          2"pulseaudio": {
          3    "format": "{icon} {volume}% {format_source}",
          4    "format-bluetooth": "{icon}  {volume}% {format_source}",
          5    "format-bluetooth-muted": "󰝟  {format_source}",
          6    "format-muted": "󰝟 {format_source}",
          7    "format-source": " {volume}%",
          8    "format-source-muted": " ",
          9    "format-icons": {
         10        "headphone": " ",
         11        "hands-free": " ",
         12        "headset": "󰋎 ",
         13        "phone": " ",
         14        "portable": " ",
         15        "car": " ",
         16        "default": [
         17            "",
         18            " ",
         19            " "
         20        ]
         21    },
         22    "scroll-step": 5,
         23    "on-click": "pavucontrol",
         24    "on-click-right": "blueman-manager"
         25},
         

         Распечатка 11: config

      2. Pipewire

          1// Sound (pipewire)
          2"wireplumber": {
          3    "format": "{icon}{volume}%",
          4    "format-muted": " ",
          5    // "on-click": "helvum",
          6    "on-click": "pavucontrol",
          7    "on-click-middle": "wpctl set-mute @DEFAULT_AUDIO_SINK@ toggle",
          8    "format-icons": ["", " ", " "],
          9    "max-volume": 200,
         10    // "scroll-step": 0.2,
         11},
         

         Распечатка 12: config

   2. Трей

      1// Tray
      2"tray": {
      3    "icon-size": 20,
      4    "spacing": 10
      5},
      

      Распечатка 13: config

   3. Отключение засыпания экрана

      1// Idle inhibitor
      2"idle_inhibitor": {
      3    "format": "{icon}",
      4    "format-icons": {
      5      "activated": "  ",
      6      "deactivated": "  "
      7    }
      8},
      

      Распечатка 14: config

   4. Подсветка экрана

      1"backlight": {
      2    "device": "intel_backlight",
      3    "format": "{icon} {percent}% ",
      4    "format-icons": [" ", " "],
      5},
      

      Распечатка 15: config

3. Модули Sway

   1. Окна Sway

      1"sway/window": {
      2    "format": "{}",
      3    "max-length": 40
      4},
      

      Распечатка 16: config

   2. Режим Sway

      1"sway/mode": {
      2    "format": "  {}",
      3    "max-length": 50
      4},
      

      Распечатка 17: config

   3. Рабочие столы Sway

      1"sway/workspaces": {
      2    "disable-scroll": false,
      3    "disable-scroll-wraparound": true,
      4    "all-outputs": true,
      5    "format": "{index}:{name}",
      6},
      

      Распечатка 18: config

   4. Переключатель языка Sway

      1"sway/language": {
      2    "format": " {short} ",
      3    "on-click": "swaymsg input type:keyboard xkb_switch_layout next",
      4},
      

      Распечатка 19: config

4. Самописные модули

   1. Погода

       1// Weather
       2"custom/weather": {
       3    "format": "{icon}{} ",
       4    "tooltip": true,
       5    "interval": 3600,
       6    // accepts -c/--city <city> -t/--temperature <C/F> -d/--distance <km/miles>
       7    "exec": "~/.config/sway/scripts/weather.py",
       8    "return-type": "json",
       9    "format-icons": {
      10        "Unknown": " ",
      11        "Cloudy": "󰖐 ",
      12        "Fog": " ",
      13        "HeavyRain": " ",
      14        "HeavyShowers": " ",
      15        "HeavySnow": " ",
      16        "HeavySnowShowers": "󰜗 ",
      17        "LightRain": " ",
      18        "LightShowers": " ",
      19        "LightSleet": " ",
      20        "LightSleetShowers": " ",
      21        "LightSnow": " ",
      22        "LightSnowShowers": "󰙿 ",
      23        "PartlyCloudy": " ",
      24        "Sunny": " ",
      25        "ThunderyHeavyRain": "󰙾 ",
      26        "ThunderyShowers": " ",
      27        "ThunderySnowShowers": " ",
      28        "VeryCloudy": " "
      29    }
      30},
      

      Распечатка 20: config

   2. Скратчпад

       1// Scratchpad
       2"custom/scratchpad": {
       3    "interval": "once",
       4    "escape": true,
       5    "return-type": "json",
       6    "format": "{icon}",
       7    "format-icons": {
       8        "one": "󰖯 ",
       9        "many": "󰖲 "
      10    },
      11    "exec": "/bin/sh ~/.config/sway/scripts/scratchpad.sh",
      12    "on-click": "swaymsg 'scratchpad show'",
      13    "signal": 7
      14},
      

      Распечатка 21: config

   3. Отключение машины

       1"custom/power": {
       2    "format" : "⏻ ",
       3    "tooltip": false,
       4    "menu": "on-click",
       5    "menu-file": "$HOME/.config/waybar/power_menu.xml", // Menu file in resources folder
       6    "menu-actions": {
       7      "shutdown": "shutdown",
       8      "reboot": "reboot",
       9      "suspend": "systemctl suspend",
      10      "hibernate": "systemctl hibernate"
      11    }
      12},
      

      Распечатка 22: config

   4. Буфер обмена

       1// Clipboard
       2"custom/clipboard": {
       3    "format": " ",
       4    "interval": "once",
       5    "return-type": "json",
       6    "on-click": "swaymsg -q exec '$clipboard'; pkill -RTMIN+9 waybar",
       7    "on-click-right": "swaymsg -q exec '$clipboard-del'; pkill -RTMIN+9 waybar",
       8    "on-click-middle": "swaymsg -q exec '$clipboard-del-all'",
       9    "exec": "printf '{\"tooltip\":\"%s\"}' $(cliphist list | wc -l)",
      10    "exec-if": "[ -x \"$(command -v cliphist)\" ] && [ $(cliphist list | wc -l) -gt 0 ]",
      11    "signal": 9
      12},
      

      Распечатка 23: config

2.2.5 Конец

1}

3 Стили

3.1 Общая информация

• Wiki: https://github.com/Alexays/Waybar/wiki/Styling
• Стилизация выполняется с использованием формата файла CSS и файла с именем style.css.
• Можно также использовать style-light.css и style-dark.css соответственно, чтобы следовать системной теме.
• Каталоги для этого файла:
  • ~/.config/waybar/;
  • ~/waybar/;
  • /etc/xdg/waybar/.
• Можно указывать не конкретные цвета, а цвета из GTK-темы (https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss).

3.2 Стилевой файл

  1/* Waybar configuration */
  2
  3/* Keyframes */
  4
  5@keyframes blink-warning {
  6    70% {
  7      color: white;
  8    }
  9
 10    to {
 11      color: white;
 12      background-color: orange;
 13    }
 14}
 15
 16@keyframes blink-critical {
 17    70% {
 18      color: white;
 19    }
 20
 21    to {
 22      color: white;
 23      background-color: red;
 24    }
 25}
 26
 27/* Base styles */
 28
 29/* Reset all styles */
 30* {
 31    border: none;
 32    border-radius: 0;
 33    min-height: 0;
 34    margin: 0;
 35    padding: 0;
 36    font-family: "Iosevka Nerd Font Propo", "Font Awesome 6 Free", "Font Awesome 6 Brands", sans-serif;
 37    font-size: 14px;
 38}
 39
 40/* The whole bar */
 41window#waybar {
 42    background: @theme_fg_color;
 43    /* background: #323232; */
 44    border-bottom: 1px solid @unfocused_borders;
 45    color: @theme_text_color;
 46    /* color: black; */
 47    /* color: white; */
 48}
 49
 50/* Each module */
 51#battery,
 52#clock,
 53#cpu,
 54#custom-keyboard-layout,
 55#memory,
 56#mode,
 57#network,
 58#pulseaudio,
 59#temperature,
 60#tray {
 61    padding-left: 4px;
 62    padding-right: 4px;
 63}
 64
 65/* -----------------------------------------------------------------------------
 66 * Module styles
 67 * -------------------------------------------------------------------------- */
 68
 69#battery {
 70    animation-timing-function: linear;
 71    animation-iteration-count: infinite;
 72    animation-direction: alternate;
 73}
 74
 75#battery.warning {
 76    color: orange;
 77}
 78
 79#battery.critical {
 80    color: red;
 81}
 82
 83#battery.warning.discharging {
 84    animation-name: blink-warning;
 85    animation-duration: 3s;
 86}
 87
 88#battery.critical.discharging {
 89    animation-name: blink-critical;
 90    animation-duration: 2s;
 91}
 92
 93#clock {
 94    font-weight: bold;
 95}
 96
 97#cpu {
 98  /* No styles */
 99}
100
101#cpu.warning {
102    color: orange;
103}
104
105#cpu.critical {
106    color: red;
107}
108
109#memory {
110    animation-timing-function: linear;
111    animation-iteration-count: infinite;
112    animation-direction: alternate;
113}
114
115#memory.warning {
116    color: orange;
117}
118
119#memory.critical {
120    color: red;
121    animation-name: blink-critical;
122    animation-duration: 2s;
123}
124
125#mode {
126    background: #64727D;
127    border-top: 2px solid white;
128    /* To compensate for the top border and still have vertical centering */
129    padding-bottom: 2px;
130}
131
132#network {
133    /* No styles */
134}
135
136#network.disconnected {
137    color: orange;
138}
139
140#pulseaudio {
141    /* No styles */
142}
143
144#pulseaudio.muted {
145    /* No styles */
146}
147
148#custom-spotify {
149    color: rgb(102, 220, 105);
150}
151
152#temperature {
153    /* No styles */
154}
155
156#temperature.critical {
157    color: red;
158}
159
160#tray {
161    /* No styles */
162}
163
164#window {
165    font-weight: bold;
166}
167
168#workspaces button {
169    border-top: 2px solid transparent;
170    /* To compensate for the top border and still have vertical centering */
171    padding-bottom: 2px;
172    padding-left: 10px;
173    padding-right: 10px;
174    color: #888888;
175}
176
177#workspaces button.focused {
178    border-color: #4c7899;
179    color: white;
180    background-color: #285577;
181}
182
183#workspaces button.urgent {
184    border-color: #c9545d;
185    color: #c9545d;
186}

4 Вспомогательные файлы

4.1 Перезапуск Waybar

• Для перезапуска можно использовать скрипт:

   1#!/usr/bin/env bash
   2
   3run_waybar() {
   4    waybar
   5}
   6
   7restart_waybar() {
   8    pid=$(pgrep waybar)
   9    [[ ! -z $pid ]] && kill $pid
  10    run_waybar
  11}
  12
  13restart_waybar
  

  Распечатка 26: waybar.sh

4.2 Меню выключения компьютера

 1<?xml version="1.0" encoding="UTF-8"?>
 2<interface>
 3  <object class="GtkMenu" id="menu">
 4    <child>
 5      <object class="GtkMenuItem" id="suspend">
 6        <property name="label">Suspend</property>
 7      </object>
 8    </child>
 9    <child>
10      <object class="GtkMenuItem" id="hibernate">
11        <property name="label">Hibernate</property>
12      </object>
13    </child>
14    <child>
15      <object class="GtkMenuItem" id="shutdown">
16        <property name="label">Shutdown</property>
17      </object>
18    </child>
19    <child>
20      <object class="GtkSeparatorMenuItem" id="delimiter1"/>
21    </child>
22    <child>
23      <object class="GtkMenuItem" id="reboot">
24        <property name="label">Reboot</property>
25      </object>
26    </child>
27  </object>
28</interface>