Floating HTML Settings Menu

Development on the floating HTML settings menu is underway! This is going to be so much nicer to use than the Touch Bar group.

Screenshot of the stupid skeleton page so far, nothing is actually hooked up yet:

I may or may not continue with the System Prefs-style design. If I don't, I'll move to a sidebar layout, something like CleanMyMac but, you know, less pink. Web stuff is my bread and butter so I think I can make a pretty nice settings page reasonably fast!

nice! I think this will make it much easier for new users :slight_smile:

Is it possible to get the values of a persistent variable in the floating HTML view? I'd like to use it to power classes that change the color of the settings instead of manually swapping out hide and show buttons.

1 Like

Following :wink:

I've been wanting to make one too

it SHOULD be possible, but I unfortunately think I forgot to route these newer functions to the webview. Will add them tomorrow, so everything that can be used from Apple Script can also be used from Java Script inside the webview.

With v2.672 it will then just work like the other calls:

 window.BTT.callHandler('get_persistent_string_variable', {variableName: 'test'},
    function callback(currentVariableValue) {   
     console.log('the variable is set to: ', currentVariableValue);

It's already possible via fetch and creating appropriate payload - that's why I created a wrapper over the webserver API :slight_smile:

So instead

fetch("<THE CONFIG PORT>/get_string_variable/?variableName=<VARIABLE NAME>").then(r => r.text()).then(value => console.log(value));

You can do

await btt.state.get('test')

Anyway, this is already possible without too much hussle. @Andreas_Hegenberg perhaps you could reconsider adding my btt.js wrapper injected into webview by default? :thinking: it has dozen of cases already handled, even with custom method for particular actions (and it is documented) That way you would'nt have to maintain window.BTT.* yourself. If you find this idea interesting, this could be made turn-offable via checkbox, just in case.

If any of you guys need a help with any JS related technologies, just mention me - I work with it on daily basis and I'm online often :slight_smile:

And surely - @GoldenChaos awesome webview UI! :tada:

1 Like

The main problem with doing that is that it requires the BTT webserver to be activated, which it's not by default (and I feel users should have to do that manually)

However adding it as an option is a great idea!!

Oh, I didn't realize that. That's interesting though - I assumed that window.BTT does that under the hood anyway (I mean, I'm certainly curious how does it work without webserver enabled - some other low level API available to JS within webview :open_mouth: ?)

That's some custom code I added which allows to call certain native code directly from JS, without going through any kind of webserver. This only works in the floating HTML view. Maintaining these is usually not a problem, they are just forwarded to the general script-function handler. I just forgot that :slight_smile:

Maybe it would be possible to optionally "wrap" these window.BTT.callHandler calls in your library :open_mouth:

1 Like

Yeah that shouldn't be too much hussle - wrapper could just check if window.BTT.callHandler is defined at all, and if it is it can use it and then just fallback to webserver (because the callHandler will work only in BTT invoked webview I suppose)

But I'd need to know what functions are supported etc :slight_smile: So If you find this idea useful then we can set it up later, I could help you with building it (though it should be documented enough for you to set it up yourself -> https://worie.github.io/btt/guide/introduction.html)

Let me know if you need any kind of support :slight_smile:

1 Like

It supports the same functions as the webserver/applescript
:slight_smile: (http://docs.bettertouchtool.net/docs/floating_menu_javascript.html shows most of them). I just added the variable stuff in v2.673 alpha

1 Like

Awesome! The UI is coming along :slight_smile: I'll have it functional for the next version hopefully.


@Andreas_Hegenberg I'm not super adept at writing my own JS from scratch; how do I actually get this initializing and outputting the value of a variable in context? In my working copy I'm trying to output the esc key style variable, just as a test. I basically just stuck the script you provided in a <script> tag and changed the variable name, no dice, so I'm guessing I'm missing some initialization step or doing something stupid.

This is a good excuse for me to finally get decent at JS :stuck_out_tongue:

Progress update! The switches still aren't functional, but the tabs are! :smile:

1 Like

very quick because I really need to go to sleep :slight_smile:

It takes a brief moment until the window.BTT object becomes available. If possible have a look at the starter template here:


You could e.g. load all variables in the BTTInitialize function.


Just FYI Andreas - support for using window.BTT is present in v3.4.0 of the wrapper, if you find it useful. It was really easy to implement thanks to consistencies with webserver API as you mentioned. And it's quite amazing to see such low level functionalities exposed to JS without webserver itself :slight_smile:

The only thing that does not work in my wrapper without the webserver is .url of particular action because... Well URL requires a webserver to be visitable :smiley: But other stuff such as .json or .invoke() or even .chain() should work just fine.

@Andreas_Hegenberg I've been combining a few of my show/hide scripts into single toggle scripts for testing, but using the BTT link doesn't seem to actually do anything when I click it. I also still get an error when using js:

EDIT: Uh, actually none of my triggers seem to be doing anything, even when fired manually. Did they just straight up break in 2.674? I can't even resize the menu bar anymore.

EDIT2: Merry Christmas everyone! :smile:

1 Like

@GoldenChaos basing on error, you're executing your script before window.BTT is ready. Try adding

window.addEventListener('load', () => {
 // ... do anything that you want with `window.BTT.callHandler`

You can share some of your code here or on pastebin, so we can debug it :slight_smile:

Though I'm not sure when is window.BTT initialized exactly. Still, load event should be enough.

@Worie will try that next, just finished some more styling! I also hooked up all the buttons to their respective trigger actions, which still aren't doing anything...

could you post an example of how you are trying to trigger the action?

This is inside the BTT Floating HTML Webview, correct?

@Worie this is awesome, if it's ok I'd like to include this by default (I'll add you to the about screen of course and link to wherever you want)

Imprint | Privacy Policy