Can anyone help me load obsidian.md files into the floating web view?

Discussion & Questions
21

:slight_smile: thanks!
Can I bung the distro in /Users/james/Library/Application Support/BetterTouchTool/PresetBundles/1004A42B-94CF-4C02-BD2D-267C8351E8A0BTT JV October 2021

(my preset path) and assume it'll be part of my export backup and be safe from updates?

22

yes, that should work fine

23

Awesome.
So I'm doing this and it frustrates me that I know one or two lines of code will make the whole thing far more efficient.

I'm trying to go through all the apps I need and make cheatsheets for all of them.
I've made a named trigger for the web-view so I can use a shortcut and the notch bar to invoke it.
Now I must go through each app and create exactly the same named triggers with different app names and URLs.

What I want to do is have a button that (in basic- I can't code- terms) says


- Check what app is activated
- Set result to %variable%appname%
If
/Users/james/Library/Mobile Documents/iCloud~md~obsidian/Documents/Obsidian Vault 2023/Cheat Sheets/
contains filename that includes %variable%appname% 
Set filename to %variablefilename%
run script: 
[...]
<zero-md src="localfile:///Users/james/Library/Mobile Documents/iCloud~md~obsidian/Documents/Obsidian Vault 2023/Cheat Sheets/%variablefilename%"  
[...]
Else
Display HUD saying "No Cheatsheet"

I can't see a way to do if/and/else or variables but I'm really trying hard to learn all this this year. If you have any suggestions I would be most grateful.

24

Here is a simple example:

<head>

<script>

async function BTTNotification(note) {
   let data = JSON.parse(note);
   console.log(data.note, data.name);
   // example to get the currently active app, this works for any BTT variable you define:
   if(data.note == "BTTVariableChanged" && data.name == 'BTTActiveAppBundleIdentifier') {
      // the notification does only contain the name of the changed variable, so you'll need to retrieve
      // the value yourself:
      let bundleIdentifier = await callBTT('get_string_variable', {variable_name: 'BTTActiveAppBundleIdentifier'});
      console.log(data.note, data.name, bundleIdentifier);
      setMarkdownFileForApp(bundleIdentifier);
   }

}

async function loadInitialActiveApp() {
      let bundleIdentifier = await callBTT('get_string_variable', {variable_name: 'BTTActiveAppBundleIdentifier'});
      setMarkdownFileForApp(bundleIdentifier);

}

function setMarkdownFileForApp(bundleIdentifier) {
  document.getElementById('bundleIdentifier').innerHTML = bundleIdentifier;
  document.getElementById('zeroMD').src = `localfile:///Users/andi/apps/${bundleIdentifier}.md`;

}

</script>

<script type="module" src="localfile:///Users/andi/Downloads/zero-md-main/dist/zero-md.min.js"></script>
</head>

<body onload="loadInitialActiveApp()">
<p id="bundleIdentifier"></p>
<zero-md id="zeroMD"></zero-md>

</body>

In this example it will monitor the active app and try to load the corresponding .md file located in /Users/andi/apps/bundleidentifier.md file
The bundle identifier of an app is not the same as it's name, but uniquely identifies the app. E.g. BetterTouchTool is "com.hegenberg.BetterTouchTool", so the file would be /Users/andi/apps/com.hegenberg.BetterTouchTool.md

For debugging it will also show the bundle identifier of the active app on top of the webview, you can disable that by removing the <p id="bundleIdentifier"></p> and the document.getElementById('bundleIdentifier').innerHTML = bundleIdentifier;

25

Thanks so much @andreas. I'm having a hard time understanding this so I'm googling all the language and seeing if I can piece together what's happening. I don't just want to put it in there and forget about it. NOT THIS TIME!

Is the first script written in JS?

26

It's all Java Script, unfortunately it will be a bit hard to work with this without Java Script.

BTTNotification is a function that BTT calls, e.g. when a variable changes. In the script this is used to track the active bundle identifier variable and update the markdown file depending on the active app.

Initially (onload="loadInitialActiveApp()") the script loads the active bundle identifier manually via let bundleIdentifier = await callBTT('get_string_variable', {variable_name: 'BTTActiveAppBundleIdentifier'});. After that it listens to the notifications BTT sends.

27

Thanks so much. Doing a Udemy course to try and get my head around this before I implement it.