Show user input form

Configuration Help & General Discussion
1

Hi @Andreas_Hegenberg , is it possible to show a user input form like below. Dropdown might not be needed but desirable. Use case is to get multiple user inputs and then process them. Any way to accomplish this via BetterTouchTool, using some AppleScript/HTML magic, or something else?

image
image536×502 76.8 KB

It could also be a simple form like below but with multiple input options

image
image1000×518 36.8 KB

2

In general I would recommend to use the Shortcuts app to setup the workflow and then trigger it using BTT.

You could also use the Floating Webview with some simple HTML like this and use some java script to trigger any BTT action or shell script: ( Floating WebView/ Floating HTML Menu · GitBook (folivora.ai) )

<html>
  <head>
    <script>
      async function submitFunction() {
        let name = document.getElementById("name").value;
        let details = document.getElementById("someTextArea").value;

        let showHUDAction = {
          BTTActionHUDTitle: name,
          BTTActionHUDDetail: details,
          BTTActionHUDDuration: 5,
          BTTActionHUDBackground: "38.719535, 38.720697, 38.720067, 213.662109"
        };

        let actionDefinition = {
          BTTPredefinedActionType: 254,
          BTTHUDActionConfiguration: JSON.stringify(showHUDAction),
        };

        let result = await callBTT("trigger_action", {
          json: JSON.stringify(actionDefinition),
          closeFloatingWebView: 1,
        });
      }
    </script>
  </head>
  <body>
    <form onsubmit="submitFunction()">
      Enter name: <input id="name" type="text" />
      <textarea id="someTextArea"></textarea>
      <input type="submit" />
    </form>
  </body>
</html>

Here is a full example for a Keyboard Shortcut (ctrl+opt+cmd+N) that shows a webview and uses the entered values to show a BTT HUD:

https://share.folivora.ai/sharedPreset/07293591-487f-4d7a-8f48-ce311e3a3a00

3

Awesome.

How can I push the field data I received from the form to a python/node/go script?

4

here are some examples:

Apple Scripts & Shell Scripts in the webview · GitBook (folivora.ai)

So here a full example:

<html>
  <head>
    <script>
      async function submitFunction() {
        let name = document.getElementById("name").value;
        let details = document.getElementById("someTextArea").value;

        // put the shell script into a string (single backticks are great for multiline strings). Use the full path to the executable you want to run.
        let shellScript = `/usr/bin/say hello ${name} - ${details}`;

        let shellScriptWrapper = {
          script: shellScript, // mandatory
          launchPath: "/bin/bash", //optional - default is /bin/bash
          parameters: "-c", // optional - default is -c
          environmentVariables: "", //optional e.g. VAR1=/test/;VAR2=/test2/;
        };
        // this will execute the Shell Script and store the result in the result variable.
        let result = runShellScript(shellScriptWrapper);
        let closeWebviewResult = await callBTT("trigger_action", {
          json: {},
          closeFloatingWebView: 1,
        });
      }
    </script>
  </head>
  <body>
    <form onsubmit="submitFunction()">
      Enter name: <input id="name" type="text" />
      <textarea id="someTextArea"></textarea>
      <input type="submit" />
    </form>
  </body>
</html>
1 Like
5 
let shellScript = `/usr/bin/say hello ${name} - ${details}`;

Can this only be a executable. Can I do something like

let shellScript = `python3 main.py ${name} - ${details}`;

OR

let shellScript = `go main.go ${name} - ${details}`;
6

yes, just make sure to use the full paths (e.g. /usr/bin/python3 ~/Documents/main.py)

1 Like
7

Thanks! Trying this right now. I realized I use BTT on two macs and sync them manually by exporting the presets I created. I want to have everything the in the preset including this custom python/node script. Is there a way to include that within BTT preset so I don't have move it to the other computer (at the same path/or edit the path in BTT every time)

8

yes, if you click the „Presets“ item in the BTT menubar and choose „open data folder for preset“ it will open the folder that will be included in the preset.

9

I'm assuming if I put the script in this directory and give that path as "./" that should be enough?

10

no, but BTT_PRESET_PATH/script.py should work! (this will be replaced by the correct path automatically)

1 Like