Übersicht Widgets

FYI, this project is listed as "retired." It may no longer function or I may just not be updating it anymore.

• Download
• Support
• GitHub

• Installation
• Customization
• Widgets
  • LoadChart
    • Adjusting settings
    • Notes
  • Load: Average load display
    • Notes
  • LoadBar
    • Adjusting values
    • Adjusting colors
  • TimeMachine: Time Machine status and progress
    • Notes
  • Pingo: average server ping times and chart
    • Notes
• Inverter
• Download

This is a collection of widgets for the Mac app Übersicht.

Installation

Reveal your widgets folder from the Übersicht menu in the menu bar. Drop the filename.widget file you want to use into that folder. Done.

Customization

Positioning and other adjustments can be made in the index.coffee file for each widget.

Widgets

LoadChart

A widget for Übersicht that displays a graph of the 5-minute average CPU load over time.

There are settings in the index.coffee file for showing it in color or black and white, inverse, with and without background, and bright or translucent.

Adjusting settings

In the .coffee file’s update function, locate these lines:

settings =
  background: true
  color: true
  brighter: false
  inverse: false
  bars: 100
  animated: false

Adjust and save to see the results in the widget on the desktop. The widget will automatically change width based on the number of bars you request.

Note that the “animated” option is CPU-intensive, especially if you have a lot of bars showing. It works pretty well with 25-50 bars, but it still causes a noticeable spike in CPU load.

Notes

The load chart currently rescales as minimum and maximum values change. This requires iterating through all the bars on every update. I’m planning to add a “static” setting that bases everything on a fixed minimum/maximum and only has to add and remove bars from either end. This will improve performance in some cases, and could still have a nifty “growing” animation to bring new bars in gracefully on the right.

Load: Average load display

A widget for Übersicht that displays a large number showing the average system load. The decimal point in the number is animated and color coded based on load (low, normal, high, higher, highest) and pulses faster as load increases. An arrow to the left shows whether the load is increasing or decreasing.

Notes

Adjust the refresh rate as desired.

LoadBar

A widget for Übersicht that displays a thin bar on the left side of the screen indicating the 5-minute average CPU load. Under normal CPU load it’s almost invisible, but changes color and opacity as the load gets higher. Color and height changes are animated.

It formats its height based on the screen size, so it should work on any size monitor, stretching the full height of the screen at max load.

Adjusting values

Based on how many cores you have and what your average load is, you may want to adjust the definitions for the alert levels. In the update function, change the values for each level (in descending order):

colorclass = switch
  when val > 4 then 'urgent'
  when val > 3 then 'important'
  when val > 2 then 'high'
  when val > 1 then 'normal'
  else 'low'

Adjusting colors

The colors for each level can be adjusted in the style section:

.low::-webkit-progress-value
  background-color: rgba(134, 229, 255, .05)

.normal::-webkit-progress-value
  background-color: rgba(134, 255, 153, .25)

.high::-webkit-progress-value
  background-color: rgba(243, 255, 134, .65)

.important::-webkit-progress-value
  background-color: rgba(185, 134, 255, .75)

.urgent::-webkit-progress-value
  background-color: rgba(255, 71, 71, 1)

TimeMachine: Time Machine status and progress

A widget for Übersicht that displays a progress meter for Time Machine.

Animations and color coding for loading status, prep procedures, progress, and post procedures.

Notes

Changing the font size of the h1 will change the size of the widget. It will scale as large or as small as you like.

The @keyframe definitions break if placed in the Stylus section, thus must be loaded in the render section as a <style> block.

Pingo: average server ping times and chart

A widget for Übersicht that Displays 10-ping average, packet loss, and chart of results over time. Packet loss turns red when over a defined threshold.

Notes

• Change the server as desired, defaults to google.com.
• Defaults to 10 pings every 5 minutes. Adjust the refresh rate and -c value in the command to alter.

Inverter

A widget for Übersicht that can be used to allow toggling between light and dark (or any two style) modes. It provides an “inverted” class that you can use in widget styling to provide a secondary appearance. Handy if you want to use Übersicht in multiple spaces with different brightness desktop images.

Here’s a YouTube video of Inverter in action, in case you’re trying to figure out if you’d actually care about this or not.

See the README on GitHub for more info on Inverter usage.

Download

The GitHub repository for all of my widgets is here.

• Support
• GitHub