From a249ccd2e4e56798fcfe01b24a180eb461999626 Mon Sep 17 00:00:00 2001 From: Michael Tremer Date: Wed, 15 Mar 2017 13:45:05 +0000 Subject: [PATCH] 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 Signed-off-by: Michael Tremer --- config/cfgroot/graphs.pl | 200 ++++-------------- config/rootfiles/core/110/filelists/files | 9 + html/cgi-bin/entropy.cgi | 2 +- html/cgi-bin/hardwaregraphs.cgi | 4 +- html/cgi-bin/netovpnsrv.cgi | 2 +- html/cgi-bin/qos.cgi | 4 +- html/cgi-bin/system.cgi | 4 +- html/html/themes/darkdos/include/style.css | 5 + html/html/themes/ipfire/include/css/style.css | 5 + html/html/themes/maniac/include/style.css | 5 + 10 files changed, 79 insertions(+), 161 deletions(-) diff --git a/config/cfgroot/graphs.pl b/config/cfgroot/graphs.pl index c3fb43eeb..7b92992b6 100644 --- 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 "
"; print "".$Lang::tr{'hour'}.""; print " - "; @@ -93,7 +112,7 @@ sub makegraphbox { print " - "; print "".$Lang::tr{'year'}.""; print "
"; - print ""; + print ""; } # 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 f06b6d5de..e937e49b1 100644 --- 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 8e016b6cf..e5db5c212 100644 --- 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 b0a5d3a36..7b5a848bf 100644 --- 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 15a95b6b9..ddf41771a 100755 --- 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 590ad15bf..071b93f5d 100644 --- 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 a0e7655ab..487ba996c 100644 --- 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 cc4b3c965..b8850677c 100644 --- 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 1cc18f897..9421fc111 100644 --- 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 3cb274130..27d3982a6 100644 --- 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; +}