eigenen Code in widget anzeigen

jumbo125

Hallo zusammen
ich bin neu in der welt von iBroker und Vis und lese mich gerade etwas ein.
Bisher habe ich eine webbasierte Oberfläche selbst programmiert um einige Daten anzuzeigen.
Nun möchte ich auf ioBroker umsteigen, jedoch gibt es ein paar geräte weöche nicht unterstütz werden. hier habe ich aber mein eigenes php script.
nun die frage:
kann ich in einem Widget mein eigens php script einfügen bzw. anzeigen lassen, sowie meinen html code und javascript functionen? ich nutze auch ein paar externe javascript bibliotheken wie jquery usw.
Super wäre es, wenn ich einfach einen html code in ein widget schreiben kann, mit php und js Interpretierung

Vielen Dank
Lg jumbo125

Codierknecht

@jumbo125 sagte in eigenen Code in widget anzeigen:

kann ich in einem Widget mein eigens php script einfügen bzw. anzeigen lassen, sowie meinen html code und javascript functionen? ich nutze auch ein paar externe javascript bibliotheken wie jquery usw.

Kurze Antwort: Nein.
PHP ist server-side und prinzipiell gibt ein PHP-Script nichts aus. Es liefert lediglich Ergebnisse, die im Falle von HTML von Deinem Browser dargestellt werden können.
Javascript und auch jQuery sind client-side. Das kann man auch in einem (HTML-) Widget nutzen.

Es stellt sich allerdings eher die Frage: Was sind das für nicht unterstützte Geräte?

OliverIO

@jumbo125

also ja, PHP ist serverseitig, widgets sind client-seitig (also browser)
und kein browser versteht PHP.

Was du aber machen kannst, ist dein PHP-Skript minimal erweitern und die Werte per REST-API in Datenpunkte des iobrokers schreiben lassen
https://github.com/ioBroker/ioBroker.simple-api
php hat da ja schon einen eingebauten befehl mit dem man solche requests absenden kann
https://www.php.net/manual/de/function.http-build-query.php

falls dir das lieber ist und das php skript auf dem selben rechner läuft wie der iobroker kannst du die datenpunkte auch per shell execution aus php heraus setzen.
ich würde aber lieber den api-ansatz nehmen, da man dann weniger probleme mit den rechten hat

du hast jetzt nicht genau geschrieben, ob du deine Weboberfläche übernehmen willst? Aber das ist nicht ganz so einfach, da ja iobroker zusammen mit einer visualisierung (vis ist nur eine Möglichkeit) auf socket.io setzt um Daten zwischen Server und client auszutauschen.
ich vermute auch, das du php templating nutzt. Also php deine komplette Webseite erzeugt und du dazwischen deine php-Befehle setzen kannst. Das wirst du so nicht übernehmen können.
Daher ist es wahrscheinlich ratsam deine oberfläche mit vis (oder einer anderen visualisierung) nachzubilden.
jquery ist bereits in vis enthalten (bei den anderen weiß ich es nicht)

jumbo125

@codierknecht
Okay. Danke dir.
Wenn ich das richtig verstanden habe, sind serverseitige Anfragen nicht möglich, da die seite geladen werden müsste.
Das wäre aber kein Problem!
Ich würde alles mittels javascript jquery ajax "reinladen". Geht das dann?

Kann der iobrocker php interpretieren?

Ich habe aber sowieso einen apache server laufen, wo die php datein liegen.

Hier komme ich an eine andere Frage am Rande..... lässt sicher der Port vom ioBroker ändern? statt 80 bspw. 90?
Ich habe einen apache server laufen und einen Camera Server, um RTSP Streams für Web daten zugänglich zu machen.

Achja, das gerät: Pontos Base von Hansgrohe, dazu habe ich mir ein Statistik programm erstellt, mit Tages, Wochen und Jahresverbrauch. Inkl. grafischer darstellung.

Codierknecht

@jumbo125 sagte in eigenen Code in widget anzeigen:

Kann der iobrocker php interpretieren?

Nein.
Aber Dein Script könnte wie @OliverIO schreibt das REST-API nutzen um Datenpunkte des ioBroker zu beschreiben.
Wir kennen jetzt Deine grafische Auswertung nicht und die hat sicher viel Arbeit gemacht, aber ich persönlich würde an der Ecke auf ioBroker, einen History-Adapter (z.B. SQL) und z.B. Grafana umstellen.
Wenn Du ioBroker nutzen möchtest, würde ich nur die wirklich nötigen Teile in PHP belassen und den Rest im ioB machen.

@jumbo125 sagte in eigenen Code in widget anzeigen:

lässt sicher der Port vom ioBroker ändern? statt 80 bspw. 90?

ioBroker nutzt für das Admin-Interface standardmäßig 8081 und für Web 8082. Das lässt sich natürlich ändern, falls es zu Konflikten in Deiner Infrastruktur kommt.

jumbo125

@codierknecht
super danke dir.
Das heißt der iobroker kann auf meine mysql datenbank zugreifen????
https://www.smarthome-tricks.de/grafana/2-2-hinzufugen-einer-neuen-datenquelle/

Codierknecht

@jumbo125 sagte in eigenen Code in widget anzeigen:

Das heißt der iobroker kann auf meine mysql datenbank zugreifen????

Mit dem SQL-Adapter? JA!
Theoretisch könntest Du sogar Deine bereits vorhandenen Daten so umschreiben (kopieren), dass Grafana die nahtlos mit den neuen Daten weiterverwenden kann.
Oder man arbeitet mit einem UNION, um die alten Daten zusammen mit den neuen darzustellen.
Oder mit 2 Datenquellen in Grafana ...
Viele Wege führen nach Rom ;-)

jumbo125

@codierknecht
echt super.

Die Daten mittels der simple api zu setzten klingt auch sehr gut.
Wenn ich das richtig verstehe, kann ich den adapter installieren und in diesem dann eine daten url-abfrage durchführen und diese werte dann in einen datensatz schreiben.
das klingt alles sehr gut, aber kann man einfach so datensätze anlegen, wenn ich keinen Adapter zu einem gerät erstellt habe?
Prinzipiell wirkt es für mich jetzt einfacher, wenn ich mittels ajax request ein php script aufrufe und die daten in die mysql DB schreibe. Mittels grafana und influxDB gebe ich die daten am tablet aus.
Wenn ich noch zwei Fragen stellen darf:

Kann man in grafana oder im influxDB ein Zeitintervall angeben, damit die Statistik aktuell bleibt?
Wäre es auch möglich in simple api einen zeitgesteuerten request auszuführen? oder muss dies dann mittels javascript im code durchgeführt werden? Den html code und js kann man ja ins widget schreiben, wenn ich das richtig verstanden habe.
Prinzipiell müsste ich nämlich immer am Tagesende ein PHP script suaführen. Das würde mir einen cronjob ersparren

danke euch

Codierknecht

@jumbo125 sagte in eigenen Code in widget anzeigen:

kann man einfach so datensätze anlegen, wenn ich keinen Adapter zu einem gerät erstellt habe

In 0_userdata.0 kannst Du anlegen was Du möchtest.

@jumbo125 sagte in eigenen Code in widget anzeigen:

Prinzipiell wirkt es für mich jetzt einfacher, wenn ich mittels ajax request ein php script aufrufe und die daten in die mysql DB schreibe. Mittels grafana und influxDB gebe ich die daten am tablet aus.

Ich würde per Script oder Blockly 1x am Tag das PHP-Script aufrufen.

Wie viele Werte liefert das denn? Die könnte man in PHP als JSON zurückliefern, im Script/Blockly gleich weiterverarbeiten und in entsprechende DP schreiben.
Diese DP werden dann mit dem SQL-Adapter historisiert und dienen als Basis für Grafana.

Das Ganze hätte den Vorteil, dass Dein PHP-Script wirklich nur noch zum Auslesen der Werte da ist.
Aber auch das könnte man eigentlich noch abschaffen, wenn man im Script direkt das API des Gerätes anspricht.
Kommt halt darauf an, wie das API aufgebaut ist und was es liefert.

@jumbo125 sagte in eigenen Code in widget anzeigen:

Kann man in grafana oder im influxDB ein Zeitintervall angeben, damit die Statistik aktuell bleibt?

Zu Influx kann ich nix sagen, da ich ebenfalls MySQL einsetze und da halt lieber mit SQL zu Werke gehe.
In Grafana kannst Du selbstverständlich ein Intervall mitgeben, damit das in der Visualisierung immer aktuell ist.

Beispiel:

<iframe height="620" width="980" src="http://192.168.178.5:8089/d/CyILiy_7z/ubersicht?orgId=1&from=now-7d&to=now&viewPanel=4&kiosk" frameborder="0" style="background-color:transparent"></iframe>

jumbo125

@codierknecht said in eigenen Code in widget anzeigen:

Die könnte man in PHP als JSON zurückliefern, im Script/Blockly gleich weiterverarbeiten und in entsprechende DP schreiben.
Diese DP werden dann mit dem SQL-Adapter historisiert und dienen als Basis für Grafana.

ah, okay.
EDIT: jetzt habe ich es gecheckt. mittes sql protokolilierung daten in meine normale MySql DB schreiben. Der ioBroker bezieht sie dann daraus

darf ich mich hier melden, falls ich schwierigkeiten habe?
Der request ist sehr einfach und gibt auch nur 4-5 werte zurück....
Das script welches immer am Tagesende ausgeführt werden soll gibt keine werte zurück. es werden lediglich daten in die DB geschrieben

Wie machst du das, ohne Influx? wie verwendest du weiterhin mysql ?
umsomehr ich sehe, umsomehr staune ich wie vielseitig iobrocker ist

Codierknecht

@jumbo125 sagte in eigenen Code in widget anzeigen:

Wie machst du das, ohne Influx? wie verwendest du weiterhin mysql ?

Ich verwende statt Influx den SQL-Adapter und lasse den direkt in mein MySQL schreiben.

Die interessanten DP werden protokilliert

Und in Grafana wird der Salat dann abgefragt und formatiert.

Codierknecht

@jumbo125 sagte in eigenen Code in widget anzeigen:

Der request ist sehr einfach und gibt auch nur 4-5 werte zurück....
Das script welches immer am Tagesende ausgeführt werden soll gibt keine werte zurück. es werden lediglich daten in die DB geschrieben

Ich würde das umbauen (bzw. eine Alternative erzeugen), so dass das Script ein JSON liefert.
Dann rufst Du das in ioBroker einmal per Zeitplan auf und schreibst die 4-5 Werte in Deine (eigenen) Datenpunkte.
An denen hängt dann die Protokollierung ... der Rest dann prinzipiell wie oben gezeigt.

Es steht Dir natürlich frei einen Adapter für das exotische Gerät zu schreiben.
Da Du ja weißt wie man damit kommuniziert, müsstest Du lediglich PHP in JavaScript (Node) übersetzen.
Das Schreiben in Deine DB kannst Du dabei ja gerne weglassen. Das macht dann jeder so wie er es braucht.

jumbo125

@codierknecht

Danke DIR vielmals!!!!

ich kann 0815 javascript, jquery und php....., html und css
mysql ist etwas eingerostet....
weiß nicht wieviel aufwand das ist einen adapter zu programmieren, aber im google habe ich schon öfters gelesen, dass nach solch einem adapter gefragt wurde.....
wenn ich damit der community helfe, dann gerne.

ich werde mal auf meinem odroid ubuntu installieren, einen webserver und iobroker und etwas rumbasteln.... ohne etwas vor augen zu haben ist es realtiv schwer sich was vorzustellen.
mittlerweile habe ich auch schon gesehen, wie man datenpunkte erstellt, wobei ich auch hier etwas unschlüssig bin, da im video nur ein einzelner datensatz erzeugt wird.....
https://youtu.be/jLnUA55kNsA minute 4:20

kurz zu meinem php script, da es nicht so umfangreich ist.

ich bekomme mittels http_request einen wert von meinem exotischen gerät(gesamter Literverbrauch seit inbetriebnahme). Das passiert alle 60sek. und jeden Tag um 23:59. oder wenn ich auf einen button klicke, dieser löst das script mittels jquery ajax aus.
Dieser wert wird in eine Tabelle geschrieben, mit datum und 2-3 anderen infos. Jedesmal wenn das script ausgeführt wird, wird die bisherige Zeile in der Datenbank(unique = datum) überschrieben. so habe ich immer nur einen Wert pro Tag. aber zuvor wird noch etwas berechnet
fast fertig......

Den Wert "Literverbrauch seit inbetriebnahme" verwende ich dann um meinen tages verbrauch zu berechnen.
Das ist ganz einfach. Ich nehme einfach den gesamtverbrauch von gestern(der steht ja schon in der tabelle) und rechne ihn vom derzeitigen "Literverbrauch seit inbetriebnahme" ab. Damit erhalte ich den aktuellen tagesverbrauch.
so... fertig.....
Am Ende schreibe ich die werte in die Tabelle. d.h. pro Tag ein eintrag (Liter pro tag, Literverbrauch seit inbetriebnahme, Datum, Uhrzeit letzter Abfrage, Wasserdruck und emperatur)....

Bei der grafischen oberfläche frage ich mittels jquery ajax mySql einfach die Tagesvolumina seit der letzten 7 tage ab und stelle diese grafisch dar. (wobei ich mittels jquery den zeitraum auf Kalenderwoche, monat oder einzelne Tage verändern kann. Ändert ja nur die MySql abfrage)

Codierknecht

@jumbo125
Öltank?
Dann braucht ein Adapter eigentlich nur regelmäßig per HTTP-Request an das API und den Wert lesen.
Der Wert wird in einen einzelnen DP geschrieben (Literverbrauch seit Inbetriebnahme).
Den Rest erledigen der SQL-Adapter und z.b. SourceAnalytics.
Verbrauch pro Tag, Woche, Monat ... braucht sich der Adapter nicht drum kümmern. Gibt ja schon passende dafür ;-)

Und eigentlich braucht's nicht mal einen Adapter. Wenn der Wert über einen einzelnen HTTP-Request zu lesen ist, reicht ein kleines JS/Blockly dafür.

Richte Dir erstmal den ioBroker passend ein und melde Dich nochmal mit dem entsprechenden HTTP-Request.
Dann finden sich hier schon genügend Leute, die Dir bei der Umsetzung helfen.

jumbo125

@codierknecht
Oh super danke.
Der Request ans exotische Gerät gibt eine vielzahl an daten aus, daher würde ich den request an mein php script übermitteln und mittels http_build_query oder json_decode an die iobroker api senden. bzw. müsste es ja eigentlich schon reichen wenn ich am ende meines php scripts einen http-request mit den variablen (GET) an den datenpunkt senden....

Okay, aber schon in meine Datenbank schreiben, oder? und nur den Tagesverbrauch in einen datenpunkt.... greift dann sourcaanalytics auf einen Daenpunkt zu ode auf meine Datenbank?
in den Datenpunkt kann man ja nur einen Wert eintragen, oder?
ich kann ja nicht immer einen Datenpunkt für jeden tag erstellen.....

eine möglichkeit einen adapter zu erstellen oder eine möglichkeit, dass dies dann auch andere einfach nutzen können wird es nicht geben, oder? würde der community gerne auch etwas gutes tun

Kein Öltank, wasserleckage system... :-)

es geht um einen leckage detektor

achja es geht noch einen kleinen schritt weiter. (der grund weshalb ich auch iobroker nutzen möchte ist die rasche gui und die adapter möglichkeit). ich möchte einen On/Off slider anzeigen. beim switch event möchte ich den Haupthahn sperren (ist ebenfalls nur ein http request)

das wird dann auch mit einem script passieren, oder?

alle 60 sekunden wird der status gecheckt und der On/off slider dementsprechend adaptiert. wenn Rückgabe-Request = 1 dann "on", wenn request = 2 dann off. ich nehme an das geht dann so:
Script welches alle 60 sekunden ausgeführt wird --> Request an mein php file --> dies gibt status zurück. --> zurückgegebener Status wird in ioBroker Datenpunkt geschrieben. --> weiteres script ändert dann den ON/Off slider je nach Rückgabewert.
Status ändern:
wenn klick auf On/Off toggle -> Request zu einer php datei von mir mit dem derzeitigen On/off wert. --> PHP datei sendet Request an gerät zum umstellen, -> am ende wird ein http-Request wieder an ioBroker gegeben um den On/Off slider auf die richtige Stellung zu bringen

Tut mir wirklich leid wenn ich euch derart um eure Zeit beraube!

Codierknecht

@jumbo125
Nur mal als Beispiel:
Auf meiner Continuous-Integration-Maschine läuft ein PHP-Script, das mir diverse Werte liefert.
Das frage ich alle 10 Sekunden mit JS ab und schreibe die Ergebnisse in ein paar eigene DP.

var result, maintenance, online;
// Alle 10 Sekunden den Status ermitteln
schedule("*/10 * * * * *", async function () {
    maintenance = getState("0_userdata.0.Monitoring.Surface.maintenance").val;
    online = getState("unifi.0.default.clients.50:1a:c5:f6:de:37.is_online").val;
    // nur ausführen, wenn nicht im Wartungsmodus
    if (maintenance == 0 && online) { 
        try {
            require("request")("http://192.168.178.137/sysinfo.php", async function (error, response, result) {
            if (result) {  
                setState("0_userdata.0.Monitoring.Surface.memory_total", getAttr(result, 'memory'), true);
                setState("0_userdata.0.Monitoring.Surface.memory_used", getAttr(result, 'used'), true);
                setState("0_userdata.0.Monitoring.Surface.memory_free", getAttr(result, 'free'), true);
                setState("0_userdata.0.Monitoring.Surface.cpu", getAttr(result, 'load'), true);
            }
            }).on("error", function (e) {
                setState("0_userdata.0.Monitoring.Surface.online", false, true);
            });
        } catch (e) { 
            setState("0_userdata.0.Monitoring.Surface.online", false, true);
        }
    }
});

Wenn ein Leck erkannt wurde entsprechend zu reagieren, wäre der nächste Schritt.

Das mit dem Slider wäre ja ein Thema für eine Visualisierung. Prinzipiell gar kein Problem.
Das folgt dann später - immer Eins nach dem Anderen ;-)

jumbo125

@codierknecht
So... hat etwas gedauert mit dem odroid c2.... zuerstmal das passende os finden... vnc installieren... lamp und iobroker 😁😅

Jetzt läuft alles mal, außer der restart vom odroid, aber die bin ich hier verkehrt😉
So... zurück zum io Broker

Bezüglich der visuellen Darstellung habe ich Granada gefunden, welches sich als ideale integrieren lässt.
Was würdet ihr empfehlen?

Danke

Codierknecht

@jumbo125 sagte in eigenen Code in widget anzeigen:

Bezüglich der visuellen Darstellung habe ich Granada gefunden

Meinst Du vielleicht Grafana?

Was würdet ihr empfehlen?

Das nutzen hier recht viele User. Ich würd's empfehlen. Braucht natürlich etwas Einarbeitungszeit.

jumbo125

@codierknecht
ja, genau.
verzeihung, das war die autokorrektur

Homoran

@jumbo125 sagte in eigenen Code in widget anzeigen:

mit dem odroid c2.... zuerstmal das passende os finden...

https://www.armbian.com/odroid-c2/

@jumbo125 sagte in eigenen Code in widget anzeigen:

vnc installieren

wofür denn sowas?

auf den Server greift man per ssh zu

Community Forum

NEWS

eigenen Code in widget anzeigen

Support us

569

32.5k

81.7k

1.3m