eigene Visualisierung per socket.io
-
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
-
@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
-
wohin werden die Dateien der eigenen Seite bzw. die
conn.jsundindex.htmgespeichert? -
@ice987 Also ich muss gestehen, Frontend-Entwicklung gehört leider nicht zu meinen Kernkompetenzen
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 -
wenn jemand eine funktionierende "Minimalkonfiguration" bereitstellen könnte (ggf. reichen auch Infos, wie dies zu bewerkstelligen ist) würde mich mich freuen
-
könnte mir ggf. jemand weiterhelfen? wie kann ich nun den Datenpunkt
test1abonnieren?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
test1abonnieren, damit dieser automatisch aktualisiert wird? -
@ice987 Das machst du mit 'subscribe'
Siehe hierGruß
Reiner -
@rewenode
Vielen Dank für dein Feedback. Wie kann ich dann nur den einen Datenpunkt abonnieren? aktuell holt er mir immer tausende Datenpunkte... -
