Floating Menu w/ content script text formating issue

[ar-rhc]

Hi Team,

I am trying to customize the Example Floating Menu App Switcher from here

Couple questions I have:

1. I wonder if there is a way to make the texts align left? As in my code ::align@@left is not working.
2. :width@@40 also doesn't work. to change the icon size.
3. Is there a way to change hover color for the menus?

The code I'm using is:

async function retrieveJSON() {
    let apps = await BTTActions.copyLaunchedApplicationsInFrontToBackOrder();
    let menuItems = [];
    let i = 0;
    for (let app of apps) {
        if (i > 20) break;
        i++;
        let item = {

            title: `${app.CFBundleName}::size@@14::color@@#ffffff::align@@left`,
			BTTMenuItemBackgroundColor: "55,55,55,255",
            icon: `path::${app.AppIconPath}::width@@40`,
            action: `js::(async () => {runShellScript({script: 'open "${app.BundlePath}"'})})()`,
        };
        menuItems.push(item);
    }
    return JSON.stringify(menuItems);
}

Thanks in advance.

[zebullon2976]

Hi, did you try with BTTMenuItemText instead of "title" ?

[Andreas_Hegenberg]

ah there is currently indeed a bug with the icon width / size in this scenario as it is overridden by the floating menu defaults, I'll look into this.

However in general for floating menus the best way (that also works now) is to create a template item in the UI and configure it to your needs. Then disable it and reference it by its UUID. Here is an example:

You can then reference that template item like this (get the UUID of the item by right-clicking it)

async function retrieveJSON() {
    let apps = await BTTActions.copyLaunchedApplicationsInFrontToBackOrder();
    let menuItems = [];
    let i = 0;
    for (let app of apps) {
        if (i > 20) break;
        i++;
        let item = {
            templateItemUUID: "482BD0C7-80E9-4122-A276-81B7552CA9D9",
            BTTMenuItemText: `${app.CFBundleName}`,
            BTTMenuItemBackgroundColorHover : "110.000001, 193.000004, 56.000000, 255.000000",
            icon: `path::${app.AppIconPath}`,
            action: `js::(async () => {runShellScript({script: 'open "${app.BundlePath}"'})})()`,
        };
        menuItems.push(item);
    }
    return JSON.stringify(menuItems);
}

the title attributed doesn't support align yet, I think it would be a good idea to add that., However for floating menus there is a good way to workaround that like @zebullon2976 mentioned you can use BTTMenuItemText which will make it use the formatting you defined in your template item.

In general you can provide any of the properties a floating menu item supports in the script, so you can also add things like ** BTTMenuItemBackgroundColorHover** to change the hover color.

After changing the properties in the template item you might need to switch between apps, otherwise it might return the last cached version.

"BTTMenuItemBackgroundColorHover" : "110.000001, 193.000004, 56.000000, 255.000000",

Here is an example preset:

template.bttpreset (27.4 KB)

[ar-rhc]

Lovely! I wasn't aware you could set the template like that! Makes things a lot easier.

[zebullon2976]

Thank you @Andreas_Hegenberg . By the way, is there any way to force floating menu to update its menu item contents instead of using last cache ? It's because I run a JS function to update icons and positions of menu items when current active app changes. But as all floating menu items are updated, the floating menu don't show updated properties (like item position, icons and so on...)