Update a persistent floating webview with other shortcuts?

Discussion & Questions
1

I'm working on a persistent HUD using the floating webview to display my keyboard layout. I want the function keys to cycle through different layouts.

The webview currently loads a html page that has multiple layouts, but only one shows through the webview at a time. I would like to update the page by forcing it to scroll to a different anchor point when a different function key is pressed.

Is there an easy way to do this?

I have playing around with the javascript part of the action, and setting a variable, but I'm confused as to how to string it all together.

2

The easiest would be to use the to use the notifications the BTT webview receives by default:

Webview Lifecycle & Notifications ยท GitBook (folivora.ai)

Simple example:

<html>
  <head>
    <script>
      /* This is called when a script variable in BTT changes. */
      async function BTTNotification(note) {
        let data = JSON.parse(note);
        console.log(data.note, data.name);
        if (data.note == "BTTVariableChanged" && data.name == "layoutToUse") {
          let layoutToUse = await callBTT("get_string_variable", {
            variable_name: "layoutToUse",
          });

          console.log("layout to use", layoutToUse);
          document.getElementById("variableContent").innerHTML = layoutToUse;
        }
      }
    </script>
  </head>
  <body>
    <div id="variableContent">Default</div>
  </body>
</html>

Now you can use the predefined action "Assign Value to Variable" in BTT, to assign some new value to a variable called layoutToUse. The script will receive any change to that and you can run whatever Java Script you would need.

If you want to just scroll to the anchor named like the value you put into the variable, you could use this script:

<html>
  <head>
    <script>
      /* This is called when a script variable in BTT changes. */
      async function BTTNotification(note) {
        let data = JSON.parse(note);
        console.log(data.note, data.name);
        if (data.name == "layoutToUse") {
          let layoutToUse = await callBTT("get_string_variable", {
            variable_name: "layoutToUse",
          });

          location.hash = "#" + layoutToUse;
        }
      }
    </script>
  </head>
  <body>
  </body>
</html>