Improve graphs

The graphs are using an iframe and PNG images where the resolution
did often not fit and the browser had to resize the image. That
led to blurred fonts and hard to read graphs.

This patch increases the size of the box and the image. With that
higher resolution resizing should not be too much of an issue, but
since the sizes of the iframe and image have been aligned should
not even be necessary.

Reported-by: Marcel Lorenz <marcel.lorenz@ipfire.org>
Signed-off-by: Michael Tremer <michael.tremer@ipfire.org>

diff --git a/config/cfgroot/graphs.pl b/config/cfgroot/graphs.pl
index c3fb43eeb83246e3a31efffb5ecf5503d85210ce..7b92992b631e814710182d33d768297abe27f02e 100644 (file)
--- a/config/cfgroot/graphs.pl
+++ b/config/cfgroot/graphs.pl
@@ -31,6 +31,30 @@ require "${General::swroot}/header.pl";
 
 my $ERROR;
 
+my @GRAPH_ARGS = (
+       # Output format
+       "--imgformat", "PNG",
+
+       # No border
+       "--border", "0",
+
+       # For a more 'organic' look
+       "--slope-mode",
+
+       # HxW define the size of the output image
+       "--full-size-mode",
+
+       # Watermark
+       "-W www.ipfire.org",
+
+       # Default size
+       "-w 910",
+       "-h 300",
+
+       # Use alternative grid
+       "--alt-y-grid",
+);
+
 # Read the global settings files to get the current theme and after this load
 # colors for this theme
 
@@ -77,11 +101,6 @@ foreach (@sensorsdir){
 # 3 if given is the height of the iframe default if nothing is given
 
 sub makegraphbox {
-       my $height = 285;
-       my $width = 700;
-
-       if ( $_[3] ne "" ){ $height = $_[3]; }
-
        print "<center>";
        print "<a href='".$_[0]."?".$_[1]."?hour' target='".$_[1]."box'><b>".$Lang::tr{'hour'}."</b></a>";
        print " - ";
@@ -93,7 +112,7 @@ sub makegraphbox {
        print " - ";
        print "<a href='".$_[0]."?".$_[1]."?year' target='".$_[1]."box'><b>".$Lang::tr{'year'}."</b></a>";
        print "<br></center>";
-       print "<iframe src='".$_[0]."?".$_[1]."?".$_[2]."' width='".$width."' height='".$height."' scrolling='no' frameborder='no' marginheight='0' name='".$_[1]."box'></iframe>";
+       print "<iframe class='graph' src='".$_[0]."?".$_[1]."?".$_[2]." scrolling='no' frameborder='no' marginheight='0' name='".$_[1]."box'></iframe>";
 }
 
 # Generate the CPU Graph for the current period of time for values given by
@@ -103,16 +122,10 @@ sub updatecpugraph {
        my $cpucount = `ls -dA $mainsettings{'RRDLOG'}/collectd/localhost/cpu-*/ 2>/dev/null | wc -l`;
        my $period    = $_[0];
        my @command = (
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-l 0",
                "-u 100",
                "-r",
@@ -237,16 +250,10 @@ sub updatecpugraph {
 sub updateloadgraph {
        my $period    = $_[0];
        RRDs::graph(
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-l 0",
                "-r",
                "-t Load Average ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
@@ -275,16 +282,10 @@ sub updateloadgraph {
 sub updatememorygraph {
        my $period    = $_[0];
        RRDs::graph(
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-l 0",
                "-u 100",
                "-r",
@@ -337,16 +338,10 @@ sub updatememorygraph {
 sub updateswapgraph {
        my $period    = $_[0];
        RRDs::graph(
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-l 0",
                "-u 100",
                "-r",
@@ -395,16 +390,10 @@ sub updateprocessescpugraph {
        my $count="0";
 
        my @command = (
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-l 0",
                "-r",
                "-t ".$Lang::tr{'processes'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
@@ -448,16 +437,10 @@ sub updateprocessesmemorygraph {
        my $count="0";
 
        my @command = (
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-l 0",
                "-r",
                "-t ".$Lang::tr{'processes'}." ".$Lang::tr{'memory'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
@@ -498,16 +481,10 @@ sub updatediskgraph {
        my $disk    = $_[0];
        my $period    = $_[1];
        RRDs::graph(
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t ".$disk." ".$Lang::tr{'disk access per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes per second'},
@@ -548,16 +525,10 @@ sub updateifgraph {
        my $interface = $_[0];
        my $period    = $_[1];
        RRDs::graph(
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t ".$Lang::tr{'traffic on'}." ".$interface." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes per second'},
@@ -591,16 +562,10 @@ sub updatevpngraph {
        my $interface = $_[0];
        my $period    = $_[1];
        RRDs::graph(
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t ".$Lang::tr{'traffic on'}." ".$interface." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes per second'},
@@ -634,16 +599,10 @@ sub updatevpnn2ngraph {
        my $interface = $_[0];
        my $period    = $_[1];
        RRDs::graph(
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t ".$Lang::tr{'traffic on'}." ".$interface." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes per second'},
@@ -704,16 +663,10 @@ sub updatevpnn2ngraph {
 sub updatefwhitsgraph {
        my $period    = $_[0];
        RRDs::graph(
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t ".$Lang::tr{'firewall hits per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes per second'},
@@ -766,16 +719,10 @@ sub updatepinggraph {
        my $period    = $_[1];
        my $host    = $_[0];
        RRDs::graph(
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-l 0",
                "-r",
                "-t ".$Lang::tr{'linkq'}." ".$host." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
@@ -812,16 +759,10 @@ sub updatewirelessgraph {
        my $period    = $_[1];
        my $interface    = $_[0];
        RRDs::graph(
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-t Wireless ".$interface." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v dBm",
                "--color=SHADEA".$color{"color19"},
@@ -855,16 +796,10 @@ sub updatehddgraph {
        my $disk = $_[0];
        my $period = $_[1];
        RRDs::graph(
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t ".$disk." ".$Lang::tr{'harddisk temperature'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v Celsius",
@@ -895,16 +830,10 @@ sub updatehwtempgraph {
        my $period = $_[0];
 
        my @command = (
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t ".$Lang::tr{'mbmon temp'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "--color=SHADEA".$color{"color19"},
@@ -948,16 +877,10 @@ sub updatehwfangraph {
        my $period = $_[0];
 
        my @command = (
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t ".$Lang::tr{'mbmon fan'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "--color=SHADEA".$color{"color19"},
@@ -1001,16 +924,10 @@ sub updatehwvoltgraph {
        my $period = $_[0];
 
        my @command = (
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t ".$Lang::tr{'mbmon volt'}." ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "--color=SHADEA".$color{"color19"},
@@ -1074,16 +991,10 @@ sub updateqosgraph {
        my $color="#000000";
 
        my @command = (
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t ".$Lang::tr{'Utilization on'}." (".$qossettings{'DEV'}.") ".$Lang::tr{'graph per'}." ".$Lang::tr{$period."-graph"},
                "-v ".$Lang::tr{'bytes per second'},
@@ -1133,16 +1044,10 @@ sub updatecpufreqgraph {
        my $cpucount = `ls -dA $mainsettings{'RRDLOG'}/collectd/localhost/cpu-*/ 2>/dev/null | wc -l`;
        my $period    = $_[0];
        my @command = (
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t ".$Lang::tr{'cpu frequency per'}." ".$Lang::tr{$period."-graph"},
                "-v MHz",
@@ -1178,16 +1083,10 @@ sub updatethermaltempgraph {
        my $thermalcount = `ls -dA $mainsettings{'RRDLOG'}/collectd/localhost/thermal-thermal_zone* 2>/dev/null | wc -l`;
        my $period    = $_[0];
        my @command = (
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 125",
                "-r",
                "-t "."ACPI Thermal-Zone Temperature"." - ".$Lang::tr{$period."-graph"},
                "-v Grad Celsius",
@@ -1237,16 +1136,10 @@ sub getprocesses {
 sub updateentropygraph {
        my $period    = $_[0];
        my @command = (
+               @GRAPH_ARGS,
                "-",
                "--start",
                "-1".$period,
-               "-aPNG",
-               "-i",
-               "-z",
-               "-W www.ipfire.org",
-               "--alt-y-grid",
-               "-w 600",
-               "-h 225",
                "-r",
                "--lower-limit","0",
                "-t $Lang::tr{'entropy'}",
@@ -1259,6 +1152,7 @@ sub updateentropygraph {
                "GPRINT:entrmax:" . sprintf("%12s\\: %%5.0lf", $Lang::tr{'maximum'}),
                "GPRINT:entrmin:" . sprintf("%12s\\: %%5.0lf", $Lang::tr{'minimum'}),
                "GPRINT:entravg:" . sprintf("%12s\\: %%5.0lf", $Lang::tr{'average'}) . "\\n",
+               "--color=BACK".$color{"color21"},
        );
 
        RRDs::graph (@command);

diff --git a/config/rootfiles/core/110/filelists/files b/config/rootfiles/core/110/filelists/files
index f06b6d5de5cdadf4c8cdcf931a9eeffd549426ce..e937e49b1b81aa1914bb8526791f52849be3d4c9 100644 (file)
--- a/config/rootfiles/core/110/filelists/files
+++ b/config/rootfiles/core/110/filelists/files
@@ -3,9 +3,18 @@ etc/issue
 etc/httpd/conf/server-tuning.conf
 etc/rc.d/init.d/unbound
 etc/sysctl.conf
+srv/web/ipfire/cgi-bin/entropy.cgi
+srv/web/ipfire/cgi-bin/hardwaregraphs.cgi
 srv/web/ipfire/cgi-bin/index.cgi
+srv/web/ipfire/cgi-bin/netovpnsrv.cgi
+srv/web/ipfire/cgi-bin/qos.cgi
+srv/web/ipfire/cgi-bin/system.cgi
 srv/web/ipfire/cgi-bin/vpnmain.cgi
+srv/web/ipfire/html/themes/darkdos/include/style.css
+srv/web/ipfire/html/themes/ipfire/include/css/style.css
+srv/web/ipfire/html/themes/maniac/include/style.css
 usr/lib/libssp.so.0
 usr/lib/libssp.so.0.0.0
 usr/local/bin/xt_geoip_update
 var/ipfire/langs
+var/ipfire/graphs.pl

diff --git a/html/cgi-bin/entropy.cgi b/html/cgi-bin/entropy.cgi
index 8e016b6cf6a8d93958f6e0c2902fba2d3f7514ce..e5db5c212cdd0c7016ddef79a7ccd6211d079909 100644 (file)
--- a/html/cgi-bin/entropy.cgi
+++ b/html/cgi-bin/entropy.cgi
@@ -45,7 +45,7 @@ if ( $querry[0] ne~ "") {
        &Header::openbigbox('100%', 'left');
 
        &Header::openbox('100%', 'center', $Lang::tr{'entropy'});
-       &Graphs::makegraphbox("entropy.cgi", "day", '', 350);
+       &Graphs::makegraphbox("entropy.cgi", "day");
        &Header::closebox();
 
        # Check for hardware support.

diff --git a/html/cgi-bin/hardwaregraphs.cgi b/html/cgi-bin/hardwaregraphs.cgi
index b0a5d3a36de7d94e506ec5d2f06f5cb13a319029..7b5a848bfdd53bcab6c860e6eb3874776c031501 100644 (file)
--- a/html/cgi-bin/hardwaregraphs.cgi
+++ b/html/cgi-bin/hardwaregraphs.cgi
@@ -113,7 +113,7 @@ if ( $querry[0] =~ "hwtemp"){
 
        if ( `ls $mainsettings{'RRDLOG'}/collectd/localhost/sensors-*/temperature-* 2>/dev/null` ) {
                &Header::openbox('100%', 'center', "hwtemp $Lang::tr{'graph'}");
-               &Graphs::makegraphbox("hardwaregraphs.cgi","hwtemp","day","375");
+               &Graphs::makegraphbox("hardwaregraphs.cgi","hwtemp","day");
                Header::closebox();
        }
 
@@ -125,7 +125,7 @@ if ( $querry[0] =~ "hwtemp"){
 
        if ( `ls $mainsettings{'RRDLOG'}/collectd/localhost/sensors-*/voltage-* 2>/dev/null` ) {
                &Header::openbox('100%', 'center', "hwvolt $Lang::tr{'graph'}");
-               &Graphs::makegraphbox("hardwaregraphs.cgi","hwvolt","day","435");
+               &Graphs::makegraphbox("hardwaregraphs.cgi","hwvolt","day");
                &Header::closebox();
        }
 

diff --git a/html/cgi-bin/netovpnsrv.cgi b/html/cgi-bin/netovpnsrv.cgi
index 15a95b6b9f7e063627484836482b5e19fd3a0d73..ddf41771a5b5226b3eb254b2cb3e136996c9512e 100755 (executable)
--- a/html/cgi-bin/netovpnsrv.cgi
+++ b/html/cgi-bin/netovpnsrv.cgi
@@ -59,7 +59,7 @@ if ( $querry[0] ne ""){
        if (@vpns){
                foreach (@vpns) {
                        &Header::openbox('100%', 'center', "$_ $Lang::tr{'graph'}");
-                       &Graphs::makegraphbox("netovpnsrv.cgi",$_, "day",320);
+                       &Graphs::makegraphbox("netovpnsrv.cgi",$_, "day");
                        &Header::closebox();
                }
        }else{

diff --git a/html/cgi-bin/qos.cgi b/html/cgi-bin/qos.cgi
index 590ad15bff37e60e45b8fa2b8a34b0763d56da8b..071b93f5d58ecb8660b253588a2f47df458f1e50 100644 (file)
--- a/html/cgi-bin/qos.cgi
+++ b/html/cgi-bin/qos.cgi
@@ -770,10 +770,10 @@ if ( ($qossettings{'DEFCLASS_INC'} eq '') || ($qossettings{'DEFCLASS_OUT'} eq ''
 }
 
        &Header::openbox('100%', 'center', "$qossettings{'RED_DEV'} $Lang::tr{'graph'}, $Lang::tr{'uplink'}");
-       &Graphs::makegraphbox("qos.cgi",$qossettings{'RED_DEV'},"hour","325");
+       &Graphs::makegraphbox("qos.cgi",$qossettings{'RED_DEV'},"hour");
        &Header::closebox();
        &Header::openbox('100%', 'center', "$qossettings{'IMQ_DEV'} $Lang::tr{'graph'}, $Lang::tr{'downlink'}");
-       &Graphs::makegraphbox("qos.cgi",$qossettings{'IMQ_DEV'},"hour","325");
+       &Graphs::makegraphbox("qos.cgi",$qossettings{'IMQ_DEV'},"hour");
        &Header::closebox();
 
 &showclasses($qossettings{'RED_DEV'});

diff --git a/html/cgi-bin/system.cgi b/html/cgi-bin/system.cgi
index a0e7655ab95e1b62aec711eb501b68f626f3fa4c..487ba996c2e4ef38169c27788d324b3902253d4b 100644 (file)
--- a/html/cgi-bin/system.cgi
+++ b/html/cgi-bin/system.cgi
@@ -57,12 +57,12 @@ if ( $querry[0] =~ "cpufreq"){
        &Header::openbigbox('100%', 'left');
 
        &Header::openbox('100%', 'center', "CPU $Lang::tr{'graph'}");
-       &Graphs::makegraphbox("system.cgi","cpu","day","325");
+       &Graphs::makegraphbox("system.cgi","cpu","day");
        &Header::closebox();
 
        if ( -e "$mainsettings{'RRDLOG'}/collectd/localhost/cpufreq/cpufreq-0.rrd"){
                &Header::openbox('100%', 'center', "CPU $Lang::tr{'graph'}");
-               &Graphs::makegraphbox("system.cgi","cpufreq","day","325");
+               &Graphs::makegraphbox("system.cgi","cpufreq","day");
                &Header::closebox();
        }
 

diff --git a/html/html/themes/darkdos/include/style.css b/html/html/themes/darkdos/include/style.css
index cc4b3c965359f6a047a0dd76cc7a57abd2dfc69b..b8850677cd204712234d77f589cf685258cb858e 100644 (file)
--- a/html/html/themes/darkdos/include/style.css
+++ b/html/html/themes/darkdos/include/style.css
@@ -466,3 +466,8 @@ table.fw-nat tbody tr td {
 #rx_kbs { color: green; }
 
 #tx_kbs { color: red; }
+
+iframe.graph {
+       width: 100%;
+       min-height: 300px;
+}

diff --git a/html/html/themes/ipfire/include/css/style.css b/html/html/themes/ipfire/include/css/style.css
index 1cc18f8978bfdc7d736bc59b3a27bc2ac2812ecf..9421fc111ea612c59c4e59c36e5bc775cc0211ea 100644 (file)
--- a/html/html/themes/ipfire/include/css/style.css
+++ b/html/html/themes/ipfire/include/css/style.css
@@ -327,3 +327,8 @@ table {
 table.fw-nat tbody tr td {
        height: 2.25em;
 }
+
+iframe.graph {
+       width: 100%;
+       min-height: 300px;
+}

diff --git a/html/html/themes/maniac/include/style.css b/html/html/themes/maniac/include/style.css
index 3cb2741301c5a606cc2fe29ee6dc1682849689fe..27d3982a66227bf1e91f96d99ee222fff2965381 100644 (file)
--- a/html/html/themes/maniac/include/style.css
+++ b/html/html/themes/maniac/include/style.css
@@ -472,3 +472,8 @@ table.fw-nat tbody tr td {
 #rx_kbs { color: green; }
 
 #tx_kbs { color: red; }
+
+iframe.graph {
+       width: 100%;
+       min-height: 300px;
+}