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 c3fb43eeb8..7b92992b63 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 f06b6d5de5..e937e49b1b 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 8e016b6cf6..e5db5c212c 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 b0a5d3a36d..7b5a848bfd 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 15a95b6b9f..ddf41771a5 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 590ad15bff..071b93f5d5 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 a0e7655ab9..487ba996c2 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 cc4b3c9653..b8850677cd 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 1cc18f8978..9421fc111e 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 3cb2741301..27d3982a66 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; +} -- 2.39.5