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.
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.
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:
Option down
Tab down (menu shows here)
Tab up
Select menu item (with arrow keys, trackpad or mouse controls)
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:
Option down
Tab down
Option up (this is important, you need to release Option before Tab to enter the 2nd mode)
Tab up
Launch app with shortcut, such as: (S: Safari) (N: Notes) (C + D: Calendar) etc...
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:
Thank you for making this floating tool. I like it.
I have a question, because I usually use the mouse to operate, is there a function that can close the Floating Web View when clicking on an area outside the Floating Web View.
Generally yes, you should be able to do that. If you’re using my most recent preset, the Floating Menus close on keyup for the keyboard, and the mouse can be set up in the same way.
I’ve got some mouse controls in the preset, but they are disabled by default, so you might want to enable these and try them out.
Thank you for your replay.
My system version is Macos Monterey 12.5. It does not support floating menu. My idea is can I adjust the js script to close the floating menu when clicking outside
Ok, yes with the Webview version you should be able to do that. You probably won’t need to change the javascript for this, as there is a similar option called “Close when clicking outside” in the webview settings.
One example of how you could set it up would be:
Right click -> show Webview Left click -> chose option in Webview Right or Left click outside -> close Webview
There are a lot of ways you could set this up though, so it just depends on exactly what you’re looking for.
The text should be centered by default. Your screenshot looks like it’s very zoomed in. You might need to the edit the CSS to fix this. Maybe play around with the height and width of the html grid, which would be lines 7 and 8 in the main.css file.
I’ve never really tried this before, but it looks like you can add this tag to the head of the html file:
<meta charset="UTF-8">
Then you should be able to add emojis in normally with the regular text.
Yes, it works.
I adjusted the data inside mian.css but it still doesn't center, I adjusted it as below and it just changes the box around it, the middle part of the box doesn't change. .box { display: grid; align-items: left; justify-items: start;
That is a Floating Menu based preset, which shouldn’t work on your machine. Also based on your screenshots, it looks like you are using the very first version of the preset. Before you go too far with customizing this, I would highly recommend reading this post from April 2023, and using its version of the preset as your starting point:
installed this version but i cannot launch using Caps lock => F18 remap.
i turned also keyboard key repeat rate to off.
help needed as i would like to check this "tool".
New to BTT also.
Thanks in advance!
That preset is based on the newer Floating Menus, and doesn’t need the Caps Lock to F18 remap, it instead needs Caps Lock to Control remapped, using the macOS System Settings app.
I’d suggest reading this post, which was my first about the Floating Menu version of this preset. It has setup instructions, and general info about that version.
Also, this thread is a little chaotic/unorganized as this is very much still a work in progress for me, but once I settle on a more “Final” preset I’ll edit the original post to make this stuff more clear.
For now though, the chaos shall remain. So if you have any more questions just let me know.
