Mit einem Kurzbefehl Daten aus einem HTML-Formular in Obsidian integrieren

Black-and-white line-art illustration of a digital health data dashboard with sliders, graphs, and input fields for tracking vital signs, serving as a visual key for an article.

Leider hat WordPress beim Einsetzen des Textes aus Obsidian einen einen Teil des Textes gefres­sen oder ich habe ihn über­se­hen. Dabei han­delt es sich um die ers­ten Absätze im Kapitel „Der Kurzbefehl”. Dieser ist Teil ist nun ergänzt. Sorry

Vor ein paar Wochen frag­te ein Nutzer im Community Forum von Actions for Obsidian, ob man in der Kurzbefehle-App zur Vereinfachung der Eingabe meh­re­rer Gesundheitsdaten ein Formular ver­wen­den kön­ne, um die­se dann mit „Actions for Obsidian“ in eine Obsidian-Notiz zu inte­grie­ren.

Da ich mir gera­de Gedanken über einen Kurzbefehl für den Einsatz von Browser Actions zur Dateneingabe in Webformularen mach­te, nahm ich das Problem auf. Meine Idee für eine Lösung ent­wi­ckel­te sich schnell in die Richtung eines HTML-Formulars. Der Vorteil die­ser Lösung ist, dass man ein HTML-Formular rela­tiv ein­fach erstel­len kann und es vie­le Möglichkeiten zur benut­zer­freund­li­chen Gestaltung bie­tet.

Auf eine Anfrage von Carlo Zottmann) auf Mastodon nach Lösungsansätzen ant­wor­te­te David Burešl mit einem Ansatz, den ich sehr inter­es­sant fand und den ich schließ­lich für mei­ne eige­ne Lösung auf­griff.

Das Bild zeigt ein Flussdiagramm, das den Ablauf eines Prozesses beschreibt. Auf der linken Seite steht "Shortcut" und auf der rechten Seite "Safari". 1. **Start**: Der Prozess beginnt. 2. **Eingabeparameter**: Eine Entscheidung wird getroffen, ob Eingabeparameter vorhanden sind. - **Ja**: Das Ergebnis wird angezeigt und der Prozess endet. - **Nein**: Ein HTML-Formular wird erstellt und Safari wird mit diesem Formular geöffnet. 3. **Benutzereingabe**: Der Benutzer gibt Daten ein. 4. **JavaScript**: Die Daten werden über die URL mit dem Prefix "shortcut://" an einen Kurzbefehle gesendet. Das Diagramm ist in einem einfachen, übersichtlichen Design gehalten und verwendet Kästchen für Schritte und Rauten für Entscheidungen.

In Davids Vorschlag wird ein Kurzbefehl zwei­mal aus­ge­führt. Beim ers­ten Mal wird er ohne ein Argument auf­ge­ru­fen und sen­det ein HTML-Formular direkt an den Safari-Browser, der es dann öff­net. Damit wird der Kurzbefehl been­det und das Formular hat den Fokus. Der Benutzer kann dann die Daten im Formular ein­ge­ben. Nach dem Drücken des Submit-Buttons wird der Kurzbefehl durch Aufruf der URL shortcuts://run-shortcut?name=vital&input= ein zwei­tes Mal aus­ge­führt. Da er dies­mal mit einem String als Argument gestar­tet wird, wird nun der ande­re Teil der „wenn“-Abfrage aus­ge­führt und in Davids Beispiel wer­den die ein­ge­ge­be­nen Daten ange­zeigt.

Ich habe die­ses Verfahren dann ange­passt und mit einer loka­len HTML-Datei gear­bei­tet. Die Daten aus dem Formular wur­den mit Aktionen aus den „Browser Actions“ der Webseite aus­ge­le­sen und mit­hil­fe der Anwendung „Actions for Obsidian“ zu einer Obsidian-Notiz ver­ar­bei­tet. Die Lösung habe ich in der Anfrage im Forum detail­liert beschrie­ben.

Da die App „Browser Actions“ nicht unter iOS läuft und der Forumsteilnehmer eine iOS-kom­pa­ti­ble Lösung benö­tig­te, habe ich nach einer alter­na­ti­ven Lösung gesucht, die auf allen Apple-Plattformen funk­tio­nie­ren soll­te.

Eine Lösung für macOS und iOS/iPadOS

Um den Kurzbefehl auf allen Plattformen nutz­bar zu machen, habe ich das HTML auf einen Webserver gelegt und auf die Nutzung der App „Browser Actions“ ver­zich­tet. Für die Erstellung der Obsidian-Notiz wird wei­ter­hin „Actions for Obsidian“

Das Bild zeigt ein Flussdiagramm, das den Prozess beschreibt, wie Daten von einem Webserver über einen Browser (Safari) zu einer Anwendung (Obsidian) gelangen. - Zunächst startet der Prozess mit einem Shortcut. - Dann wird überprüft, ob Eingabedaten vorliegen. - Wenn ja, wird der Inhalt der Obsidian-Notiz erstellt und Obsidian öffnet eine neue Notiz. - Wenn nein, wird ein HTML-Formular geöffnet, in dem der Benutzer Daten eingeben kann. Nach der Eingabe klicken die Benutzer auf einen Submit-Button, woraufhin JavaScript die Daten an den Shortcut übermittelt. Das Diagramm nutzt Kästen und Entscheidungszweige, um die verschiedenen Schritte und Bedingungen darzustellen.

Der Kurzbefehl wird ohne Eingabe-Argument gestar­tet, wodurch die HTML-Seite auf dem Server auf­ge­ru­fen und in Safari ange­zeigt wird. Jetzt kön­nen die Daten ein­ge­ge­ben wer­den. Beim Drücken des Submit-Buttons wird der Kurzbefehl erneut aus­ge­führt, wobei die Daten dies­mal als JSON-String über­ge­ben wer­den. Mit die­sen Daten wird der Text Notiz erstellt, die anschlie­ßend in Obsidian geöff­net wird. Werfen wir nun einen genaue­ren Blick auf die ein­zel­nen Komponenten

Das HTML-Formular

Da im Forumsbeitrag von Gesundheitsdaten die Rede war, habe ich mir von „Perplexity“ ein Beispiel-HTML erstel­len las­sen, das ver­schie­de­ne Eingabeelemente für Gesundheitsparameter ent­hä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 aus­sieht:

Das Bild zeigt ein digitales Formular zur Aufzeichnung von Vitalzeichen. Es enthält die folgenden Felder: 1. Herzfrequenz (BPM) mit dem aktuellen Wert von 70, dargestellt durch einen Schieberegler. 2. Blutdruck, dargestellt als systolisch/diastolisch mit dem Wert 120/80. 3. Körpertemperatur in Grad Celsius, mit dem Wert 36,5. 4. Atemfrequenz pro Minute, mit dem aktuellen Wert von 15, ebenfalls dargestellt durch einen Schieberegler. 5. Ein Feld für die Stimmung, in dem der aktuelle Zustand als "Euphorisch" angegeben ist. 6. Ein „Daten absenden“-Button am Ende des Formulars. Die Benutzeroberfläche ist klar strukturiert und ermöglicht die Eingabe und Überprüfung der Vitalzeichen.

Die Hauptbestandteile der HTML-Datei sind zum einen das Formular mit der ID vitalSignsForm. Dieses defi­niert die Eingabeelemente: einen Schieberegler für die Herzfrequenz, eine Texteingabe für den Blutdruck, ein nume­ri­sches Eingabefeld für die Körpertemperatur, einen wei­te­ren Schieberegler für die Atemfrequenz, ein Dropdown-Menü für die Stimmung und schließ­lich einen Button zum Absenden der Daten.

Zum ande­ren ent­hält die Datei auch zwei JavaScript-Funktionen. Die ers­te Funktion aktua­li­siert den Wert der Schieberegler-Eingaben. Jedes Mal, wenn ein Schieberegler bewegt wird, passt die­se Funktion den zuge­hö­ri­gen Wert an.

Die zwei­te Funktion „sendData()“ wird aus­ge­führt, wenn der Benutzer auf die Schaltfläche „Daten absen­den“ klickt. Dabei wer­den alle Eingaben in einer Schleife in ein JSON-Objekt über­nom­men, wobei der Name des Eingabeelements und der Wert als Schlüssel-Wert-Paare gespei­chert wer­den.

Für die Weitergabe an den Kurzbefehl wird das JSON-Objekt in einen JSON-String umge­wan­delt. Dadurch kön­nen die Daten mit der URL shortcuts://run-shortcut?name=vital&input=" + encodeURIComponent(jsonString) an den Kurzbefehl „vital“ über­ge­ben wer­den. Der JSON-String wird vor dem Aufruf kodiert, sodass Zeichen, die bei der Übertragung miss­in­ter­pre­tiert wer­den könn­ten, wie „?“ oder Leerzeichen, durch spe­zi­el­le Codes ersetzt wer­den.

Der Kurzbefehl

Auch die­ser Kurzbefehl wird zwei­mal aus­ge­führt, abhän­gig davon, ob er ohne Daten oder mit den Werten aus dem HTML-Formular auf­ge­ru­fen wird. Daher wird als Erstes eine „wenn“-Aktion in den lee­ren Editor gezo­gen.

Als Bedingung in der „wenn“-Aktion wird die „Kurzbefehleingabe“ aus­ge­wählt. Dadurch wird ein wei­te­rer Parameter hin­zu­ge­fügt, der auf „hat kei­nen Wert“ gestellt wer­den muss.

Durch das Hinzufügen der „Kurzbefehleingabe“ als Bedingung der „wenn“-Aktion wird auch eine Box hin­zu­ge­fügt, in der die Quellen des Kurzbefehls ange­zeigt wer­den. Hier ist es wich­tig, dass der Parameter „Bilder und 18 wei­te­re“ auf „nein“ gestellt wird, was durch das Aufheben der Auswahl der ein­zel­nen Objekte geschieht (ein­mal „Alle aus­wäh­len“ anwäh­len und dann „Auswahl auf­he­ben“ ankli­cken).

Wenn der Kurzbefehl ohne Argumente auf­ge­ru­fen wird, wird die Webseite über die Aktion „URLs öff­nen“ geöff­net und bekommt den Fokus. Danach wird der Kurzbefehl been­det.

Nun kön­nen die Daten ein­ge­ge­ben wer­den und mit dem Klicken auf „Submit“ wird zunächst das Browserfenster geschlos­sen und der Kurzbefehl, dies­mal mit Argumenten, gestar­tet. Dadurch wird der zwei­te Teil abge­ar­bei­tet, in dem zunächst der JSON-String an ein „Wörterbuch“ über­ge­ben wird. Das „Wörterbuch“ bie­tet die Möglichkeit, auf die JSON-Daten im Kurzbefehl ein­fach zuzu­grei­fen.

In dem Beispiel wird der Wert für den Schlüssel „heartRate” abge­fragt. Für die­se Abfragen wer­den die IDs der Eingabeelemente aus dem HTML ange­ge­ben, da die­se als Schlüssel ver­wen­det wer­den.

Auf dem Bild ist ein Bildschirmfoto von des Wörterbuch-Dialog der Kurbefehl App. zusehen. Es zeigt verschiedene Optionen in einem Menü, darunter "Heart Rate" (Herzfrequenz) und "Blood Pressure" (Blutdruck) mit dazugehörigen Werten. Es gibt Eingabefelder zum Abrufen von Werten für bestimmte Schlüssel, und der Text ist in deutscher Sprache verfasst. Das Layout besteht aus verschiedenen Schaltflächen und Eingabefeldern, die durch graue und orangefarbenen Rahmen hervorgehoben sind.

Um ein Beispiel für einen zusätz­li­chen Datenpunkt zu geben, ergän­ze ich die Daten im Kurzbefehl mit den aktu­el­len Wetterdaten.

Nun wird aus den „Wörterbuch“-Einträgen und den Wetterdaten in einer Textbox der Inhalt der Obsidian-Notiz zusam­men­ge­stellt. Dabei kön­nen alle Markdown-Formatierungsoptionen genutzt wer­den, die in Obsidian zur Verfügung ste­hen.

Die letz­te Aktion erstellt die Notiz aus dem Inhalt die­ser Textbox. In dem Beispiel wird die Notiz im Obsidian-Ordner „00 Neu“ gespei­chert. Der Name setzt sich aus dem aktu­el­len Datum und dem String „vital“ zusam­men. Die Notiz wird im Vault „ObsidianNotes“ gespei­chert und der Text wird in den Notizinhalt ein­ge­fügt.

Das Bild zeigt einen Apple-Kurzbefehl namens “Vital”. Dieser Workflow ist darauf ausgelegt, Vitalparameter (wie Herzfrequenz, Blutdruck, Körpertemperatur, Atemfrequenz, Stimmung und Wetterbedingungen) abzurufen und zu speichern. Hier sind die Schritte des Workflows: 1. Eingabeprüfung: Der Kurzbefehl startet mit einer Überprüfung, ob eine Eingabe von einer beliebigen Quelle vorliegt. Falls keine Eingabe vorhanden ist, wird fortgefahren. 2. Wörterbuch: Ein Wörterbuch wird aus der Eingabe erstellt und dann verwendet, um die Vitalwerte zu speichern. 3. Wetterdaten: Der aktuelle Wetterbericht für den Standort wird abgerufen. 4. Textformatierung: Ein Textblock listet die Werte wie Herzfrequenz, Blutdruck (systolisch/diastolisch), Körpertemperatur, Atemfrequenz, Stimmung und Wetterbedingungen auf. 5. Notiz speichern: Die formatierten Daten werden als Notiz in Obsidian gespeichert. Der Pfad der Notiz wird durch ein festgelegtes Datum und den Ordnernamen (“Vital”) im Obsidian-Verzeichnis erstellt. 6. Webseite öffnen: Eine spezifische Webseite (http://192.168.1.80/vital.html) wird geöffnet, um möglicherweise zusätzliche Informationen oder Funktionen bereitzustellen. 7. Ausgabe anzeigen: Am Ende des Workflows wird die Ausgabe des „Wenn“-Ergebnisses ausgegeben. Wenn keine Ausgabe möglich ist, erfolgt keine Aktion. Auf der rechten Seite befinden sich verschiedene Konfigurationsoptionen wie „In Menüleiste anpinnen“ oder „Als Schnellaktion verwenden“.

Kurzbefehle als Desktop App und auf dem Home-Bildschirm

Normalerweise bevor­zu­ge 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 die­sem Fall kein Kontext, wie eine offe­ne Applikation, not­wen­dig ist, nut­ze ich einen klei­nen Trick, um einen Kurzbefehl in eine Desktop-Applikation zu ver­wan­deln.

Dazu wird im Menü der Kurzbefehle-App unter „Ablage“ der Menüpunkt „Zum Dock hin­zu­fü­gen“ aus­ge­wählt. Damit wird der Kurzbefehl nicht nur im Dock aus­wähl­bar, son­dern auch als Applikation im Benutzer-Programme-Ordner, also unter ~/Applications, abge­legt. Er bleibt dort, selbst wenn das Icon im Dock ent­fernt wird. Wichtig ist dabei, dass der Kurzbefehl in der Kurzbefehl-App nicht gelöscht wird, sonst funk­tio­niert das nicht mehr.

Unter iOS/iPadOS kann der Kurzbefehl im Detail-Panel mit der Option „Zum Home-Bildschirm“ auf eben die­sem abge­legt wer­den.

Fazit

Dieser Artikel zeigt eine Möglichkeit auf, wie man mit etwas HTML und einem Kurzbefehl for­mu­lar­ba­sier­te Eingaben, für Anwendungen wie Obsidian, rea­li­sie­ren kann. Diese Methode ist sicher­lich auch für ande­re Anwendungen geeig­net, die sich über Kurzbefehle steu­ern las­sen.

Auf mei­ner eng­li­schen Webseite habe ich bereits das nächs­te Projekt ver­öf­fent­licht, in dem ich mein Snippets-Shortcut-Beispiel um die­se Methode ergän­ze um die zusätz­li­che Eingabe einer Notiz und von Tags bei der Erstellung eines Snippets zu erwei­tern. Die deut­sche Version mit eini­gen Ergänzungen wer­de ich in den nächs­ten Tagen hier ver­öf­fent­li­chen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert