[wiregate] Erweiterung: Temperaturverläufe im Webmin anzeigen

[Gast]

Hallo zusammen,

ich möchte euch hier eine kleine Spielerei vom Wochenende präsentieren. Da das Wiregate die Temperaturen ja schön mitloggt, die Präsentation aber eher stiefmütterlich behandelt, habe ich mir eine kleine Erweiterung gebastelt, die es ermöglicht zwei Temperaturen übersichtlich darzustellen.

ACHTUNG! Für das im folgenden Beschriebene gilt letztendlich das Gleiche wie für Arbeiten an Elektroinstallationen. Wenn man nicht weiß, was man macht, kann es beliebig in die Hose gehen. Also erst verstehen, was gemacht wird und erst dann nachmachen.

Zunächst muß man den ROOT-Zugang unter Webmin freischalten, damit man an das Filesystem kommt. Anschließend kann man unter sftp://root@10.0.1.11 auf beliebige Dateien des WireGates zugreifen. Unter Mac Os ist z.B. Cyberduck ein sehr praktisches Tool dafür.

Als erstes müssen wir in dem WireGate-Moduls des Webmins einen neuen Menupunkt anlegen. Dazu ergänzen wir die Zeilen 23 und 24 der Datei /usr/share/webmin/wiregate/index.cgi wie folgt:

@opts     = ( 'global', 'network', 'eibd', 'owserverconf', 'owsensorconf', 'vpn', 'status', 'time', 'update', 'plugins','socat','temperature');
@links     = ( 'edit_global.cgi', 'edit_network.cgi', 'edit_eibd.cgi', 'edit_owserver.cgi', 'edit_owsensorconf.cgi', 'vpn_index.cgi', 'status.cgi', 'edit_time.cgi', 'update.cgi?update=1', 'edit_plugins.cgi','edit_socat.cgi','temperature.cgi');

Damit haben wir den internen Namen des Submoduls auf "temperature" festgelegt. Die Präsentation in der Webmin-Oberfläche geschieht aber durch zwei Sprachdateien. Einmal für die deutsche Sprache und einmal in Englisch. Hier müssen wir entsprechende Textbausteine einfügen:

In der Datei /usr/share/webmin/wiregate/lang/de hängen wir

temperature_title=Temperaturen anzeigen

an und unter /usr/share/webmin/wiregate/lang/en

temperature_title=Show Temperatures

Zum Schluß fehlt uns noch ein Icon für die grafische Repräsentation des Submoduls. Dieses fügen wir unter /usr/share/webmin/wiregate/images/temperature.gif ein. Gefordert wird eine GIF-Datei mit 48px x 48px. Da ich meine dem Internet entliehen habe, möchte ich sie an dieser Stelle lieber nicht der Allgemeinheit zur Verfügung stellen.

Der eigentliche Code des Submoduls befindet sich in den Dateien temperature.cgi und temperature.js. Die CGI-Datei ist das Programm, welches der Webserver aufruft, wenn wir auf das oben hochgeladene Icon klicken. Durch das Programm wird eine dynamische HTML-Datei erzeugt, die im Browser angezeigt wird. Zunächst schaut die CGI-Datei, welche rrd-Dateien vorhanden sind und stellt diese in einer Dropbox zur Auswahl bereit. Die Darstellung der übernimmt das bereits vorhandene Skript graph.pl. Hier wurden nur die Aufrufparamter verändert, so dass die Ausgabe bei jedem Aufruf aktualisiert wird und die Ausgabegröße 850px x 600px beträgt. Die JavaScript-Datei enthält den Code zur Aktualisierung der Grafik, wenn wir eine andere rrd-Datei / einen anderen Sensor auswählen.

Wie das Ganze fertig aussieht, könnt ihr in im Anhang sehen. Vielleicht hat ja der ein oder andere Interesse daran es nachzubauen. Eine Anpassung an die eigenen Wünsche sollte mit ein wenig HTML- und Perl-Kentnissen aber kein Problem darstellen...

/usr/share/webmin/wiregate/temperature.cgi

#!/usr/bin/perl
# temperature.cgi
# Display temperature details

use File::Basename;

require './wiregate-lib.pl';

$head = "<script language=javascript type='text/javascript' src='temperature.js'></script>\n";

&ui_print_header(undef, $text{'index_title'}, "https://knx-user-forum.de/images/wiregate_logo.jpg", "temperature",0,0,1, 
        undef, $head, undef, &text('index_subtitle'));

%conf = &get_owsensorconf();        
        
print "Temperaturverlauf";
print "<br>";

@files = </var/www/rrd/28*.rrd>;
my($filename, $directories, $suffix) = fileparse($files[0]);

print "<img name=\"graph\" src=\"http://$ENV{'SERVER_NAME'}/graph.pl?--start=-3h;--end=now;-X=0;-W=WireGate;"
        ."--slope-mode;-h=600;-w=850;--full-size-mode;--vertical-label=%B0%20Celsius;"
        ."DEF:ds0=".$filename.":value:AVERAGE;LINE1:ds0%23ff0000:".$filename.";"
        ."DEF:ds1=".$filename.":value:AVERAGE;LINE1:ds1%230000ff:".$filename.""
        ."\n;\" width=\"850px\" height=\"600px\">";
        
print "<form><p>";
print "<select name=\"graph1\" size=\"1\" onchange=change_graph(\"$ENV{'SERVER_NAME'}\",this.form.graph1.options[this.form.graph1.selectedIndex].value,this.form.graph2.options[this.form.graph2.selectedIndex].value,this.form.start_time.options[this.form.start_time.selectedIndex].value);>";
    
     foreach $file (@files) {    
        my($filename, $directories, $suffix) = fileparse($file);
         print "<option value=\"".$filename."\">".$conf{substr($filename,0,15)}{'name'}." / ".$filename."</option>";
       }

print "</select>";

print " <select name=\"graph2\" size=\"1\" onchange=change_graph(\"$ENV{'SERVER_NAME'}\",this.form.graph1.options[this.form.graph1.selectedIndex].value,this.form.graph2.options[this.form.graph2.selectedIndex].value,this.form.start_time.options[this.form.start_time.selectedIndex].value);>";
print "<option value=\"---\" selected>---</option>";
    
     foreach $file (@files) {    
        my($filename, $directories, $suffix) = fileparse($file);
         print "<option value=\"".$filename."\">".$conf{substr($filename,0,15)}{'name'}." / ".$filename."</option>";
       }

print "</select></p>";

print "<p><select name=\"start_time\" size=\"1\" onchange=change_graph(\"$ENV{'SERVER_NAME'}\",this.form.graph1.options[this.form.graph1.selectedIndex].value,this.form.graph2.options[this.form.graph2.selectedIndex].value,this.form.start_time.options[this.form.start_time.selectedIndex].value);>";
print "<option value=\"-1h\">-1h</option>";
print "<option value=\"-2h\">-2h</option>";
print "<option value=\"-3h\" selected>-3h</option>";
print "<option value=\"-6h\">-6h</option>";
print "<option value=\"-12h\">-12h</option>";
print "<option value=\"-24h\">-24h</option>";
print "<option value=\"-48h\">-48h</option>";
print "<option value=\"-96h\">-96h</option>";
print "<option value=\"now-7days\">letzte Woche</option>";
print "<option value=\"now-1months\">letzer Monat</option>";
print "<option value=\"now-12months\">letztes Jahr</option>";
print "</select></p>";

print "</form>";    

&ui_print_footer("", $text{'index'});

/usr/share/webmin/wiregate/temperature.js

function change_graph(server,sensor1,sensor2,start_time) {
    if (sensor2=="---")
        {
        document.graph.src="http://"+server+"/graph.pl?--start="+start_time+";--end=now;-X=0;-W=WireGate;--slope-mode;"+
            "-h=600;-w=850;--full-size-mode;--vertical-label=%B0%20Celsius;"+
            "DEF:ds0="+sensor1+":value:AVERAGE;LINE1:ds0%23ff0000:"+sensor1+";"+
            "\n"
        }
    else
        {
        document.graph.src="http://"+server+"/graph.pl?--start="+start_time+";--end=now;-X=0;-W=WireGate;--slope-mode;"+
            "-h=600;-w=850;--full-size-mode;--vertical-label=%B0%20Celsius;"+
            "DEF:ds0="+sensor1+":value:AVERAGE;LINE1:ds0%23ff0000:"+sensor1+";"+
            "DEF:ds1="+sensor2+":value:AVERAGE;LINE1:ds1%230000ff:"+sensor2+";\n"
        }
    }

[hdehne]

Hallo Monti,

gute Arbeit, läuft einwandfrei.
Könnte man auch KNX Temperaturen abfragen ?

Gruß Hans

[makki]

Schöne Sache!

Ich denk mal drauf rum, das so oder ähnlich mit reinzunehmen, damits dann auch das (übernächste) Update übersteht
(Weil das nächste wäre eigentlich schon wieder überfällig, weiss nicht ob ich das noch unterbekomme)

Makki

[Monti]

Hallo Hans,

Könnte man auch KNX Temperaturen abfragen ?

leider nicht so einfach, da das WireGate keine externen Temperaturen loggt. Da würde es noch ein paar mehr Zeilen bedürfen. Machbar sollte es aber sein.

@makki: Kannst du gerne machen. War jetzt erstmal ein Schnellschuß. So könnte man die Zeit-/Datumeingabe nochmal ein wenig überarbeiten. Und ein Kalender mit jquery ist ja auch schnell eingebunden.

[StefanW]

leider nicht so einfach, da das WireGate keine externen Temperaturen loggt.

Doch, gibt ein Plugin dafür die Temperaturen von KNX-Devices, die per GA reinkommen, zu loggen.

[makki]

leider nicht so einfach, da das WireGate keine externen Temperaturen loggt.

Aber wohl ! Wer das hier hinbekommt, für den ist das ein leichtes, guckste hier..

Und ein Kalender mit jquery ist ja auch schnell eingebunden.

Jep Ich denke ja schon länger an Flot, weil viel schneller (und jetzt bereits Bestandteil der Cometvisu) aber das hat den Nachteil, das es sich nicht so schön als "Kamera" in HS Dream&Co einbinden lässt, daher hat IMHO beides seine Berechtigung.

Makki

[Monti]

Doch, gibt ein Plugin dafür die Temperaturen von KNX-Devices, die per GA reinkommen, zu loggen.

Aber wohl ! Wer das hier hinbekommt, für den ist das ein leichtes, guckste hier..

Okay, ihr habt mich überzeugt ;-) Momentan ist mein WireGate noch allein. Das KNX-Umfeld fehlt noch, daher kannte ich das Skript noch nicht.

Flot kannte ich noch gar nicht. Sieht vielleicht ein wenig hipper aus als die rrd-eigenen Plotroutine.

[makki]

So, ich hab das mal aufgegriffen aber noch ein bisschen "gepimpt"

Aktuell für bis zu 8 Werte und die meisten Optionen zwar sinnvoll vorbelegt aber frei wählbar, in Web 1.5 mit automatischem Reload, Farbauswahl und so. Muss man noch ein bisschen aufhübschen aber das kommt wenn nichts grobes schiefläuft mit dem nächsten Update "offiziell" mit..

Makki

[marlan99]

Ist denn schon wieder Weihnachten?

Mensch freu ich mich drauf !!

Gruss
Marcel

[StefanW]

"Mann" muss diesen Graphen-Konfigurator für das WireGate erstmal in Action gesehen haben, so schön konnte man sich bisher noch nie die Grafiken zusammenstellen.

Mit Rechtsklick läßt sich dann die URL speichern die alle Parameter enthält um diese dann in eine Visu usw. einzubinden.

Also ich war gestern bei der Vorführung von Makki begeistert. Und es wird mit dem nächsten Update noch zwei andere Features geben.. sofern sich keine Regressionen finden lassen.

[martenss]

Any idea when this Graphen-Konfigurator will be released?
Just did an upgrade but it seems this nice extension is still not included...

Kind regards, martenss

[makki]

Released in these minutes

Es ist allerdings noch ein bisschen "versteckt" auf der Senorseite ganz unten:

Makki

[netzkind]

Bei mir werden in den Select-Listen auf der Auswahl manche rrds mehrfach angezeigt ... ist da was bei mir krumm?

Zwischenablage01.jpg

Grüße,
Julian

[martenss]

Works as expected, thanks!

[swiss]

Hallo makki

Ich wollte gerade das Update installieren um die neuen Funktionen zu nutzen aber das WG meldet immer einen Fehler:

E: The package collectd needs to be reinstalled, but I can't find an archive for it.

Patch Level 26 ist drauf aber ein Update auf 27 funktioniert nicht. Was mache ich falsch?