Replacing the Touch Bar with Floating Webviews

Setup/Preset Sharing
,
22

I’ve been working on converting this preset from Floating Webviews to the newer Floating Menus. It’s been going pretty well, so I thought I’d share a mostly working first draft of this preset. It can’t do everything the Webview preset could, but it’s reasonably functional so far.

I think the main advantage of using Menus instead of Webviews, is the ease of customization. The Menus can be fully customized with BTT, without needing to edit html/css/javascript files. This should make it far easier/faster for you to customize these for yourself.

Screenshot 2024-01-02 at 6.56.28 PM
Screenshot 2024-01-02 at 6.56.28 PM1920×1609 158 KB

Notes

  • App Launcher - I added a new App Launcher Menu to F4, this can be used as an app launcher or switcher. An advantage of this is that the apps always stay in the same order. Combined with keyboard or trackpad control, this can be an interesting way to launch/switch apps.

  • Keyboard Control - Using this method, I’ve got basic keyboard control working. Arrow keys can be used to navigate the button grid. The I-J-K-L and 1-Tab-Q-W keys can also be used as arrow keys. (The 1-Tab-Q-W keys are a little weird as arrow keys, but I find them to be useful when showing a Menu via the trackpad or mouse)

  • Trackpad Control - 2/3 finger swipes can be used to navigate the button grid. 2 finger swipe = move 1 button, 3 finger swipe = move 2 buttons. Additionally, 2/3/4 finger Force Clicks will show various Menus, I’m using the Force Clicks with the 1-Tab-Q-W keys as arrow keys.

  • Mouse Control - I disabled these in the preset as they use right click to show the App Specific Menus, which is probably a dealbreaker for a lot of people. Having said that, if you have some other way to right click, using right click on a mouse to show the App Specific Menus is pretty cool when combined with the 1-Tab-Q-W arrow keys.

  • Copy/Paste Menu - The idea of these is to quickly copy some text you use frequently to the clipboard. Because of the keyboard controls, you can’t really type into these directly, so it’s easiest to copy text from somewhere else first, then right click to paste the text into the text box.

Problems

  • Modifier Keys - Menus are getting stuck in their alternate layout if the menu closes while on the alternate layout. I don’t know why this is happening, but the next time you open the menu, pressing the modifier key will get it back to its default state.

Setup

  • Caps Lock to Control - In order to get the App Specific Menus working, you need to change Caps Lock to Control in the macOS System Settings app.

Screenshot 2024-01-03 at 1.10.17 AM
Screenshot 2024-01-03 at 1.10.17 AM1920×1216 125 KB

Preset:

Floating Menu - TouchBar Replacement.bttpreset.zip (6.4 MB)

2 Likes
23

very cool, I’ll experiment with it later today!

1 Like
24

I need to reply here just to say how great this idea is, @ocean-success. Nice!!!

1 Like
25

@Andreas_Hegenberg Nice! If you have any thoughts after using it, I’d enjoy hearing them.

@mkozjak Thanks! These types of comments help encourage me to keep working on this.

1 Like
26

I’ve been playing around with the idea of using the Floating Menus as “virtual modifiers” … and combining that with the concept of keyboard chords. With those 2 ideas in mind, I have a little update here to the App Launcher Floating Menu.

I added the App Launcher Menu to Option + Tab, and it now has two modes.

First Mode
The first mode works the same as the App Launcher normally would on F4, and also works similarly to the macOS Command + Tab switcher.

First Mode Instructions:

  1. Option down
  2. Tab down (menu shows here)
  3. Tab up
  4. Select menu item (with arrow keys, trackpad or mouse controls)
  5. Option up (this triggers the menu item, and closes menu)

Second Mode
The second mode works more like a keyboard chord, where you show the Floating Menu first, release all keys, and while the menu is visible use keyboard shortcuts to launch apps. For example S to launch Safari or N to launch Notes.

Where it gets more interesting (and more complex / convoluted) is while in this second mode, you can use normal keys as if they are modifier keys. So holding S and then pressing E will launch System Settings for example, holding S then pressing C will open the Shortcuts app, hold S then press I to open the System Information app…etc.

Second Mode Instructions:

  1. Option down
  2. Tab down
  3. Option up (this is important, you need to release Option before Tab to enter the 2nd mode)
  4. Tab up
  5. Launch app with shortcut, such as: (S: Safari) (N: Notes) (C + D: Calendar) etc...

Screenshot 2024-02-01 at 1.14.53 AM
Screenshot 2024-02-01 at 1.14.53 AM1920×1258 121 KB

These shortcuts are only active when the Floating Menu is visible, in that sense the Floating Menu itself is the modifier. This is pretty nice, and I think this idea has some potential, so I’ll keep exploring it. For now, here’s the first working draft of this concept:

Preset: (this is an updated version of the whole preset by the way, not just the App Launcher)
Floating Menu - TouchBar Replacement - January 31, 2024.bttpreset.zip (9.2 MB)

2 Likes