Tutorial: Use New Scroll Triggers On Floating Menu Items

4.843 introduced scroll triggers for floating menu items. Here is a very basic example for an item that will increase/decrease the system volume when scrolling up or down and increase/decrease the display brightness when scrolling left/right.

Download example preset here:
scroll_example.bttpreset (63.0 KB)

1) Create Menu

First add a Floating Menu:

2) Add a Menu Item And Configure It To Allow Scrolling Events.

There is a new section "Item Behavior", where you need to enable the scroll events. You can also set the required scroll amount before it triggers.

3) Add actions for the various scroll directions:

Click the top "Action Category" dropdown

Select the Action Category you want to configure:

Now in this example I'm using the "Run Real Java Script" action to adjust BTT's "OutputVolume" and "BuiltInDisplayBrightness" variables:

These are the scripts I'm using:

Decrease Volume

async function decreaseVolume() {
  let value = await get_number_variable("OutputVolume");

  if (value < 1) {
    value = value - 0.01;
    if (value < 0) {
      value = 0;
    }
  }

  set_number_variable({ variableName: "OutputVolume", to: value });

  const updateDescription = {
    BTTMenuItemSFSymbolName: "speaker.wave.1",
    BTTMenuItemText: Math.round(value * 100) + "%",
  };
  await update_menu_item({
    item_uuid: "A2A6648E-C114-4CDB-A6B4-209A4DC14A5F",
    json: JSON.stringify(updateDescription),
    persist: true,
  });

  return value;
}

Increase Volume

async function increaseVolume() {
  let value = await get_number_variable("OutputVolume");

  if (value < 1) {
    value = value + 0.01;
  }

  set_number_variable({ variableName: "OutputVolume", to: value });

  const updateDescription = {
    BTTMenuItemSFSymbolName: "speaker.wave.3",
    BTTMenuItemText: Math.round(value * 100) + "%",
  };
  await update_menu_item({
    item_uuid: "A2A6648E-C114-4CDB-A6B4-209A4DC14A5F",
    json: JSON.stringify(updateDescription),
    persist: true,
  });

  return value;
}

Decrease Brightness:

async function decreaseBrightness() {
  let value = await get_number_variable("BuiltInDisplayBrightness");

  if (value > 0) {
    value = value - 0.03;
  }

  set_number_variable({ variableName: "BuiltInDisplayBrightness", to: value });

  const updateDescription = {
    BTTMenuItemSFSymbolName: "sun.min",
    BTTMenuItemText: Math.round(value * 100) + "%",
  };
  await update_menu_item({
    item_uuid: "A2A6648E-C114-4CDB-A6B4-209A4DC14A5F",
    json: JSON.stringify(updateDescription),
    persist: true,
  });
}

Increase Brightness:

async function increaseBrightness() {
  let value = await get_number_variable("BuiltInDisplayBrightness");

  if (value < 1) {
    value = value + 0.03;
  }

  set_number_variable({ variableName: "BuiltInDisplayBrightness", to: value });

  const updateDescription = {
    BTTMenuItemSFSymbolName: "sun.max",
    BTTMenuItemText: Math.round(value * 100) + "%",
  };
  await update_menu_item({
    item_uuid: "A2A6648E-C114-4CDB-A6B4-209A4DC14A5F",
    json: JSON.stringify(updateDescription),
    persist: true,
  });
}

``

Floating Menus are becoming my favorite feature of BTT. Thanks for the bug fixes and the new features!

Yes I also think it will be the most important BTT feature in the future. The base for them is slowly getting pretty stable, now I'm starting to make everything easier to setup.

Still a lot of things to do though -
next is finally finishing the BTT Mobile app to use the Floating Menu's from iOS devices, then I'll work on migrating the Stream Deck and Notch Bar to Floating Menus as well

4 Likes