Menu Bar - Button on Click

Any suggestions on how to implement a button that changes colors or logos on click in the menu bar. Not the notch bar, just the menu bar. I have an icon in the menu bar that when clicked will turn on a specific preset that I have which contains all my snap areas and window alignments so when I'm connected to my big monitor I can have them. But it's hard to tell when I click the menu bar icon and even harder to know which state is active because the menu bar icon is always the same. Anyone know a way you could do this. I know some javascript, but don't think that works outside browsers? Any help would be greatly appreciated!

1 Like

Here is an example. This would update the text, color and icon when clicking the item. It would toggle between the text "on" and "off" (Icon change requires the latest BTT alpha due to a bug I just discovered).

You need to replace the UUID with the UUID of your menubar item, you can get that by right-clicking your item in the BTT configuration.

(async ()=> {

let isOn = await callBTT('get_number_variable', {variable_name:'isButtonOn'})


var offJSON = {uuid: '2DE6D5F2-5FCF-495C-8E94-64E7DFB109AD',
    "text" : "Off",
	"sf_symbol_name": "bolt.slash.circle.fill",
	"background_color": "200,50,100,255"
}

var onJSON = {uuid: '2DE6D5F2-5FCF-495C-8E94-64E7DFB109AD',
    "text" : "ON",
	"sf_symbol_name": "bolt.circle.fill",
	"background_color": "50,200,100,255"
}

if(isOn === 1) {
 await callBTT('update_menubar_item', offJSON);
 await callBTT('set_number_variable', {variable_name:'isButtonOn', to: 0});

} else {
 await callBTT('update_menubar_item', onJSON);
 await callBTT('set_number_variable', {variable_name:'isButtonOn', to: 1});

}

returnToBTT('done');

})();
1 Like

Thanks! This works great. I notice that the icon colour is black after changing it (where as my other icons in Monterey are white), but then changes to white after a few seconds. But I can live with that.

Interesting, are you running the latest BTT?

Ah, that was the problem. It's fine with the current alpha.

Is there any way to set the icon height via javascript? I've tried adding this to the json but it didn't work

"BTTTouchBarItemIconHeight": "23"

It can be done, but in a different way:

(async ()=> {

var updateDefinition = JSON.stringify({"BTTTriggerConfig": {
  "BTTTouchBarItemIconHeight" : 23
}});

callBTT('update_trigger', {uuid: 'ED631459-115C-4D8C-940A-D428E4EAE086',json: updateDefinition});

returnToBTT('done');

})();

Love this! Is there any way to also set the SF Symbol's weight?

Where is the documentation for these menubar_item JSON elements? I'd like to adjust the SF Symbol weight if possible... and order? Can the icon come after the text?

1 Like