Colorised output doesn't work in xbar

[AleksandrLiadov]

Try to use plugin for xbar(v.2.0.42-beta).
Catolina 10.15.7.
Interpretator ZSH.
Instead of number 5 blue (5th desktop), I have : [0;37m 1 2 3 4 [0;34m 5 [0;37m 6
When I run the script in terminal, the output is colorised.

[SxC97]

Ok, I couldn't replicate the issue on my Big Sur machine but I’m familiar with the issue.

This plugin was originally written for BitBar and was later rewritten for SwiftBar when BitBar seemed like a dead project. I think going back to an older version of the script should fix this issue.

Open yabai.1d.sh and go down to lines #47 to #55. They should look like this:

BLACK='\033[0;30m'
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[0;33m'
BLUE='\033[0;34m'
MAGENTA='\033[0;35m'
CYAN='\033[0;36m'
WHITE='\033[0;37m'
RESET='\033[m'

Add 2 more backslashes to the beginning each color code like so:

BLACK='\\\033[0;30m'
RED='\\\033[0;31m'
GREEN='\\\033[0;32m'
YELLOW='\\\033[0;33m'
BLUE='\\\033[0;34m'
MAGENTA='\\\033[0;35m'
CYAN='\\\033[0;36m'
WHITE='\\\033[0;37m'
RESET='\\\033[m'

Refresh the plugin and let me know if that fixes it.

Swiftbar and Bitbar/Xbar both handle escaping color codes differently. I’ll put out an update to address this later today if this fix works.

[AleksandrLiadov]

Thanks for your answer!
Unfortunately it doesn't work:
Instead of number 5 blue (5th desktop), I have : [0;37m 1 2 3 4 [0;34m 5 [0;37m 6

[SxC97]

After a little debugging, I can reproduce this issue. It looks like the way that xbar handles color codes has changed again and most other scripts are using the built in color parameter. Unfortunately, this won’t work for our use case since the color param applies to the entire string. I’ll open an issue on the xbar repo.

In the mean time, I recommend using SELECTLEFT and SELECTRIGHT to identify the current space (see wiki) or if you really want colorized output to work, switch to Swiftbar while I try to work out this issue.

[SxC97]

Looks like xbar doesn’t support xterm-256 colors.

The only way to get this to work is to ask the xBar team to add support.

I don’t think theres anything else I can do at this point :(

[SxC97]

Good news! Looks like colorized output was added in a recent pull request, it will be included in the next beta release. If you want the feature now, you can alway try compiling and running the latest version of xbar.

I’m going to wait until the next official release to test Yabai-Spaces, but looking at the test code, the script should work out of the box with no additional changes necessary and it should be completely cross compatible with swiftbar! 🎉🎉

[AleksandrLiadov]

Thanks for your help.
I tried to switch to Swiftbar, but the same problem without colorized output.

[SxC97]

Hmm, thats surprising.

Do you mind removing the current version of the plugin from your swiftbar folder and installing the latest release (v1.5) of the plugin instead.

If that doesn’t fix it, can you share what settings you used to configure the plugin and a screenshot of what the menubar looks like?

[soulflyer]

Hi, I'm seeing the same symptoms using the plugin with swiftbar. Colors work fine if I run the script in the terminal. swiftbar tells me the script version is 1.0, but it was copied and pasted from here today (16th Nov 21). Yabai and swiftbar are also fresh installs via brew. This is on an m1 mac.

[SxC97]

Looks like the script version was my bad 😅 , I simply forgot to update the version number in the header. Also, did you try the steps mentioned above?

Can you share what settings you used to configure the plugin and a screenshot of what the menubar looks like?

Also, I’m currently on an Intel Mac, so if this is an m1 specific issue, I might not be able to address it until I get my m1 MBP sometime early next year.

[soulflyer]

and the run in terminal version:

Yes I tried the steps mentioned above. Looks like its a change in the way OSX handles text?

[soulflyer]

Here's the first part of the sh file, with the settings:

#!/bin/zsh

# <bitbar.title>Yabai-Spaces</bitbar.title>
# <bitbar.version>v1.0</bitbar.version>
# <bitbar.author>Shrey Choudhary</bitbar.author>
# <bitbar.author.github>SxC97</bitbar.author.github>
# <bitbar.desc>Plugin that displays total number of spaces and highlights the current space.</bitbar.desc>
# <bitbar.dependencies>brew,yabai,skhd,jq,zsh</bitbar.dependencies>

# Info about yabai, see: https://github.com/koekeishiya/yabai
# For skhd, see: https://github.com/koekeishiya/skhd
# Although very little of the original code remains, this plugin was inspired by James Won's "yabai/skhd helper" https://getbitbar.com/plugins/Tools/yabai_skhd.1s.sh

# Sets unicode encoding to UTF-8. Fixes issues with displaying *many* but not *all* unicode charecters.
export LANG="es_ES.UTF-8"

# Exports the plugin to your $PATH to allow execution. Make sure you run `chmod +x yabai.1d.sh` after downloading
export PATH=~/.swiftbar:$PATH

# Stops yabai and skhd
if [[ "$1" = "stop" ]]; then
    brew services stop yabai
    brew services stop skhd
fi

# Restarts yabai and skhd
if [[ "$1" = "restart" ]]; then
    brew services restart yabai
    brew services restart skhd
fi

# Opens your .yabairc file in VSCode if you have the CLI tools installed. Make sure to change path to your file if needed. See https://code.visualstudio.com/docs/editor/command-line

if [[ "$1" = "editY" ]]; then
    emacsclient ~/.yabairc &
fi
# Opens your .shkdrc file in VSCode
if [[ "$1" = "editS" ]]; then
    emacsclient ~/.skhdrc &
fi
# Opens this file in VSCode
if [[ "$1" = "editBB" ]]; then
    emacsclient ~/.swiftbar/yabai.*.sh &
fi

# Avaliable colors and their associated ANSI color codes. Don't change your color here unless you know what you're doing!
BLACK='\033[0;30m'
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[0;33m'
BLUE='\033[0;34m'
MAGENTA='\033[0;35m'
CYAN='\033[0;36m'
WHITE='\033[0;37m'
RESET='\033[m'

# Change your color here to one of the options above! $COLOR will be the color of the current space.
# $DEFAULT will be the color of the other spaces

COLOR=$GREEN
DEFAULT=$WHITE

# Change your icons here! $LEFT and $RIGHT refer to the icons on either end of the bar and $DIV refers to the icon between spaces.
# e.x. if $LEFT='\〈', $RIGHT='\〉', and $DIV='|', your bar would look like this ⟨ ｜ ⟩.
# NOTE: the pipe '｜' is not a valid charecter as it is reserved by Bitbar. Use "vertical line" or "vertical bar" instead.
# List of all Unicode charecters can be found here: https://unicode-table.com/en/
# P.S. Check out the "Math" and "Misc" sections for cool and unique symbols to use!ˈ

LEFT=''
RIGHT=''
DIV=' '
SELECTLEFT='*'
SELECTRIGHT='*'

# Change your font here! Make sure you only change the stuff on the right of the '='. You can get the exact name of your font from the FontBook application on MacOS.
# A monowidth font (such as FuraCode) is recomended. Ligatures are a plus!

FONT=' | font=FiraMono Nerd Font Regular | trim=true | size=14'

# Change your space indicies here! Add a space between the indicies if you would like padding.
# Feel free to use this as a template and increase the $SPACES array as you see fit. 
# Make sure you add '' around your elements
# example: SPACES=('I' 'II' 'III' 'IV' 'V' 'VI' 'VII' 'VIII' 'IX' 'X' 'XI' 'XII' 'XIII' 'XIV' 'XV' 'XVI') will give you roman neumerals up to 16 spaces.
SPACES=('I' 'II' 'III' 'IV' 'V' 'VI' 'VII' 'VIII' 'IX' 'X' 'XI' 'XII' 'XIII' 'XIV' 'XV' 'XVI')
# SPACES=('•' '•' '•' '•' '•' '•' '•' '•' '•' '•' '•' '•' '•' '•' '•' '•')

# Choose your style. Options "NUMBER" and "CUSTOM".
# NUMBER uses arabic neumerals e.g. 1, 2, 3, etc...
# CUSTOM uses your array elements from SPACES. e.g. I, II, III, etc...

STYLE="CUSTOM"

# Choose weather or not you want to see the type of the current space. i.e. BSP, STACK, or FLOAT
# Options, `true` or `false`

SPACETYPE=true
BSP="◇"
STACK="◆"
FLOAT="◈"
SPACELEFT=" "
SPACERIGHT=" "

# Choose weather or not you want to see the type of the window. i.e. floating or managed
# Options, `true` or `false`

WINTYPE=true
WINFLOAT="⦿"
WINMANAGED="⦾"
WINLEFT=" "
WINRIGHT=" "

# Set left and right separators for displays
DISPLAYLEFT=" "
DISPLAYRIGHT=" "

[SxC97]

Hmm, looks like it’s not properly escaping the color codes. Can you try adding a backslash before the color codes? e.g:

# Avaliable colors and their associated ANSI color codes. Don't change your color here unless you know what you're doing!
BLACK='\\033[0;30m'
RED='\\033[0;31m'
GREEN='\\033[0;32m'
YELLOW='\\033[0;33m'
BLUE='\\033[0;34m'
MAGENTA='\\033[0;35m'
CYAN='\\033[0;36m'
WHITE='\\033[0;37m'
RESET='\\033[m'

I just upgraded to Monterey and am currently beta testing yabai v4. Since it has breaking changes, I will have to update the plugin to support v4 users.

[soulflyer]

Just tried it with double backslashes, no difference :-(

[SxC97]

Ok, do you mind answering a few questions for me? What version of yabai are you running, what version of MacOS are you running, and can you post a screenshot of what the plugin looks like when you run it with double backslashes?

[soulflyer]

yabai-v3.3.10

MacOS Version 11.6

[gkzhb]

I encountered the same problem of no coloring text in swiftbar. It seems we need to add ansi=true param for swiftbar. For example,

#!/usr/bin/env zsh
echo -e "\033[31mHello\e[0m World | ansi=true"

The result should be like

[soulflyer]

thanks @gkzhb ! That did it. Changing line 191 of yabai.1d.sh to the following fixes it:

echo "$FINAL| ansi=true"