ioBroker VIS – jQuery-UI-Stil Widgets – Das Input Widget

Im folgenden Artikel zeige ich Dir, wie Du das Input Widget für das Füllen von Objektwerten einsetzen kannst.

Installation der jQuery-UI Widgets
Falls Du die jQuery-UI_Stil Widgets noch nicht installierst hast, wechsle nun in den Bereich „Adapter“ und installiere hier den folgenden Adapter. Ansonsten kannst Du diesen Abschnitt überspringen.

Auf dem folgenden Fenster kannst Du den Server (nur wirklich relevant im MultiHost-Betrieb) sowie die gewünschte Instanznummer festlegen. Ich lasse die Einstellung in der Regel auf Auto stehen, sodass ioBroker selber die Instanznummer vergibt. Mit Hinzufügen wird der Adapter dann installiert.

Einfügen und Konfiguration im VIS-Editor
Nach der Installation des Adapters wechseln wir in den VIS-Editor und wählen unsere View aus, auf die wir das Input-Widget setzen möchten. Wir ziehen dann das Input-Widget auf die View.

In den Einstellungen des Widgets können wir nun den Datenpunkt „Object ID“ auswählen, welcher den Wert des Input-Widgets aufnehmen soll.

In unserem Beispiel wählen wir hier einen eigenen Datenpunkt aus. Hier kann natürlich auch jeder beliebig andere Datenpunkt gewählt werden.

Das Input-Widget ist jetzt einsatzbereit. Wir können nun also im nächsten Schritt die Visualisierungsoberfläche VIS öffnen und in das Input-Widget einen Wert eingeben. Nach dem die Eingabe fertig ist, können wir entweder das Feld verlassen oder Enter drücken.

In den Objekten sehen wir nun unseren Wert in dem entsprechenden Datenpunkt.

So einfach können wir also Werte (Zeichenfolgen, Zahlen, etc.) über die View in die Objekte schreiben. Der letzte Abschnitt war aber doch sehr theoretisch, und hat so natürlich wenig praktischen Nutzen. Im folgenden Beispiel zeige ich daher, wie ich meinen Echo Dot so entsprechende Eingaben sprechen lassen kann 😉

Praktisches Beispiel mit Amazon Alexa

Im ersten Schritt erstelle ich für die Sprachausgabe einen eigenen Datenpunkt, in den ich den Text über das Input-Widget einlese. Wir könnten alternativ auch direkt in den Echo Datenpunkt schreiben, ich möchte das aber lieber separieren und dafür einen eigenen Datenpunkt schaffen. Somit bin ich später variabler, falls ich damit noch weitere Aktionen ausführen möchte.

Auf der View lege ich nun die Object ID des Input-Widgets auf den oben angelegten Datenpunkt. Wenn ich die View nun ausführe und einen Text eingebe, sollte dieser nun in dem definierten Datenpunkt abgelegt werden.

Im nächsten Schritt schreiben wir uns nun ein Skript, welches auf die Veränderung des Datenpunktes reagiert, und den Wert per setState() Aufruf in den Datenpunkt des Echo-Devices in den Speak-Command überträgt.

on({id: "Datenpunkte.0.EchoDevices.EchoDotKueche.Speak", change: "ne"},
function (obj) {
setState('alexa2.0.Echo-Devices.XXXXXXXX.Commands.speak', obj.state.val );
});

Das war schon alles, der Echo-Dot sollte nun lustig die Textausgaben durchführen, welche ich ihm per Input-Widget zur Verfügung stelle, eine lustige Funktion 😉

Ich hoffe euch gefällt dieser Artikel. Über Kommentare unterhalb des Artikels oder per E-Mail freue ich mich wie immer ?