using sfimage pallette rendering

[mlcampbe]

Describe the bug Is there anyway to use sfimage pallette or hierarchical rendering to change the color of the image? For example, with the sfsymbols app I can set an image to a specific color

[melonamin]

Not supported at this moment.

It probably would be a good thing, but somewhat clunky to use, probably something like this?

... | sfcolor={mode='pallette', colors=[red, yellow]}

[mlcampbe]

Yes that would work for me and don't find it too clunky at all.

[melonamin]

Ok, I’ll prototype

[theboyler]

Did this ever get implemented/trialled in a beta?

[melonamin]

You can try this build: SwiftBar.app.zip

Here is an example plugin:

#!/bin/bash

#{"renderingMode":"Palette", "colors":["red","blue"]}
echo '| sfimage=folder.badge.plus sfmulticolor=eyJyZW5kZXJpbmdNb2RlIjoiUGFsZXR0ZSIsICJjb2xvcnMiOlsicmVkIiwiYmx1ZSJdfQ=='
echo "---"
#{"renderingMode":"Hierarchical", "colors":["red","blue"]} 
echo '| sfimage=folder.badge.plus sfmulticolor=eyJyZW5kZXJpbmdNb2RlIjoiSGllcmFyY2hpY2FsIiwgImNvbG9ycyI6WyJyZWQiLCJibHVlIl19 refresh=true'

sfmulticolor is a base64 from the json describing rendering mode and colors

[mlcampbe]

The new build is working fine for me. I was able to color my battery icon differently if based on different levels. Thanks!

[mlcampbe]

It works just fine but the images seem a tad bit small compared to other icons in the system menu. Any chance you could add an imageScale to the json options as listed in https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Weights-and-scales?

[melonamin]

Updated example:

#!/bin/bash

#{"renderingMode":"Palette", "colors":["red","blue"], "scale": "large", "weight": "bold"}
echo '| sfimage=folder.badge.plus sfconfig=eyJyZW5kZXJpbmdNb2RlIjoiUGFsZXR0ZSIsICJjb2xvcnMiOlsicmVkIiwiYmx1ZSJdLCAic2NhbGUiOiAibGFyZ2UiLCAid2VpZ2h0IjogImJvbGQifQ=='
echo "---"
#{"renderingMode":"Hierarchical", "colors":["red","blue"], "scale": "small", "weight": "thin"} 
echo '| sfimage=folder.badge.plus sfconfig=eyJyZW5kZXJpbmdNb2RlIjoiSGllcmFyY2hpY2FsIiwgImNvbG9ycyI6WyJyZWQiLCJibHVlIl0sICJzY2FsZSI6ICJzbWFsbCIsICJ3ZWlnaHQiOiAidGhpbiJ9IA== refresh=true'

New build (I switched default size to Large, now it should be the same as the other icons) SwiftBar.app.zip

[mlcampbe]

Oh yes, that works great now with the default large size. Thank you so much.

[theboyler]

I've tried that using the latest build you posted here, but it doesn't seem to be working (FYI my swiftbar code is:

sfimage=calendar.badge.clock sfconfig=e3JlbmRlcmluZ01vZGU6UGFsZXR0ZSwgY29sb3JzOltncmVlbixibGFja10sIHNjYWxlOiBtZWRpdW0sIHdlaWdodDogbWVkaXVtfQ==

Can I be clear about what text needs to be base64 encoded? I've used the following:

#{"renderingMode":"Palette", "colors":["green","black"], "scale": "medium", "weight": "medium"}

but have also tried

{"renderingMode":"Palette", "colors":["green","black"], "scale": "medium", "weight": "medium"}

Neither of which have worked. Is there something else/different I should be doing instead?

[matlanz]

Hey @theboyler, it appears to be an issue with your base64 encoding.

When decoded it comes out as: {renderingMode:Palette, colors:[green,black], scale: medium, weight: medium} which is missing the quotation marks.

The encoding I got which seems to work is: eyJyZW5kZXJpbmdNb2RlIjoiUGFsZXR0ZSIsICJjb2xvcnMiOlsiZ3JlZW4iLCJibGFjayJdLCAic2NhbGUiOiAibWVkaXVtIiwgIndlaWdodCI6ICJtZWRpdW0ifQ==

How are you doing your base64 encoding?

[theboyler]

I'm using the built in encoder via Terminal. Will try the one built into Shortcuts to see if that is better.

[mlcampbe]

I used the one at https://www.base64decode.org/ and it worked for me just fine.

[matlanz]

I used terminal's base64 too. So if I had to guess, it's probably just a formatting issue on how you're calling it. Terminal is parsing your quoted text, instead of keeping the " characters. Try wrapping the whole thing in single quotes: '{"renderingMode":"Palette", "colors":["green","black"], "scale": "medium", "weight": "medium"}'

The complete command would be: echo -n '{"renderingMode":"Palette", "colors":["green","black"], "scale": "medium", "weight": "medium"}' | base64

[theboyler]

That worked - thanks!

[theboyler]

Two related issues, which are more requests than bugs:

1) When the SF icon's colour is set by the base64 encoded instructions, the colour can suddenly not match; I make an image for the top level which is black, and matches the text, then the desktop wallpaper changes, the OS determines whether the screen in that area is lighter of darker, and changes the menubar text colour to white or black. Do you know a way to identify the colour of the menu bar text, so I can set the SF image programatically, so it matches the menu bar text colour?

2) I've one element of my menu which shows battery strength using palette colours; however, instead of showing my laptop first, then the power % and then the battery icon, it shows the palette coloured icon first. The alternative is to have the SF image monochrome and change from green to red depending on battery power, but it would be neater to be able to not have to have the palette icon as the icon on the left of each line of the menubar dropdown.

[mlcampbe]

Two related issues, which are more requests than bugs:

1. When the SF icon's colour is set by the base64 encoded instructions, the colour can suddenly not match; I make an image for the top level which is black, and matches the text, then the desktop wallpaper changes, the OS determines whether the screen in that area is lighter of darker, and changes the menubar text colour to white or black. Do you know a way to identify the colour of the menu bar text, so I can set the SF image programatically, so it matches the menu bar text colour?
2. I've one element of my menu which shows battery strength using palette colours; however, instead of showing my laptop first, then the power % and then the battery icon, it shows the palette coloured icon first. The alternative is to have the SF image monochrome and change from green to red depending on battery power, but it would be neater to be able to not have to have the palette icon as the icon on the left of each line of the menubar dropdown.

I can't help you with your questions but that is a pretty cool script you have running there. Would you want to share it with the world perhaps?

[theboyler]

It's a pretty large applescript which interacts with a series of command line apps and a purpose-built shortcut runner via applescript (to avoid so it's really difficult to replicate the functionality outside of my environment - happy to share though; what's the best way?

[mlcampbe]

Can you share it through a google drive link perhaps?

[bilal-fazlani]

{"renderingMode":"Palette", "colors":["green","black"], "scale": "medium", "weight": "medium"}

this API is cool!

I want to be able to specify scale and weight and also go with primary color. How do I do that?

[peanball]

@bilal-fazlani, scale and weight should be independent of rendering mode. You can find all the docs about SF Symbols here: https://developer.apple.com/design/human-interface-guidelines/sf-symbols#Rendering-modes