Si quieres conseguir personalizar tu barra de estado con Polybar hasta el más mínimo detalle, necesitarás conocer las posibilidades que tienes para formatear texto. Las posibilidades de formatear texto, están relacionadas con la sección de la configuración en la que te encuentres. Es decir, no es exactamente lo mismo que estés configurando toda una barra de estado, que estés configurando un módulo concreto. Sin embargo, tienes que abstraerte un poco a la hora de comprender todas las posibilidades de formatear texto en Polybar que tienes.

En concreto, para este capítulo del tutorial, me voy a centrar en básicamente en utilizar diferentes ejemplos, para intentar que se quede lo mas claro posible.

Formatear texto en Polybar

Dentro de cada módulo existen una serie de elementos que son susceptibles de formatear. Así tienes por ejemplo, el formato general que hacer referencia a un estado, el formateo de los tokens, que se refieren a valores dinámicos, el formateo de los diferentes tipos de contenido, como etiquetas, label, barras de progreso, progressbar, rampas, etc.

Formatos

En un módulo pueden existir diferentes estados. Por ejemplo, en el caso del módulo de temperatura tienes el estado normal y el estado de aviso, warn. En el caso de del módulo de batería, battery, tienes el estado de cargando, charging y el estado de descargando, discharging. De forma que puedes personalizar independientemente estos dos estados. Por ejemplo, podrías poner que en el caso de cargando el color de fondo fuera verde, mientras que cuando se está descargando el color de fondo fuera rojo.

En general esto se hace de la siguiente forma,

format-NAME-background = #ff0000

Así, en el caso que he comentado de la carga y descarga, lo podrías hacer de la siguiente manera,

format-charging-background = #ff0000
format-discharging-background = #00ff00

Pero no solo esto, sino que también puedes personalizar lo que se muestra en cada uno de los estados. Por ejemplo, para el caso de que se esté cargando, sería,

format-charging = <animation-charging> <label-charging>

A continuación tendrías que definir tanto animation-charging como label-charging. Por ejemplo,

animation-charging-0 = 
animation-charging-1 = 
animation-charging-2 = 
label-charging = %percentage%%
animation-charging-foreground = #ff0000
animation-charging-framerate = 750

animation-discharging-0 = 
animation-discharging-1 = 
animation-discharging-2 = 
label-discharging = %percentage%%
animation-discharging-foreground = #00ff00
animation-discharging-framerate = 750

A este format-NAME, le puedes añadir una serie de opciones para modificar y personalizar su comportamiento. Estas primeras se aplican <label>

• -prefix, añade un prefijo al texto
• -prefix-foreground, permite establecer el color del texto que será el prefijo
• -prefix-background, igual que el anterior, pero en este caso para el color de fondo
• -suffix, exactamente igual que el prefijo pero para el sufijo
• -suffix-foreground, este establece el color del texto del sufijo
• -suffix-background, establece el color del fondo del sufijo
• -padding, -margin y -spacing añaden espacios
• -font permite utilizar una fuente
• -offset desplaza +/- pixeles

Por ejemplo, aplicado a la descarga,

format-discharging-prefix = 
format-discharging-prefix-backgroud = #fff
format-discharging-margin = 1
format-discharging-font = 1
format-discharging-offset = 10

Tokens

Los tokens están definidos en cada uno de los módulos, y los puedes utilizar en las etiquetas, label, para mostrar valores dinámicos, que van variando en función de lo que representen. Algunos ejemplos,

• En el módulo batería tienes los tokens: %percentage%, %time%, %consumption%, que representan la carga en tanto por ciento, el tiempo restante de batería o la tasaa de descarga.
• Otro ejemplo es el del módulo temperatura, donde tienes los tokens: %temperature-c% y %temperature-f%, para mostrar los valores de temperatura en celsius y farenheit respectivamente.
• En el caso del módulo de memoria, tienes una cantidad de tokens brutal, por ejemplo, %percentage_used%, %gb_free%, %gb_swap_total%.

Los tokens también pueden ser formateados, por ejemplo, puedes definir la longitud máxima, por ejemplo, %temperature-c:0:10% o incluso, para el caso que se supere la longitud máxima utilizar %temperature-c:0:10:...%.

Etiquetas

Además de los tokens, que están definidos para cada uno de los módulos, también existen etiquetas o labels. Así, por ejemplo, para el caso de la batería tienes, label-charging, label-discharging y label-full. Estas etiquetas representan cuando se está cargando, descargando y cuando la batería está completamente llena. Por ejemplo,

• label-charging = Cargando al %percentage%
• label-full = Cargada hasta los topes

Las etiquetas tienen formatos similares a los que hemos visto anteriormente. Por ejemplo aplicado a label-full podría ser la siguiente configuración,

label-full = 100%
label-full-background = #00ff00
label-full-foreground = #000000
label-full-overline = #ffffff
label-full-underline = #ffffff
label-full-font = 1
label-full-padding = 0
label-full-maxlen = 0
label-full-minlen = 0
label-full-alignment = center
label-full-ellipsis = false

Respecto a las opciones, mas o menos, te puedes hacer una idea de cada una de ellas. Por ejemplo, padding indica los espacios a izquierda y derecha; maxlen especifica la longitud máxima permitida en caso contrario se trunca el texto; minlen justo lo contrario, y en caso de no alcanzarse se completa con espacios; alignment en el caso de que el tamaño del texto sea inferior a minlen especifica como se posiciona el texto; y por último ellipsis añadirá ... en el caso de que el texto supere maxlen y se trunque.

Barras de progreso

Otra interesante herramienta para mostrar información son las barras de progreso. Y no solo te permite mostrar información sino que además te permite interactuar con la barra de progreso. Por ejemplo, si la utilizas para el volumen, te permite subir y bajar el volumen, y además ver en que porcentaje se encuentra.

En mi caso, por ejemplo, la configuración de la barra de volumen es la siguiente,

bar-volume-format = "%fill%%indicator%%empty%"
bar-volume-width = 10
bar-volume-gradient = true

bar-volume-indicator = ${bar.indicator}
bar-volume-indicator-foreground = ${color.foreground}
bar-volume-indicator-font = 4

bar-volume-fill = ${bar.fill}
bar-volume-fill-font = 4
bar-volume-foreground-0 = ${color.green}
bar-volume-foreground-1 = ${color.green}
bar-volume-foreground-2 = ${color.green}
bar-volume-foreground-3 = ${color.green}
bar-volume-foreground-4 = ${color.yellow}
bar-volume-foreground-5 = ${color.yellow}
bar-volume-foreground-6 = ${color.yellow}
bar-volume-foreground-7 = ${color.yellow}
bar-volume-foreground-8 = ${color.red}
bar-volume-foreground-9 = ${color.red}

bar-volume-empty = ${bar.empty}
bar-volume-empty-font = 4
bar-volume-empty-foreground = ${color.sep}

Los iconos que utilizo en la barra de volumen los tengo definidos en otra sección aparte,

[bar]
fill = 
empty = 
indicator = 

Aquí como ves tienes tres tokens, lo que te permite elegir exactamente si los quieres mostrar todos o solo algunos de ellos.

• %fill%
• %indicator%
• %empty%

La opción bar-volume-width te indica el tamaño total de la barra de progreso. Que estará rellena dependiendo del volumen que tengas asignado. De la misma forma, también puedes definir distintos colores dependiendo igualmente del volumen que tengas asignado.

Rampas

De la misma manera, también puedes utilizar lo que en Polybar se conocen como rampas, ramp. Esto no es mas que un icono que varía en función del valor que tenga asignada la variable. De la misma manera, que con la barra de progreso, para el volumen tengo asignada una rampa, de forma que en función del nivel de volumen, tiene un icono u otro,

ramp-volume-0 = 
ramp-volume-0-foreground = ${color.sep}
ramp-volume-1 = 
ramp-volume-1-foreground = ${color.sep}
ramp-volume-2 = 
ramp-volume-2-foreground = ${color.sep}

Se trata de una lista, con lo que es posible añadir mas o menos iconos, depende de las posibilidades de la tipografía que estés utilizando. En mi caso, para todo esto estoy utilizando la fuente Material Design, que ya he comentado en este artículo.

Animaciones

Al igual que puedes utilizar rampas, otra opción que tienes es la de mostrar animaciones. En mi caso esto lo tengo definido para la batería, donde muestro una animación que me indica si se está cargando o descargando la batería, junto con el porcentaje en el que se encuentra la batería.

animation-charging-0 = 
animation-charging-1 = 
animation-charging-2 = 
animation-charging-3 = 
animation-charging-4 = 
animation-charging-5 = 
animation-charging-6 = 
animation-charging-foreground = ${color.foreground-alt}
animation-charging-framerate = 750

Aquí además de las variables que has visto a lo largo del artículo tienes animation-charging-framerate, que indica el tiempo en milisegundos entre un icono y el siguiente. Es importante el orden en el que muestras los iconos para dar la sensación de que se está cargando o descargando.

Formatear etiquetas

Además de todo lo que has visto hasta el momento Polybar te permite formatear el contenido de las etiquetas, <label> mediante marcas <tag> (anda que no confunde label con tag en inglés).

¿Para que quieres formatear las etiquetas? Hasta el momento has visto como puedes poner formato a toda la etiqueta. Por ejemplo, si quieres definir el color de fondo. Pero, ¿y si solo quieres poner el color de fondo a parte de la etiqueta?. Fíjate como lo puedes hacer,

label-full = %{F#000}%percentage%%{F-}

Esto aplica el color negro al texto utilizando la marca %{F#000} y para indicar hasta donde llega se utiliza la marca %{F-}, que deja el formato como se encontraba inicialmente.

¿Que marcas tienes a tu disposición?

• ${F} color de texto
• ${B} color de fondo
• ${R} intercambia el color de texto y el de fondo
• ${u} color de la línea de subrayar
• ${o} color de la línea inferior
• ${T} tipografía a utilizar. Recuerda que empieza en 1.
• ${O} desplazamiento horizontal en pixel a la derecha, para hacerlo hacia la izquierda tienes que utilizar el valor negativo. Por ejemplo en ${O-5}, desplazas hacia la izquierda 5 pixel.
• ${A<indice>} te permite asociar una comando a un evento, donde los índices son los siguientes,
  • A1 botón izquierdo
  • A2 botón central
  • A3 botón derecho
  • A4 desplazamiento arriba
  • A5 desplazamiento abajo
  • A6 doble clic con botón izquierdo
  • A7 doble clic con botón central
  • A8 doble clic con botón derecho

Conclusión

Como ves se trata de un capítulo bastante denso, este de formatear texto con Polybar, donde hay muchos detalles a tener en cuenta. Sin embargo, no te preocupes en absoluto, porque todos estos conceptos se repetirán cuando entremos en detalle en cada uno de los módulos que Polybar tiene disponibles.

---

Nota: He tenido que quitar todos los iconos. Si quieres la fuente original, no dudes en ponerte en contacto conmigo.

Imagen de portada Nicolas Thomas en Unsplash