Vor ein paar Wochen fragte ein Nutzer im Community Forum von Actions for Obsidian, ob man in der Kurzbefehle-App zur Vereinfachung der Eingabe mehrerer Gesundheitsdaten ein Formular verwenden könne, um diese dann mit „Actions for Obsidian“ in eine Obsidian-Notiz zu integrieren.
Da ich mir gerade Gedanken über einen Kurzbefehl für den Einsatz von Browser Actions zur Dateneingabe in Webformularen machte, nahm ich das Problem auf. Meine Idee für eine Lösung entwickelte sich schnell in die Richtung eines HTML-Formulars. Der Vorteil dieser Lösung ist, dass man ein HTML-Formular relativ einfach erstellen kann und es viele Möglichkeiten zur benutzerfreundlichen Gestaltung bietet.
Auf eine Anfrage von Carlo Zottmann) auf Mastodon nach Lösungsansätzen antwortete David Burešl mit einem Ansatz, den ich sehr interessant fand und den ich schließlich für meine eigene Lösung aufgriff.
In Davids Vorschlag wird ein Kurzbefehl zweimal ausgeführt. Beim ersten Mal wird er ohne ein Argument aufgerufen und sendet ein HTML-Formular direkt an den Safari-Browser, der es dann öffnet. Damit wird der Kurzbefehl beendet und das Formular hat den Fokus. Der Benutzer kann dann die Daten im Formular eingeben. Nach dem Drücken des Submit-Buttons wird der Kurzbefehl durch Aufruf der URL shortcuts://run-shortcut?name=vital&input= ein zweites Mal ausgeführt. Da er diesmal mit einem String als Argument gestartet wird, wird nun der andere Teil der „wenn“-Abfrage ausgeführt und in Davids Beispiel werden die eingegebenen Daten angezeigt.
Ich habe dieses Verfahren dann angepasst und mit einer lokalen HTML-Datei gearbeitet. Die Daten aus dem Formular wurden mit Aktionen aus den „Browser Actions“ der Webseite ausgelesen und mithilfe der Anwendung „Actions for Obsidian“ zu einer Obsidian-Notiz verarbeitet. Die Lösung habe ich in der Anfrage im Forum detailliert beschrieben.
Da die App „Browser Actions“ nicht unter iOS läuft und der Forumsteilnehmer eine iOS-kompatible Lösung benötigte, habe ich nach einer alternativen Lösung gesucht, die auf allen Apple-Plattformen funktionieren sollte.
Eine Lösung für macOS und iOS/iPadOS
Um den Kurzbefehl auf allen Plattformen nutzbar zu machen, habe ich das HTML auf einen Webserver gelegt und auf die Nutzung der App „Browser Actions“ verzichtet. Für die Erstellung der Obsidian-Notiz wird weiterhin „Actions for Obsidian“
Der Kurzbefehl wird ohne Eingabe-Argument gestartet, wodurch die HTML-Seite auf dem Server aufgerufen und in Safari angezeigt wird. Jetzt können die Daten eingegeben werden. Beim Drücken des Submit-Buttons wird der Kurzbefehl erneut ausgeführt, wobei die Daten diesmal als JSON-String übergeben werden. Mit diesen Daten wird der Text Notiz erstellt, die anschließend in Obsidian geöffnet wird. Werfen wir nun einen genaueren Blick auf die einzelnen Komponenten
Das HTML-Formular
Da im Forumsbeitrag von Gesundheitsdaten die Rede war, habe ich mir von „Perplexity“ ein Beispiel-HTML erstellen lassen, das verschiedene Eingabeelemente für Gesundheitsparameter enthält.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vital Data Recording</title>
<style>
body { font-family: Arial, sans-serif; max-width: 600px; margin: 0 auto; padding: 20px; }
label { display: block; margin-top: 10px; }
input, select { width: 100%; padding: 5px; margin-top: 5px; }
button { margin-top: 20px; background-color: #4CAF50; color: white; border: none; padding: 10px; cursor: pointer; width: 100%; }
</style>
</head>
<body>
<h1>Vital Data Recording</h1>
<form id="vitalSignsForm">
<label for="heartRate">Heart Rate (BPM):</label>
<input type="range" id="heartRate" name="heartRate" min="40" max="180" value="70">
<output for="heartRate"></output>
<label for="bloodPressure">Blood Pressure (systolic/diastolic):</label>
<input type="text" id="bloodPressure" name="bloodPressure" placeholder="120/80">
<label for="temperature">Body Temperature (°C):</label>
<input type="number" id="temperature" name="temperature" min="35" max="42" step="0.1" value="36.5">
<label for="respiration">Respiration Rate (per minute):</label>
<input type="range" id="respiration" name="respiration" min="10" max="30" value="15">
<output for="respiration"></output>
<label for="Mood">Mood:</label>
<select id="Mood" name="mood">
<option value="euphoric">Euphoric</option>
<option value="neutral">Neutral</option>
<option value="frustrated">Frustrated</option>
</select>
<button type="button" onclick="sendData()">Submit Data</button>
</form>
<script>
// Updates the display of the slider values
document.querySelectorAll('input[type="range"]').forEach(function(slider) {
slider.nextElementSibling.value = slider.value;
slider.oninput = function() {
this.nextElementSibling.value = this.value;
}
});
function sendData() {
var form = document.getElementById('vitalSignsForm');
var formData = new FormData(form);
var jsonObject = {};
for (var pair of formData.entries()) {
jsonObject[pair[0]] = pair[1];
}
var jsonString = JSON.stringify(jsonObject);
var shortcutURL = "shortcuts://run-shortcut?name=vital&input=" + encodeURIComponent(jsonString);
window.location.href = shortcutURL;
}
window.close();
</script>
</body>
</html>
Was im Browser dann so aussieht:
Die Hauptbestandteile der HTML-Datei sind zum einen das Formular mit der ID vitalSignsForm. Dieses definiert die Eingabeelemente: einen Schieberegler für die Herzfrequenz, eine Texteingabe für den Blutdruck, ein numerisches Eingabefeld für die Körpertemperatur, einen weiteren Schieberegler für die Atemfrequenz, ein Dropdown-Menü für die Stimmung und schließlich einen Button zum Absenden der Daten.
Zum anderen enthält die Datei auch zwei JavaScript-Funktionen. Die erste Funktion aktualisiert den Wert der Schieberegler-Eingaben. Jedes Mal, wenn ein Schieberegler bewegt wird, passt diese Funktion den zugehörigen Wert an.
Die zweite Funktion „sendData()“ wird ausgeführt, wenn der Benutzer auf die Schaltfläche „Daten absenden“ klickt. Dabei werden alle Eingaben in einer Schleife in ein JSON-Objekt übernommen, wobei der Name des Eingabeelements und der Wert als Schlüssel-Wert-Paare gespeichert werden.
Für die Weitergabe an den Kurzbefehl wird das JSON-Objekt in einen JSON-String umgewandelt. Dadurch können die Daten mit der URL shortcuts://run-shortcut?name=vital&input=" + encodeURIComponent(jsonString) an den Kurzbefehl „vital“ übergeben werden. Der JSON-String wird vor dem Aufruf kodiert, sodass Zeichen, die bei der Übertragung missinterpretiert werden könnten, wie „?“ oder Leerzeichen, durch spezielle Codes ersetzt werden.
Um ein Beispiel für einen zusätzlichen Datenpunkt zu geben, ergänze ich die Daten im Kurzbefehl mit den aktuellen Wetterdaten.
Nun wird aus den „Wörterbuch“-Einträgen und den Wetterdaten in einer Textbox der Inhalt der Obsidian-Notiz zusammengestellt. Dabei können alle Markdown-Formatierungsoptionen genutzt werden, die in Obsidian zur Verfügung stehen.
Die letzte Aktion erstellt die Notiz aus dem Inhalt dieser Textbox. In dem Beispiel wird die Notiz im Obsidian-Ordner „00 Neu“ gespeichert. Der Name setzt sich aus dem aktuellen Datum und dem String „vital“ zusammen. Die Notiz wird im Vault „ObsidianNotes“ gespeichert und der Text wird in den Notizinhalt eingefügt.
Kurzbefehle als Desktop App und auf dem Home-Bildschirm
Normalerweise bevorzuge ich auf dem Mac das Kurzbefehle-Menü im Finder zum Starten von Kurzbefehlen. Allerdings ist der Platz dort auf 16 Einträge beschränkt. Da in diesem Fall kein Kontext, wie eine offene Applikation, notwendig ist, nutze ich einen kleinen Trick, um einen Kurzbefehl in eine Desktop-Applikation zu verwandeln.
Dazu wird im Menü der Kurzbefehle-App unter „Ablage“ der Menüpunkt „Zum Dock hinzufügen“ ausgewählt. Damit wird der Kurzbefehl nicht nur im Dock auswählbar, sondern auch als Applikation im Benutzer-Programme-Ordner, also unter ~/Applications, abgelegt. Er bleibt dort, selbst wenn das Icon im Dock entfernt wird. Wichtig ist dabei, dass der Kurzbefehl in der Kurzbefehl-App nicht gelöscht wird, sonst funktioniert das nicht mehr.
Unter iOS/iPadOS kann der Kurzbefehl im Detail-Panel mit der Option „Zum Home-Bildschirm“ auf eben diesem abgelegt werden.
Fazit
Dieser Artikel zeigt eine Möglichkeit auf, wie man mit etwas HTML und einem Kurzbefehl formularbasierte Eingaben, für Anwendungen wie Obsidian, realisieren kann. Diese Methode ist sicherlich auch für andere Anwendungen geeignet, die sich über Kurzbefehle steuern lassen.
Auf meiner englischen Webseite habe ich bereits das nächste Projekt veröffentlicht, in dem ich mein Snippets-Shortcut-Beispiel um diese Methode ergänze um die zusätzliche Eingabe einer Notiz und von Tags bei der Erstellung eines Snippets zu erweitern. Die deutsche Version mit einigen Ergänzungen werde ich in den nächsten Tagen hier veröffentlichen.
Schreibe einen Kommentar