Developing gaudiBar

As a developer and customization enthusiast, I've always been fascinated by the idea of having a sleek, informative system bar on my desktop. That's why I created , an extensible, adaptive, and responsive system information bar for . In this post, I'll walk you through my development process and the key features that make gaudiBar stand out.

The main decision behind developing gaudiBar was to allow usage of adaptive widgets. Like many developers, I've used various system information tools over the years, and my recurring frustration was their lack of flexibility. If you have been using Übersicht, you will know that to customize the location of any widget, you had to dig into the code and position it, most probably with absolute positioning. For the case of information bars, I did not find that to be a good experience, especially when the information is dynamic, e.g.:

• Displaying Wi-Fi information, where the network SSID can be long (you can work around this with a maximum width and text overflow .. but really?)
• System information, application names, and opened window names of varying lengths

To overcome this, I have designed gaudiBar utilizing flex layout capabilities and using modules for each widget, allowing the content to be:

• Extensible: You can add/remove widgets using a centralized configuration file.
• Adaptive: Information or appearance adapt to the context (e.g., location) of the user. For example, the weather widget automatically detects your location and shows the relevant weather condition for you, or the battery widget background color changes to reflect the amount of charge left.
• Responsive: The flex layout allows gaudiBar to adapt to different screen widths and numbers of widgets, so that you can have a consistent look and feel to your desktop.

provided the perfect foundation for all of this: it lets you run system commands and display their output on your desktop in customizable widgets.

Installation

Make sure you have installed, then clone the repository into the Übersicht widgets directory (or wherever you have pointed your widgets folder if you have changed it):

# Make sure that this points to your widgets folderWIDGETS_HOME=$HOME/Library/Application\ Support/Übersicht/widgets/git clone https://github.com/g-udi/gaudiBar.ubersicht.widget $WIDGETS_HOME/gaudiBar.ubersicht.widget

You can always know your widgets folder by clicking on the Übersicht menu bar icon and clicking on Open widgets folder

Some widgets may require installing some additional packages, they are all documented under each widget's README.

The Development Process

creates a webview and places it on your desktop, just above the wallpaper but behind everything else. Übersicht widgets are written as .coffee or .js ^{and other flavors like .jsx} files which let you format elements with html, style them with css and manipulate data with javascript and coffeescript. For dynamic widgets, Übersicht lets you run terminal commands and insert the output into html, so just about any language can be used to write scripts for widgets.

Layout Design

I started by designing a flexible layout. The main container spans the entire desktop, with primary bars at the top and bottom. Each primary bar is divided into three secondary regions (left, middle, right), which can contain multiple widgets.

The interactive diagram above shows how gaudiBar overlays on your desktop:

• The main container covering the whole desktop
• Two main primary-bar components on the top and bottom of the screen
• Each primary-bar has three secondary-bar regions (left, middle, right)
• Each secondary-bar can contain N widgets that are distributed evenly

Setting up the layout (widgets configuration)

The widgets are defined inside the lib/plugins folder and are loaded via lib/index.js, which exposes them.

module.exports = {    battery: require('./battery/index.jsx'),    chunkwm: require('./chunkwm/index.jsx'),    date: require('./date/index.jsx'),    istats: require('./istats/index.jsx'),    // ...}

Widgets and Configuration

Each widget is a self-contained module: it defines its refresh frequency, a render function that outputs JSX, any system commands or API calls it needs, and its own styling. Which widgets appear, and in which region of the bar, is driven by a central configs.js file, so rearranging the bar or adding a widget never means touching the core code.

Two problems came up repeatedly during development. The first was making widgets with varying content lengths coexist harmoniously, and this is exactly where the flex layout earned its keep, letting widgets expand or contract while the bar keeps its balance. The second was handling API keys for widgets that pull data from external sources (like weather); I keep those in keys.secret.js files that stay out of the repository.

Conclusion

Developing gaudiBar has been an exciting journey of problem-solving and creativity. It's grown from a personal project into a tool that I hope other developers and customization enthusiasts will find useful. The modular, extensible nature of gaudiBar means it can continue to evolve with new widgets and features.

If you're interested in trying gaudiBar or contributing to its development, check out the . I'm always open to suggestions and contributions to make gaudiBar even better!