How to dynamically change a floating menu size and position on every call?

Hi Andreas and the BTT community!

This is my first post on here, but I’ve been following along the forum for a while now.

My main goal is to recreate some of the features of apps like Swish and Multitouch directly within BTT. I’m mostly doing it for fun, but also because BTT has a ton of build in customizations and gesture triggers that the others don’t. I’m halfway there, but I’m stuck on one specific feature Swish has: "Live Tooltips." Basically, they provide snapping previews through an overlay that blurs the background to show the position the window will have once snapped. It can be useful for visual feedback.

I have managed to build a working prototype using HUD overlays and the "Variable Value Did Change" automation, as seen in the video. It works, but it’s a bit clunky. I really want to migrate this logic to a Floating Menu. I think this would allow for much better customization and maybe it would also make the setup more easily shareable and not so hardcoded with my own screen dimensions/HUD’s internal margins. Unfortunately, I cannot figure out how to dynamically change the position and size of a Floating Menu on every "call" or trigger, and creating a separate menu for every single possible window configuration feels inefficient.

In case I haven’t explained this clearly, or if anyone has suggestions on how the whole system could be improved, let me share how it looks right now, including what I have going on with the HUD overlays:

Swipe Gestures.bttpresetzip (16.2 KB)

Thanks in advance!

I will post an example later! this would also be good to add to the documentation.

Possibly for your usecase completely dynamically generated floating menus make sense. Here is a quick example. You can get any floating menu property by copying a existing floating menu into a text editor.

async function showMenu() {
  let items = [
  {"title": "Test Item",  "BTTMenuItemBackgroundColor" : "0, 0, 0, 0",}
  ];
   
   let container = {
   	type: "floatingmenu", //other allowed values: contextmenu, floatingmenu, searchablelist
	  items: items,
    // for floating menus you can extend the container definition by adding any floating menu properties. For example:
    "BTTMenuItemBackgroundColor" : "255.000000, 45.000001, 33.000002, 100.000000",
    "BTTMenuFrameMaxWidth" : 800,
    "BTTMenuFrameMaxHeight" : 1400,
    "BTTMenuFrameWidth" : 800,
    "BTTMenuFrameHeight" : 1400,
	
	// this defines "top left corner of menu positioned at top left corner of focused screen
    "BTTMenuAnchorRelation" : 0,
    "BTTMenuPositionRelativeTo" : 3,
    "BTTMenuAnchorMenu" : 0,
    "BTTMenuPositioningType" : 1
   };

   
	return JSON.stringify(container);
}

Thank you! I had previously come across the "Show Simple JSON Format Menu" documentation, but I couldn’t figure out how to add specific configurations for just the item (to make it invisible) rather than the entire container. It’s so simple!

Maybe this is a silly question, but how can I hide this menu on command? Since it doesn’t have a UUID or name. I know I can configure it to hide on click or keyboard input, but the ideal solution would be for it to automatically disappear after the window is locked in place.

You can give it an identifier via BTTMenuElementIdentifier:

async function showMenu() {
  let items = [
  {"title": "Test Item",  "BTTMenuItemBackgroundColor" : "0, 0, 0, 0",}
  ];
   
   let container = {
   	type: "floatingmenu", //other allowed values: contextmenu, floatingmenu, searchablelist
	  items: items,
    // for floating menus you can extend the container definition by adding any floating menu properties. For example:
    "BTTMenuItemBackgroundColor" : "255.000000, 45.000001, 33.000002, 100.000000",
    "BTTMenuElementIdentifier": "EXAMPLE-IDENTIFIER",
    "BTTMenuFrameMaxWidth" : 800,
    "BTTMenuFrameMaxHeight" : 1400,
    "BTTMenuFrameWidth" : 800,
    "BTTMenuFrameHeight" : 1400,
	
	// this defines "top left corner of menu positioned at top left corner of focused screen
    "BTTMenuAnchorRelation" : 0,
    "BTTMenuPositionRelativeTo" : 3,
    "BTTMenuAnchorMenu" : 0,
    "BTTMenuPositioningType" : 1
   };

   
	return JSON.stringify(container);
}

Then you can use the standard "hide floating menu" action