All Projects → Jean-Tinland → Simple Bar

Jean-Tinland / Simple Bar

Licence: mit
A yabai status bar widget for Übersicht

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Simple Bar

Tailor
An OS X status bar app to quickly check for new releases at Xcodereleases.com
Stars: ✭ 104 (-56.85%)
Mutual labels:  statusbar
Bpstatusbaralert
BPStatusBarAlert is a library that allows you to easily make text-based alert that appear on the status bar and below navigation bar.
Stars: ✭ 129 (-46.47%)
Mutual labels:  statusbar
Luastatus
universal status bar content generator
Stars: ✭ 195 (-19.09%)
Mutual labels:  statusbar
Systemuihelper
Helper for dealing with Android System UI visibility
Stars: ✭ 108 (-55.19%)
Mutual labels:  statusbar
Allkdic
올ㅋ사전 - 맥에서 단축키를 누르면 영어사전이 뙇!!!!
Stars: ✭ 120 (-50.21%)
Mutual labels:  statusbar
Macos Menubar Wireguard
macOS menubar icon for WireGuard/wg-quick
Stars: ✭ 144 (-40.25%)
Mutual labels:  statusbar
Sofia
Android沉浸式效果的实现,状态栏和导航栏均支持设置颜色、渐变色、图片、透明度、内容入侵和状态栏深色字体;兼容竖屏、横屏,当屏幕旋转时会自动适配。
Stars: ✭ 1,206 (+400.41%)
Mutual labels:  statusbar
React Native Statusbar Alert
A status bar alert (e.g. in-call, recording, navigating) for React Native
Stars: ✭ 221 (-8.3%)
Mutual labels:  statusbar
Nibar
Simple Übersicht status bar with yabai support.
Stars: ✭ 127 (-47.3%)
Mutual labels:  statusbar
Dwm Bar
A modular statusbar for dwm
Stars: ✭ 171 (-29.05%)
Mutual labels:  statusbar
Status
A no-root status bar replacement for Android.
Stars: ✭ 113 (-53.11%)
Mutual labels:  statusbar
Edge To Edge
Full screen Android apps using simple Kotlin DSL
Stars: ✭ 118 (-51.04%)
Mutual labels:  statusbar
Chinese Lunar Calendar For Mac
Chinese Lunar Calendar for Mac
Stars: ✭ 150 (-37.76%)
Mutual labels:  statusbar
Spinner
Go (golang) package with 90 configurable terminal spinner/progress indicators.
Stars: ✭ 1,637 (+579.25%)
Mutual labels:  statusbar
Flutter statusbarcolor
A package can help you to change your flutter app's statusbar's color or navigationbar's color programmatically.
Stars: ✭ 203 (-15.77%)
Mutual labels:  statusbar
Immersionbar
android 4.4以上沉浸式状态栏和沉浸式导航栏管理,适配横竖屏切换、刘海屏、软键盘弹出等问题,可以修改状态栏字体颜色和导航栏图标颜色,以及不可修改字体颜色手机的适配,适用于Activity、Fragment、DialogFragment、Dialog,PopupWindow,一句代码轻松实现,以及对bar的其他设置,详见README。简书请参考:http://www.jianshu.com/p/2a884e211a62
Stars: ✭ 10,030 (+4061.83%)
Mutual labels:  statusbar
Syncthing Bar
A statusbar for syncthing on Mac OS X
Stars: ✭ 133 (-44.81%)
Mutual labels:  statusbar
Ccnstatusitem
CCNStatusItem is a subclass of NSObject to act as a custom view for NSStatusItem. It supports a customizable statusItemWindow handling any viewController for presenting the content.
Stars: ✭ 223 (-7.47%)
Mutual labels:  statusbar
Statusbaralert
Telegram X inspired android status bar alert view
Stars: ✭ 214 (-11.2%)
Mutual labels:  statusbar
Airpodsbattery Monitor For Mac
Simple Widget to display your AirPods battery levels from the Mac Status bar
Stars: ✭ 165 (-31.54%)
Mutual labels:  statusbar

simple-bar

A yabai status bar widget for Übersicht inspired by nibar, yabar and this reddit post. Visit simple-bar website here.

Developed by Jean Tinland

Table of content

Features

  • 3 themes (dark/light/auto)(*)
  • Multiple layout options (not sticky to top, no background, etc... Try it out in settings)(**)
  • Display workspace number & current space
  • Navigate to workspace on click
  • For each space display an icon for every opened app (you can exclude specific apps in settings)
  • Show current app name & title
  • Settings module (enable/disable each individual widget: see list below - switch dark/light theme)(**)
  • Spotify, Music/iTunes, browser current track
  • Battery, microphone, sound level, wifi, date, time widgets
  • Weather & keyboard language input widgets (disabled by default)(***)
  • Only with SIP disabled: create new workspace on "+" click, move or destroy workspace on space hover

(*) Unfortunatly not so "auto" anymore. You'll need to manually refresh simple-bar when system theme switch its own theme.
(**) Settings can be opened by pressing cmd + , after cliking on simple-bar widget. More details in Settings section.
(***) You'll be prompted to let Übersicht use you geolocation.

Compatibility & requirements

In order to make this custom bar work, you'll need to install both yabai and Übersicht, both of them must be up to date.
Becareful, for Big Sur users, some actions must be taken in order to make yabai fully operational: see here for more details.
simple-bar has been tested and is working on both Catalina & Big Sur. You'll need a screen with a size of 13" at least and with your screen resolution scaled on "More space" setting.
On the first simple-bar execution, an alert should pop on your screen saying that Übersicht want access your browser control (only the first time you launch your favorite browser with simple-bar opened). It is required to agree to this in order to make the CurrentTrack widget work.

Preview

img

You'll find more information & images on simple-bar website.

Installation

Clone this repo to your Übersicht widgets directory with the following command.

$ git clone https://github.com/Jean-Tinland/simple-bar $HOME/Library/Application\ Support/Übersicht/widgets/simple-bar

JetBrains Mono is used by default. You can set your own font in the "Global" settings tab.

For users with a custom yabai install (path)

There is a setting in the settings module allowing a custom yabai path.

Usage

After cloning the project, simply activate all three simple-bar widgets in Übersicht's widgets list.

  • simple-bar-process-jsx
  • simple-bar-spaces-jsx
  • simple-bar-data-jsx

Settings

As explained at the begining of this README file, Settings can be opened by pressing cmd + , after cliking on simple-bar widget. You may want to click at the top center of the screen, where the process name of the current app is displayed in order to easily get focus on simple-bar before pressing cmd + ,.

In this settings module you'll find all the customization options available from layout to specific widgets show/hide toggle.

Clickable elements

Some elements of simple-bar are interactives :

  • Toggle caffeinate mode on battery widget click (prevent your mac to sleep while activate)
  • Toggle wifi on/off on wifi widget click
  • Toggle microphone on microphone widget click
  • Play/pause Spotify current song on Spotify widget click
  • Play/pause Music/iTunes current song on Music widget click
  • Open Calendar app on date widget click
  • Remove, move spaces on space hover (1s delay / instant while cmd key is pressed) (Only with SIP disabled)
  • Add space on "plus" button click (Only with SIP disabled)

Refresh bar on app or workspace change

The widget for displaying yabai workspaces and process aren't refreshing automatically or with a delay.
To refresh them on space or display change, you can add these lines utilizing yabai's signals at the end of .yabairc:

# Refresh spaces widget on space change
yabai -m signal --add event=space_changed action="osascript -e 'tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-spaces-jsx\"'"
# Refresh spaces widget on display focus change
yabai -m signal --add event=display_changed action="osascript -e 'tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-spaces-jsx\"'"
# Refresh spaces widget on window resize
yabai -m signal --add event=window_resized action="osascript -e 'tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-spaces-jsx\"'"
# Refresh process widget on space change
yabai -m signal --add event=space_changed action="osascript -e 'tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-process-jsx\"'"

# Refresh process widget on when focused application changes
yabai -m signal --add event=window_focused action="osascript -e 'tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-process-jsx\"'"
# Refresh spaces widget on when focused application changes
yabai -m signal --add event=window_focused action="osascript -e 'tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-spaces-jsx\"'"

# Refresh process widget on when focused application changes
yabai -m signal --add event=application_front_switched action="osascript -e 'tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-process-jsx\"'"
# Refresh spaces widget on when focused application changes
yabai -m signal --add event=application_front_switched action="osascript -e 'tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-spaces-jsx\"'"

# Refresh process widget on when an application window is closed
yabai -m signal --add event=window_destroyed action="osascript -e 'tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-process-jsx\"'"
# Refresh spaces widget on when an application window is closed
yabai -m signal --add event=window_destroyed action="osascript -e 'tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-spaces-jsx\"'"

# Refresh process widget when current window title changes
yabai -m signal --add event=window_title_changed action="osascript -e 'tell application id \"tracesOf.Uebersicht\" to refresh widget id \"simple-bar-process-jsx\"'"

Customization

Colors & theme

If you want to customize the colors, shadow & fonts used you can simply edit the simple-bar > lib > styles > Theme.js and put your settings in it.

export const Theme = {
  main: '#1B222D',
  minor: '#39465E',
  accent: '#FFD484',
  red: '#E78482',
  green: '#8FC8BB',
  yellow: '#FFD484',
  blue: '#6DB3CE',
  magenta: '#AD82CB',
  cyan: '#7EDDDE',
  background: '#1B222D',
  lightGrey: 'rgba(0, 0, 0, 0.05)',
  font: 'JetBrains Mono, monospace',
  lightShadow: '0 5px 10px rgba(0, 0, 0, 0.24)',
  mediumShadow: '0 8px 30px rgba(0, 0, 0, 0.24)',
  largeShadow: '0 30px 60px rgba(0, 0, 0, 0.24)',
  easing: 'cubic-bezier(0.4, 0, 0.2, 1)'
}

Pywal

To use pywal colors instead, run the pywal-gen.sh script in simple-bar > lib > styles, then edit simple-bar > lib > styles > Theme.js to use ThemePywal.js instead. This should be done after running pywal.
As I am not using this myself, I may have missed some problems, feel free to open an issue about it anytime.

Icons

Now to add new icons you'll need to get a .svg with a 0 0 24 24 viewBox. Then you can simply add it to the simple-bar > lib > components > Icons.jsx:

export const Caprine = (props) => (
  <Icon {...props}>
    <path d="M12 0C5.37 0 0 4.97 0 11.11c0 3.5 1.74 6.62 4.47 8.65V24l4.09-2.24c1.09.3 2.24.46 3.44.46 6.63 0 12-4.97 12-11.1C24 4.97 18.63 0 12 0zm1.2 14.96l-3.06-3.26-5.97 3.26L10.73 8l3.13 3.26L19.76 8l-6.57 6.96z" />
  </Icon>
)

To link it to a process you'll need to get the Yabai process name and make the association in simple-bar > lib > data.js :

import {
  AndroidMessages,
  Caprine,
  Code,
  Default,
  Figma,
  GoogleChrome,
  Music,
  SequelPro,
  Skype,
  Slack,
  Zeplin
} from './components/Icons.jsx'

export const appIcons = {
  'Android Messages': AndroidMessages,
  Caprine: Caprine,
  Code: Code,
  Default: Default,
  Figma: Figma,
  'Google Chrome': GoogleChrome,
  Music: Music,
  'Sequel Pro': SequelPro,
  Skype: Skype,
  Slack: Slack,
  Zeplin: Zeplin
}

As you can see if there is no icon defined for a running process, there is a default one which will be used as fallback.

Override default styles

You'll find a CustomStyles.js file in simple-bar/lib/styles/. You can simply add your styles here. As it is loaded after all the other styles this will naturally override the default styles.
You can use the Übersicht debug console in order to inspect the widgets composing simple-bar and get the class names you need to override.

Special thanks

  • Pywal integration was added thanks to Amar Paul.
  • Wifi toggle on click also added thanks to Amar Paul.
  • Spotify current track & play/pause toggle on click added thanks to jamieweavis
  • Large selection of icons added thanks to jamieweavis, MikoMagni and anujc4
  • Microphone mute & unmute added thanks to izifortune
  • A way better multiple display behaviour & handling added thanks to theshortcut
  • Everyone opening issues that are helping me improve this little project
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].