Dokumentation für VIS?

[Ohne Not.]

@hiltex
Hey, die bin ich gerade auch am suchen.
Versuch mal das hier:

<button onclick="myFunction()">Klick mich</button>
<script>
function myFunction()
{
     vis.setValue(oid, true);
}
</script>

Alternativ sollte auch das hier gehen:

<button onclick="myFunction()">Klick mich</button>
<script>
function myFunction()
{
     this.servConn._socket.emit('setState', oid, true);
}
</script>

[Homoran]

@hiltex sagte in Dokumentation für VIS?:

wie man bestimmte Sachen Widget-unabhängig bauen kann, zum Beispiel, wie ich die Funktion eines Button State mit einem beliebigen Element (vielleicht einem Bild o.ä.) selber bauen kann.

das ist wohl eher Javascript, das über Bindings eingebaut wird.
Nicht wirklich vis-"Bedienung".

[Ohne Not.]

Hey @Homoran,
hast du zufällig eine Dokumentation zum Thema "Bindings" oder eine Quelle in der man sich schlau lesen kann?

[arteck]

@ohne-not https://forum.iobroker.net/topic/45764/vis-html-binding-mit-variable

https://github.com/ioBroker/ioBroker.vis#bindings-of-objects

[Ohne Not.]

Hey @arteck
danke. Ich meine das Binden via JS. also z.b.

vis.states.bind(oid + '.val', (e, newVal, oldVal) => console.log(e.type + ' change to ' + newVal));

Leider finde ich dazu keine Dokumentation. Auch für weitere funktionen / informationen beim Zugriff auf das Object vis und this.servConn._socket

[Hiltex]

Ich hatte tatsächlich gestern Abend noch herausgefunden, wie ich mein Vorhaben umsetzen kann.

@homoran sagte in Dokumentation für VIS?:

das ist wohl eher Javascript, das über Bindings eingebaut wird.
Nicht wirklich vis-"Bedienung".

Nicht ganz. Das Scripting selbst ist nicht das Problem gewesen, sondern die Möglichkeiten, die VIS bietet, was die eigentliche Frage war.

Durch Analysieren von Widgets hatte ich folgende Lösung gefunden:

<button class="bestätigen" onClick="vis.setValue('0_userdata.0.ZZ_Test.Test01.test29', true);">Rücksetzen</button>

Dass man mittels vis.setValue(oid, val); mit beliebigen Elementen Datenpunkte verändern kann war die Information, die ich gesucht hatte. Somit brauch ich nun nicht für jeden Dialog eine eigene View bauen, sondern kann das direkt im HTML-Dialog eintragen, was der Übersichtlichkeit sehr zuträglich ist.

Das kann ich sicherlich noch an der einen oder anderen Stelle gut gebrauchen.

[Homoran]

@hiltex sagte in Dokumentation für VIS?:

sondern die Möglichkeiten, die VIS bietet, was die eigentliche Frage war.

ganz ehrlich?
ich habe keine Ahnung wer so was wissen kann und soll.

Wenn, dann wäre das IMHO ein Thema für die Developer Doku.

Der normale Anwender wird so etwas kaum benötigen

[Hiltex]

@homoran sagte in Dokumentation für VIS?:

Der normale Anwender wird so etwas kaum benötigen

Wen meinst du denn mit "normale Anwender"? Wenn man sich im Forum umschaut, dann gibt es hier echt viele, die sich mächtig ins Zeug legen um eine tolle Visualisierung auf die Beine zu stellen. "Normal" finde ich das überhaupt nicht, aber ich verstehe natürlich, was du meinst

[Homoran]

@hiltex sagte in Dokumentation für VIS?:

Normal" finde ich das überhaupt nicht

ich auch nicht, und bewundere Leute, die wie du jetzt, durch "reversed engineering" solche Dinge herauskitzeln.

Nur wo soll man so etwas dokumentieren ohne den Ruf von iobroker er sei nur etwas für Nerds noch mehr zu festigen und ohne den Großteil der 65000 Nutzer und erst Recht Interessenten abzuschrecken.

Ganz zu schweigen davon, wer so eine "ioBroker deep insight" Doku schreiben könnte.

[Hiltex]

@homoran
Ich war ja eigentlich der Meinung, dass es sowas schon gibt und nicht erst geschrieben werden muss, daher auch die ursprüngliche Frage. "Developer Doku" war da schon das richtige Stichwort. Das Wissen muss ja grundsätzlich vorhanden sein, sonst könnte ja niemand Widgets entwickeln. Die Frage ist nur, ob das Wissen auch irgendwo niedergeschrieben ist, oder ob die Entwickler den Quellcode als Dokumentation nutzen, was ja nicht ganz unüblich ist.

Ich hatte schon ein paar Angriffe unternommen, mich mit VIS etwas intensiver auseinanderzusetzen. Da sind etliche Widgets fehlerhaft oder verhalten sich anders, als andere Widgets aus demselben Set. Aber ich hab das immer wieder schnell mangels Dokumentation fallen lassen.

Was den Ruf von ioBroker angeht ist mit bisher eigentlich noch nichts schlechtes untergekommen. FHEM mag nerdig sein, aber ioBroker finde ich äußerst benutzerfreundlich. Außer ein paar Design-Sachen wüsste ich nicht, wie man es besser machen könnte. Großer Funktionsumfang und viele Möglichkeiten erfordern eben auch eine komplexe Software, mit der sich die Anforderungen umsetzen lassen. Der Ruf wird wohl einfach dem Thema geschuldet sein. Smart Home in Summe ist ja schon etwas nerdig, sobald es über "Hura, mein Zuhause ist smart, denn ich kann eine Steckdose durch einen Zwischenstecker mit dem Handy ein- und ausschalten!" hinaus geht. Steigern lässt sich das immer.

[Homoran]

@hiltex sagte in Dokumentation für VIS?:

Die Frage ist nur, ob das Wissen auch irgendwo niedergeschrieben ist, oder ob die Entwickler den Quellcode als Dokumentation nutzen, was ja nicht ganz unüblich ist.

was das angeht könnte vielleicht @uncletwas wissen (hoffe ich). Ich habe bisher nur die Anwenderdoku gemacht. Mehr kann ich auch gar nicht, bin ja auch nur ein User.

@hiltex sagte in Dokumentation für VIS?:

FHEM mag nerdig sein, aber ioBroker finde ich äußerst benutzerfreundlich

ich versuche es meist so: iob kann ganz einfach bedient werden, wer mehr will kann das aber auch!

[Hiltex]

@homoran sagte in Dokumentation für VIS?:

ich versuche es meist so: iob kann ganz einfach bedient werden, wer mehr will kann das aber auch!

Das würde ich unterschreiben.

[OliverIO]

@hiltex

tja leider ist das mit der doku sehr dürftig.
ich habe mich selbst du vorhanden code der widgets und auch von vis selbst durchgewühlt und viel debugged um zu verstehen wie ein paar sachen funktionieren.
leider ist vis sehr monolithis gebaut mit sehr großen funktionen (also mit vielen zeilen)
da macht es das debuggen schwer, weil man auch nicht immer so ganz versteht was da passiert.
vis mach auch nicht alles selbst, sondern behilft sich verschiedenen bibliotheken.
irgendwo steht was von vue, wird auch eingebunden, aber irgendwie nicht so richtig genutzt
um das mit dem binding von states in javascript zu verstehen muss man sich mit der bibliothek canJS 2.3.35 (leider sehr alt) auseinandersetzen.
https://v2.canjs.com/docs/index.html

auch ist in vis einige an automatismus und magie enthalten, die es normalen widget entwicklern leichter macht.
am beispiel des folgenden einfachen widgets
https://github.com/ioBroker/ioBroker.vis/blob/66dc4b7fcaf24164d2f4c3261af7df6d96a54a5d/www/widgets/basic.html#L2619

das ist ein widget/componenten template auf basis can.widget/can.Component
da gibt es ein bisschen rahmeninformation, das das widget in der auswahl angezeigt wird und den eigentlichen inhalt.
jedes attribut, das mit oid beginnt, wird von vis erkannt (aber nur beim start), wird dann über socketio beim server abonniert und erhält dann automatisch alle änderungen, bzw. wird einfach komplett neu gezeichnet.

wenn man das alles selber machen möchte, dann muss man verschiedene dinge selbst organisieren.

Ich habe mir diese Funktion gebaut, damit ich ein Array mit Datenpunkten abonnieren kann und über änderungen informiert werde
https://github.com/oweitman/ioBroker.openligadb/blob/68473c3be773ceb2368176c4261ca74ab1e5e21e/widgets/openligadb/js/openligadb.js#L1429

    bindStates: function(elem,bound,change_callback) {
        var $div = $(elem);
        var boundstates = $div.data('bound');
        if (boundstates) {
            for (var i = 0; i < boundstates.bound.length; i++) {
                vis.states.unbind(boundstates.bound[i], boundstates.change_callback);
            }
        }
        $div.data('bound', null);
        $div.data('bindHandler', null);

        vis.conn.gettingStates = 0;
        vis.conn.getStates(bound, function (error, states) {
            vis.updateStates(states);
            vis.conn.subscribe(bound);

            for (var i=0;i<bound.length;i++) {
                bound[i]=bound[i]+'.val';
                vis.states.bind(bound[i] , change_callback);
            }
            $div.data('bound', {bound,change_callback});
            $div.data('bindHandler', change_callback);
        }.bind({change_callback}));
    },

alle change_handler werden hier in einem html element gespeichert,
damit sie beim nächsten aufruf wieder deabonniert und neu aboniert werden können, ansonsten kann es leicht zu speicherüberlauf oder memory leaks kommen.
tricky ist, das es exakt die gleiche funktions objekt sein muss zum deabonnieren, sonst klappts nicht
auch muss man aufpassen, das eine Änderung am Datenpunkt nicht mit kaskadierenden De/Neu-Abonnierungen statt findet, sonst ebenfalls Speicherprobleme

Dann erst mal viel Spaß und wenn du Fragen hast, gerne