[GH-ISSUE #1388] Consider using a Map for the format parameter in more modules #8844

Closed
opened 2026-05-23 03:54:37 +01:00 by JakeStanger · 3 comments
Owner

Originally created by @lypwig on GitHub (Feb 18, 2026).
Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/1388

I really like how the bluetooth module can be configured, with a format parameter that takes a map, where a single string is used for both the label and the icons using nerd font.

It's both elegant, easy to understand and powerful, as we can change the icon/label order, display only one of them, change the color or size of the icon/label with Pango markup, etc.

As this syntax seems much better than defining icon_size, show_icon, show_label, etc like in some other modules, it could be interesting to use it on other modules too in order to improve customization and consistency.

In addition, a range filter (see #1381) could be used to define format conditionally where a percent value is used.
This one would take a percent value and an array of strings, and returns the string item corresponding to the normalized percent value (see examples).

Backward compatibility can be ensured by detecting the type used (string or map), and eventually a deprecation warning could be printed if the old syntax is used.

More generally, the idea is also to move the UI/UX in the default values of the config file when possible, instead to do it in rust, in order to let users change this UI/UX more easily.

I might be interested to work on this, let me know.

Here is an overview of some suggestions for the format parameter using this syntax in several modules.

Battery

- type: battery
  format:
    disconnected: <span color="{percentage|range(red,orange,white,white,green)}">{percentage|range(󰂎,󰁺,󰁻,󰁼,󰁽,󰁾,󰁿,󰂀,󰂁,󰂂,󰁹)}%</span> {percentage}%
    charging: <span color="{percentage|range(red,orange,white,white,green)}">{percentage|range(󰢟,󰢜,󰂆,󰂇,󰂈,󰢝,󰂉,󰢞,󰂊,󰂋,󰂅)}</span> {percentage}%

2 states (disconnected / charging), using 2 range filters to change the color and icon according to the battery level. Using inline Nerd font icons also ensures icon size equals the font size.

Brightness

- type: brightness
  format:
    brightness: {percentage|range(,,,,,,,,,,,,,,)} {percentage}%

Here I defined the moon phase icons currently in use (15 levels), but one could define a simple 3-level range with no labels using brightness: {percentage|range(󰃞,󰃟,󰃠)}, or a static format without icon using brightness: {percentage}%.

Bluetooth

- type: bluetooth
  format:
    enabled: 
    disabled: <span color="grey">󰂲</span>
    connected: <span color="turquoise"></span> {device_alias}
    connected_battery: <span color="turquoise"></span>{device_alias} • <span color="{device_battery_percent|range(red,orange,white,white,green)}">{device_battery_percent|range(󰤾,󰤾,󰤿,󰥀,󰥁,󰥂,󰥃,󰥄,󰥅,󰥆,󰥈)} {device_battery_percent}%</span>`

The bluetooth format parameter is already a Map, but I just wanted to suggest how it could be improved using range filters to change the battery icon with the nerd font.

Without filters, an array-based syntax could be used instead, but it's way more verbose:

    connected_battery:
      - <span color="turquoise"></span>{device_alias} • <span color="red">󰤾 {device_battery_percent}%</span>
      - <span color="turquoise"></span>{device_alias} • <span color="red">󰤾 {device_battery_percent}%</span>
      - <span color="turquoise"></span>{device_alias} • <span color="orange">󰤿 {device_battery_percent}%</span>
      - <span color="turquoise"></span>{device_alias} • <span color="orange">󰥀 {device_battery_percent}%</span>
      - <span color="turquoise"></span>{device_alias} • 󰥁 {device_battery_percent}%
      - <span color="turquoise"></span>{device_alias} • 󰥂 {device_battery_percent}%
      - <span color="turquoise"></span>{device_alias} • 󰥃 {device_battery_percent}%
      - <span color="turquoise"></span>{device_alias} • 󰥄 {device_battery_percent}%
      - <span color="turquoise"></span>{device_alias} • 󰥅 {device_battery_percent}%
      - <span color="turquoise"></span>{device_alias} • <span color="green">󰥆 {device_battery_percent}%</span>
      - <span color="turquoise"></span>{device_alias} • <span color="green">󰥈 {device_battery_percent}%</span>

Clipboard

- type: clipboard
  format:
    none: <span color="grey">󰅌</span>
    some: 󰨸

The none state has been added in order to show a specific icon/color when the clipboard is empty.

Inhibit

  - type: brightness
    format:
      on:   {duration}
      off: 󰒲  {duration}

Nothing unusual here except I used nerd font icons instead Unicode chars in order to allow changing the icon color.

Network manager

- type: network_manager
  format:
    wifi_off: 󰤭
    wifi_on: {wifi_percent|range(󰤯,󰤟,󰤢,󰤥,󰤨)}
    wired: 󰛳
    unknown: 󰲊
    bridge: ...

One state per device type, and range filter for wifi_on.
The 󰛳 icon could be used as default for other device types.
Some other nerd font icons like 󱂇 or 󰒍 might be accurate for some device types but I don't have enough knowledge in this field to pick good ones.
Using inline Nerd font icons also ensures that the size of the icon follows the font size.

Notifications

- type: notifications
  format:
    closed_none: 󰆂
    closed_some: 󰅺 <sup>{amount}</sup>
    closed_dnd: 󱗟
    open_none: <span color="grey">󰆂 </span>
    open_some: <span color="grey">󰅺 <sup>{amount}</sup></span>
    open_dnd: <span color="grey">󱗟 </span>

Same states as the "icons" parameter. Using Pango markup on the amount value allows more user customization (for instance one could prefer to have the amount in a regular size).

Sys info

- type: sys_info
  items:
    - format: <span color="{cpu_percent|range(white,white,white,orange,red)}"> </span> {cpu_percent}%
      interval: 1
      popup: ...
      on_click_right: ...
    - format: <span color="{memory_percent|range(white,white,white,orange,red)}"> </span> {memory_percent}%
    - format: <span color="{swap_percent|range(white,white,white,orange,red)}"> </span> {swap_percent}%
    - format: <span color="{temp_c|range(white,white,white,orange,red)}"></span> {temp_c}°C
    - format: <span color="{disks_percent|range(white,white,white,orange,red)}"> </span> {disks_percent}%
    - format: 󰛶 {net_down}
    - format: 󰛴 {net_down}
    - format: 󰪠 {load_average_5}
    - format: 󱑀 {uptime}

Range filters are used to set colors, you got the idea.
I suggest here to put the items array in a items attribute, and then define format and eventual other properties on each item, such as interval or popup (which can be used to show more detailed information).
It allows more flexibility such as defining mouse events on the item-level.

Volume

- type: volume
  items:
    - format:
        hp_off: <span color="grey">󰖁</span>
        hp_on: '{hp_vol|range(󰕿,󰖀,󰕾)} {hp_vol}%'
      on_scroll_up: ...
      on_scroll_down: ...
    - format:
        mic_off: <span color="grey"></span>
        mic_on: 󰍬 {mic_vol}%
      on_scroll_up: ...
      on_scroll_down: ...

Same thing here, an array is used on in an items attribute, which allows users to switch the order of hp/mic, or display only one of them, and mouse events or other things can be defined on the item level.
By the way, the nerd font icons currently used for the volume seems to be deprecated.

Originally created by @lypwig on GitHub (Feb 18, 2026). Original GitHub issue: https://github.com/JakeStanger/ironbar/issues/1388 I really like how the bluetooth module can be configured, with a format parameter that takes a map, where a single string is used for both the label and the icons using nerd font. It's both elegant, easy to understand and powerful, as we can change the icon/label order, display only one of them, change the color or size of the icon/label with Pango markup, etc. As this syntax seems much better than defining `icon_size`, `show_icon`, `show_label`, etc like in some other modules, it could be interesting to use it on other modules too in order to improve customization and consistency. In addition, a `range` filter (see #1381) could be used to define format conditionally where a percent value is used. This one would take a percent value and an array of strings, and returns the string item corresponding to the normalized percent value (see examples). Backward compatibility can be ensured by detecting the type used (string or map), and eventually a deprecation warning could be printed if the old syntax is used. More generally, the idea is also to move the UI/UX in the default values of the config file when possible, instead to do it in rust, in order to let users change this UI/UX more easily. I might be interested to work on this, let me know. Here is an overview of some suggestions for the format parameter using this syntax in several modules. ## Battery ```yml - type: battery format: disconnected: <span color="{percentage|range(red,orange,white,white,green)}">{percentage|range(󰂎,󰁺,󰁻,󰁼,󰁽,󰁾,󰁿,󰂀,󰂁,󰂂,󰁹)}%</span> {percentage}% charging: <span color="{percentage|range(red,orange,white,white,green)}">{percentage|range(󰢟,󰢜,󰂆,󰂇,󰂈,󰢝,󰂉,󰢞,󰂊,󰂋,󰂅)}</span> {percentage}% ``` 2 states (disconnected / charging), using 2 range filters to change the color and icon according to the battery level. Using inline Nerd font icons also ensures icon size equals the font size. ## Brightness ```yml - type: brightness format: brightness: {percentage|range(,,,,,,,,,,,,,,)} {percentage}% ``` Here I defined the moon phase icons currently in use (15 levels), but one could define a simple 3-level range with no labels using `brightness: {percentage|range(󰃞,󰃟,󰃠)}`, or a static format without icon using `brightness: {percentage}%`. ## Bluetooth ```yml - type: bluetooth format: enabled:  disabled: <span color="grey">󰂲</span> connected: <span color="turquoise"></span> {device_alias} connected_battery: <span color="turquoise"></span>{device_alias} • <span color="{device_battery_percent|range(red,orange,white,white,green)}">{device_battery_percent|range(󰤾,󰤾,󰤿,󰥀,󰥁,󰥂,󰥃,󰥄,󰥅,󰥆,󰥈)} {device_battery_percent}%</span>` ``` The bluetooth format parameter is already a Map, but I just wanted to suggest how it could be improved using range filters to change the battery icon with the nerd font. Without filters, an array-based syntax could be used instead, but it's way more verbose: ```yml connected_battery: - <span color="turquoise"></span>{device_alias} • <span color="red">󰤾 {device_battery_percent}%</span> - <span color="turquoise"></span>{device_alias} • <span color="red">󰤾 {device_battery_percent}%</span> - <span color="turquoise"></span>{device_alias} • <span color="orange">󰤿 {device_battery_percent}%</span> - <span color="turquoise"></span>{device_alias} • <span color="orange">󰥀 {device_battery_percent}%</span> - <span color="turquoise"></span>{device_alias} • 󰥁 {device_battery_percent}% - <span color="turquoise"></span>{device_alias} • 󰥂 {device_battery_percent}% - <span color="turquoise"></span>{device_alias} • 󰥃 {device_battery_percent}% - <span color="turquoise"></span>{device_alias} • 󰥄 {device_battery_percent}% - <span color="turquoise"></span>{device_alias} • 󰥅 {device_battery_percent}% - <span color="turquoise"></span>{device_alias} • <span color="green">󰥆 {device_battery_percent}%</span> - <span color="turquoise"></span>{device_alias} • <span color="green">󰥈 {device_battery_percent}%</span> ``` ## Clipboard ```yml - type: clipboard format: none: <span color="grey">󰅌</span> some: 󰨸 ``` The `none` state has been added in order to show a specific icon/color when the clipboard is empty. ## Inhibit ```yml - type: brightness format: on:  {duration} off: 󰒲 {duration} ``` Nothing unusual here except I used nerd font icons instead Unicode chars in order to allow changing the icon color. ## Network manager ```yml - type: network_manager format: wifi_off: 󰤭 wifi_on: {wifi_percent|range(󰤯,󰤟,󰤢,󰤥,󰤨)} wired: 󰛳 unknown: 󰲊 bridge: ... ``` One state per device type, and range filter for wifi_on. The 󰛳 icon could be used as default for other device types. Some other nerd font icons like 󱂇 or 󰒍 might be accurate for some device types but I don't have enough knowledge in this field to pick good ones. Using inline Nerd font icons also ensures that the size of the icon follows the font size. ## Notifications ```yml - type: notifications format: closed_none: 󰆂 closed_some: 󰅺 <sup>{amount}</sup> closed_dnd: 󱗟 open_none: <span color="grey">󰆂 </span> open_some: <span color="grey">󰅺 <sup>{amount}</sup></span> open_dnd: <span color="grey">󱗟 </span> ``` Same states as the "icons" parameter. Using Pango markup on the amount value allows more user customization (for instance one could prefer to have the amount in a regular size). ## Sys info ```yml - type: sys_info items: - format: <span color="{cpu_percent|range(white,white,white,orange,red)}"> </span> {cpu_percent}% interval: 1 popup: ... on_click_right: ... - format: <span color="{memory_percent|range(white,white,white,orange,red)}"> </span> {memory_percent}% - format: <span color="{swap_percent|range(white,white,white,orange,red)}"> </span> {swap_percent}% - format: <span color="{temp_c|range(white,white,white,orange,red)}"></span> {temp_c}°C - format: <span color="{disks_percent|range(white,white,white,orange,red)}"> </span> {disks_percent}% - format: 󰛶 {net_down} - format: 󰛴 {net_down} - format: 󰪠 {load_average_5} - format: 󱑀 {uptime} ``` Range filters are used to set colors, you got the idea. I suggest here to put the items array in a `items` attribute, and then define format and eventual other properties on each item, such as `interval` or `popup` (which can be used to show more detailed information). It allows more flexibility such as defining mouse events on the item-level. ## Volume ```yml - type: volume items: - format: hp_off: <span color="grey">󰖁</span> hp_on: '{hp_vol|range(󰕿,󰖀,󰕾)} {hp_vol}%' on_scroll_up: ... on_scroll_down: ... - format: mic_off: <span color="grey"></span> mic_on: 󰍬 {mic_vol}% on_scroll_up: ... on_scroll_down: ... ``` Same thing here, an array is used on in an `items` attribute, which allows users to switch the order of hp/mic, or display only one of them, and mouse events or other things can be defined on the item level. By the way, the nerd font icons currently used for the volume seems to be deprecated.
Author
Owner

@lypwig commented on GitHub (Feb 19, 2026):

I think all this stuff represents a considerable amount of work and might be out of scope of this project, sorry for the inconvenience. Feel free to reopen if necessary.

<!-- gh-comment-id:3930374858 --> @lypwig commented on GitHub (Feb 19, 2026): I think all this stuff represents a considerable amount of work and might be out of scope of this project, sorry for the inconvenience. Feel free to reopen if necessary.
Author
Owner

@JakeStanger commented on GitHub (Feb 19, 2026):

The recently introduced profiles system aims to accomplish what you've described here, and is currently supported by the battery, network-manager and volume modules.

There are plans to expand that to other modules, and increase the number of options supported by it. That will eventually include a refactor of the BT module to migrate to it.


You didn't need to close all the issues; I've not had a chance to review them yet and some of them look like good ideas. The amount of effort you perceive something to be is also unimportant. I can judge that, and often things are worth the effort.

You also exploded my inbox, btw...

Image
<!-- gh-comment-id:3930510216 --> @JakeStanger commented on GitHub (Feb 19, 2026): The recently introduced [profiles](https://github.com/JakeStanger/ironbar/wiki/profiles) system aims to accomplish what you've described here, and is currently supported by the battery, network-manager and volume modules. There are plans to expand that to other modules, and increase the number of options supported by it. That will eventually include a refactor of the BT module to migrate to it. --- You didn't need to close all the issues; I've not had a chance to review them yet and some of them look like good ideas. The amount of effort you perceive something to be is also unimportant. I can judge that, and often things are worth the effort. You also exploded my inbox, btw... <img width="884" height="810" alt="Image" src="https://github.com/user-attachments/assets/a42d2063-9aef-4a8f-9a0f-e2b7e8447c56" />
Author
Owner

@lypwig commented on GitHub (Feb 19, 2026):

Oh my god I'm so sorry for that I didn't know you would receive a notification on each edit!

Thank you for your answer.

<!-- gh-comment-id:3930670946 --> @lypwig commented on GitHub (Feb 19, 2026): Oh my god I'm so sorry for that I didn't know you would receive a notification on each edit! Thank you for your answer.
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
JakeStanger/ironbar#8844
No description provided.