Dynamic Text Change Based on Hover

I'm sure this is possible within the javascript scripting, but I've been unable to figure out how to do it. I'm trying to make the center text of this radial menu change based on the currently hovered item in the menu.

For example, when I hover over the top item named "Drop" it changes the center text to "Drop". But preferably dynamically so if I change one button or add more buttons, it passes the script on through.

Is this possible? Thanks so much!

menuTest.bttpreset (263.8 KB)

I was able to figure out how to do it by manually putting the hovered item name into the javascript, but is there a way to dynamically pull either the currently hovered menu item or the item name of the current trigger?

Also when the text changes it, it doesn't retain the font/sizing of the originally selected text. How do I retain that?

menuTest_v2.bttpreset (278.1 KB)

currently not, but it's a good idea and this kind of stuff will soon become easier when floating menus start to support variables that are updated automatically.

Currently you could maybe define the complete menu contents via script (Simple JSON Format · GitBook ):

example.bttpreset (83.2 KB)

async function retrieveJSON() {

    let dropItem = {
        templateItemUUID: "C3870798-5E6D-4551-9B42-377556D76BC8",
        actions: getHoverActionsWithName("drop"),
        title: "",
        icon: `sfsymbol::drop.fill::width@@40`
    };


    let circleItem = {
        templateItemUUID: "C3870798-5E6D-4551-9B42-377556D76BC8",
        actions: getHoverActionsWithName("circle"),
        title: "",
        icon: `sfsymbol::circle.circle.fill::width@@40`
    };

    let plusItem = {
        templateItemUUID: "C3870798-5E6D-4551-9B42-377556D76BC8",
        title: "",
        actions: getHoverActionsWithName("plus"),
        icon: `sfsymbol::plus.circle.fill::width@@40`
    };

    let shortcutsItem = {
        templateItemUUID: "C3870798-5E6D-4551-9B42-377556D76BC8",
        title: "",
        actions: getHoverActionsWithName("stack"),
        icon: `sfsymbol::square.2.stack.3d::width@@40`
    };



    let allItems = [dropItem, circleItem, plusItem, shortcutsItem];
    return JSON.stringify(allItems);
}

function getHoverActionsWithName(newText) {
    let updateUUID = "63A34BC7-7AAF-44B7-BAB2-EE80DB5E73E2"
    return {
        hover: {
            js: `
				(async () => {
				    setTimeout( async () => {
						let update= JSON.stringify({"BTTMenuItemText": "${newText}"});
						await update_menu_item({
        					item_uuid: "${updateUUID}", 
        					json: update
					 	})
						}, 10
					 );
					 
					 
				})();
			
				`
        },
		 hoverend: {
            js: `
				(async () => {
					let update= JSON.stringify({"BTTMenuItemText": ""});
					await update_menu_item({
        				item_uuid: "${updateUUID}", 
        				json: update
					 })
				})();
			
				`
        }
       
    }

}

That makes sense. Well I'm excited for that update when you do add it! In the meantime I can deal with manually adding all the titles/etc.

How come when I use this it changes the font and font size of the displayed text as opposed to retaining the format?

(async ()=> {

const name = {"BTTMenuItemText": "Circle"};

await update_menu_item({
	"item_uuid": "63A34BC7-7AAF-44B7-BAB2-EE80DB5E73E2", 
	"json": JSON.stringify(name)})

returnToBTT('update_menu_item');
})()

ah that is because setting an empty string also causes the fromatting to be gone (because an empty string doesn't have any).
You can fix it by setting a space instead in hoverend:

{"BTTMenuItemText": " "}

Updated content retrieval script:

async function retrieveJSON() {

  
    let dropItem = getItem("drop", "drop");
    let circleItem = getItem("circle.circle.fill", "circle");
    let plusItem = getItem("plus.circle.fill", "plus");
    let shortcutsItem = getItem("square.2.stack.3d", "stack");
    // add more items...


    let allItems = [dropItem, circleItem, plusItem, shortcutsItem];
    return JSON.stringify(allItems);
}

function getItem(sfsymbol, itemName) {
 return {
        templateItemUUID: "C3870798-5E6D-4551-9B42-377556D76BC8",
        title: "",
        actions: getHoverActionsWithName(itemName),
        icon: `sfsymbol::${sfsymbol}::width@@40`
    };

}

function getHoverActionsWithName(newText) {
    let updateUUID = "63A34BC7-7AAF-44B7-BAB2-EE80DB5E73E2"
    return {
        hover: {
            js: `
				(async () => {
				    setTimeout( async () => {
						let update= JSON.stringify({"BTTMenuItemText": "${newText}"});
						await update_menu_item({
        					item_uuid: "${updateUUID}", 
        					json: update
					 	})
						}, 10
					 );
					 
					 
				})();
			
				`
        },
		 hoverend: {
            js: `
				(async () => {
					let update= JSON.stringify({"BTTMenuItemText": " "});
					await update_menu_item({
        				item_uuid: "${updateUUID}", 
        				json: update
					 })
				})();
			
				`
        }
       
    }

}