I’ve made some progress on this project and have an updated preset to share. It’s still a little rough around the edges, but this version should be easier to customize.
Changes:
- Modifier Support - You can now press Command or Option to show an alternate layout. The “S” and “A” keys also work as Command and Option.
- General Template - added a webview which is easier to customize, it is set to F5 in this preset. It doesn’t do anything by default, it has placeholder text, formatting and colors for demonstration purposes. (more info below)
- Window Management - updated this webview with an alternate layout to demonstrate modifier key support. The “4” and “5” keys can be used to show the alternate layouts, as well as Command and Option.
- Blender Webview - removed this webview as I was having problems getting it working consistently.
Notes/Problems:
- Key Repeat - It seems that in order to get the new modifier keys working consistently, key repeat has to be OFF. I’ve also noticed that, my key repeat settings are reverting back to ON sometimes. So if you’re having problems with the modifier keys, this might be the issue.
- Old Preset - A number of fundamental things were changed for this preset, so you probably should disable the original preset, or delete it entirely before using this new version.
How to customize the General Template
Here I’ll show how to make a new webview, for whatever app you want, using the General Template. In this example I’ll create a new webview for the default Notes app. Make sure to look at the images below for the full details.
- Set this preset (Floating Webview TouchBar Replacement) as the BTT master preset, this will make sure everything we add next gets added to the correct preset.
- Duplicate and Rename the General Template html file.
- Add a named trigger for this newly duplicated webview. You can copy and paste, and then rename the General Template trigger to accomplish this.
- Add an app specific keyboard shortcut for the Notes app, so we can trigger the Notes webview while using Notes. F18 should trigger a Named Trigger with the trigger name: “Notes_FloatingWebView”
- Verify that the Notes webview appears when you press caps lock while using the Notes app. It will look identical to the General Template, and it won’t do anything yet, in this next step we’ll make it do something.
- Add a trigger named “Notes_default_box04” and set it to command-option-s. Now box 4 of the Notes webview should be functional, when clicked it should “Show Folders” in the notes app.
- To change the text of box 4 we need to edit the “Notes_FloatingWebview.html” file that we created in step 2. At line 108 the text can be changed from “4” to “Show Folders”, color (blue, green, orange, red) can be changed here as well.
At this point you should be able to add new webviews for any app you want, by duplicating and customizing the General Template. When making new webviews, you need to use the following format when naming the files and triggers.
File Name Format: AppName_FloatingWebview.html
Trigger Name Format: AppName_layout_buttonID
For example, if you wanted to make a new webview for Final Cut Pro:
File Name:
FinalCutPro_FloatingWebview.html
Trigger Names:
FinalCutPro_default_box01
FinalCutPro_default_box02 ...etc
FinalCutPro_default_box19
FinalCutPro_command_box01 ...etc
FinalCutPro_command_box19
FinalCutPro_option_box01 ...etc
FinalCutPro_option_box19
@james948 This second preset should allow you to customize the webviews for yourself, as well as add new webviews per application. You will have to edit some basic JavaScript to change the text and colors of the webview buttons/boxes. Let me know if you have any questions.
Preset:
Floating Webview TouchBar Replacement.bttpresetzip (35.4 KB)