eigene Visualisierung per socket.io

ice987

wie Ihr hier beschrieben habt, gibt es offenbar die Möglichkeit, eine eigene Visualisierung ohne vis zu erstellen.

wie sieht ein solches Setup aus?

Grüsse

rewenode

@ice987 Also einfach ausgedrückt, indem du eine eigene Website erstellst und für den Zugriff auf die Daten des ioBroker den socket.io Adapter nutzt.
Dann stehen dir alle Möglichkeiten zur Verfügung, die VIS auch nutzt.
Ist auf Github ganz gut beschrieben. Da gibt es auch ein Beispiel im example Ordner.
Sofern du direkt eine site bauen willst, solltest du die conn.js direkt nutzen können.
Komplizierter wird es, wenn du den Adapter nicht direkt in einer site nutzen willst, wie in meinen Fall, da habe ich die Verbindung für ein externes Node-Red (also nicht den eingebauten node-red Adapter) genutzt.
In so einem Fall musst du die conn.js an vielen Stellen umschreiben oder besser gleich neu machen, weil die an (gefühlt) 1000 Stellen davon ausgeht, dass die im Browser läuft.
Ist aber auch kein Hexenwerk.

Gruß Reiner

ice987

@rewenode

wohin werden die Dateien der eigenen Seite bzw. die conn.js und index.htm gespeichert?

rewenode

@ice987 Also ich muss gestehen, Frontend-Entwicklung gehört leider nicht zu meinen Kernkompetenzen :disappointed: Und ich will (und kann) hier nicht mit meinem Halbwissen glänzen.
Aber ganz allgemein kommt das i.d.R. in ein entsprechendes Verzeichnis auf dem Webserver (http static) und die index.html referenziert dann darauf:
Hängt halt davon ab, wie/wo du deine Website hostest/entwickelst.

In der index.html musst du dann die entsprechenden anpassen

<head>
    <!-- Replace "localhost" with real IP address of controller, if default port changed, correct it too -->
    <script type="text/javascript" src="http://localhost:8084/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="conn.js"></script>
</head>

Aber wie gesagt, vlt hat jemand ja mal eine Minimal-site gemacht, die er zur Verfügung stellt.

Gruß
Reiner

ice987

wenn jemand eine funktionierende "Minimalkonfiguration" bereitstellen könnte (ggf. reichen auch Infos, wie dies zu bewerkstelligen ist) würde mich mich freuen

ice987

könnte mir ggf. jemand weiterhelfen? wie kann ich nun den Datenpunkt test1 abonnieren?

auf Basis von dieser (nun modifizierten) Datei kann ich mir die Objekte anzeigen lassen:

<!doctype html>
<html>
<head>
    <!-- Replace "localhost" with real IP address of controller, if default port changed, correct it too -->
    <script type="text/javascript" src="https://192.xxx.x.xxx:8084/socket.io/socket.io.js"></script>
    <script type="text/javascript" src="conn.js"></script>
</head>
<body>

<!--
    Check the browser console!
-->

<script type="text/javascript">
    servConn.namespace   = 'mobile.0';
    servConn._useStorage = false;

    // var states = {};
    servConn.init({
        name:          'mobile.0',  // optional - default 'vis.0'
        connLink:      'https://192.xxx.x.xxx:8084',  // optional URL of the socket.io adapter
        socketSession: ''           // optional - used by authentication
    }, {
        onConnChange: function (isConnected) {
            if (isConnected) {
                console.log('connected');
                /*
                servConn.getStates(function (err, _states) {
                    var count = 0;
                    for (var id in _states) {
                        count++;
                    }
                    console.log('Received ' + count + ' states.');
                    states = _states;
                });
                */
                servConn.getStates("0_userdata.0.test.test1", (error, states) => {
                    document.getElementById("test1").innerHTML = states["0_userdata.0.test.test1"].val;
                });
            } else {
                console.log('disconnected');
            }
        },
        onRefresh: function () {
            window.location.reload();
        },
        /*
        onUpdate: function (id, state) {
            setTimeout(function () {
                console.log('NEW VALUE of ' + id + ': ' + JSON.stringify(state));
                states[id] = state;
            }, 0);
        },
        */
        onError: function (err) {
            window.alert(_('Cannot execute %s for %s, because of insufficient permissions', err.command, err.arg), _('Insufficient permissions'), 'alert', 600);
        }
    });
</script>

    Test1:  <b id="test1">unbekannt</b>

</body>
</html>

Wie kann ich nun nur diesen Datenpunkt test1 abonnieren, damit dieser automatisch aktualisiert wird?

rewenode

@ice987 Das machst du mit 'subscribe'
Siehe hier

Gruß
Reiner

ice987

@rewenode
Vielen Dank für dein Feedback. Wie kann ich dann nur den einen Datenpunkt abonnieren? aktuell holt er mir immer tausende Datenpunkte...

ice987

@ice987

_autoSubscribe : false

war die Lösung

Community Forum

NEWS

eigene Visualisierung per socket.io

Support us

622

32.7k

82.5k

1.3m