From mboxrd@z Thu Jan 1 00:00:00 1970 From: Leo Hofmann To: development@lists.ipfire.org Subject: Re: [PATCH] rrd graphs: Switch to SVG output format Date: Thu, 05 Aug 2021 10:40:56 +0200 Message-ID: <9de4349f-41e4-5eac-aa2f-c7256e4ad1cf@leo-andres.de> In-Reply-To: <120DB920-CF9A-4D46-A250-2C1895577C51@ipfire.org> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============0464757967854415738==" List-Id: --===============0464757967854415738== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable I used the Firefox developer tools to check the loading times of the images. On average, the SVG image is generated 10ms faster: "HTTP Wait" for PNG: ~126= ms, for SVG: ~115ms (My test system: Core 159 on Proxmox VM/Xeon 3,3GHz) Regards, Leo Am 04.08.2021 um 16:40 schrieb Michael Tremer: > Cool. Thank you. > > Did you test if the SVG files can be generated quicker than PNG? > > -Michael > >> On 4 Aug 2021, at 13:01, Leo-Andres Hofmann wrot= e: >> >> The vector graphics can be scaled without becoming blurred. >> >> Signed-off-by: Leo-Andres Hofmann >> --- >> >> Hi, >> >> Michael suggested switching to the SVG format for the graphs: >> https://lists.ipfire.org/pipermail/development/2021-July/010804.html >> >> I have tested this with firefox and chrome, the graphs and error message l= ook fine to me. >> If someone knows a good SVG validator, I would be happy to get the link :) >> >> Regards, >> Leo >> >> config/cfgroot/graphs.pl | 2 +- >> html/cgi-bin/getrrdimage.cgi | 87 +++++++++++++++++++++--------------- >> 2 files changed, 52 insertions(+), 37 deletions(-) >> >> diff --git a/config/cfgroot/graphs.pl b/config/cfgroot/graphs.pl >> index 441d4c483..02341eb45 100644 >> --- a/config/cfgroot/graphs.pl >> +++ b/config/cfgroot/graphs.pl >> @@ -40,7 +40,7 @@ my $ERROR; >> >> my @GRAPH_ARGS =3D ( >> # Output format >> - "--imgformat", "PNG", >> + "--imgformat", "SVG", >> >> # No border >> "--border", "0", >> diff --git a/html/cgi-bin/getrrdimage.cgi b/html/cgi-bin/getrrdimage.cgi >> index c08247c57..92f8b585d 100644 >> --- a/html/cgi-bin/getrrdimage.cgi >> +++ b/html/cgi-bin/getrrdimage.cgi >> @@ -21,8 +21,7 @@ >> >> use strict; >> use URI; >> -use GD; >> -use GD::Text::Wrap; >> +use Text::Wrap; >> use experimental 'smartmatch'; >> >> # debugging >> @@ -52,7 +51,7 @@ my $range =3D lc $query{'range'}; # lower case >> # Check parameters >> unless(($origin =3D~ /^\w+?\.cgi$/) && ($graph =3D~ /^[\w\-.,; ]+?$/) && (= $range ~~ @Graphs::time_ranges)) { >> # Send HTTP headers >> - _start_png_output(); >> + _start_svg_output(); >> =09 >> _print_error("URL parameters missing or malformed.");=09 >> exit; >> @@ -76,7 +75,7 @@ unless(($origin ~~ @supported_origins) || ($origin eq "g= etrrdimage.cgi")) { >> >> ### Create graphs ### >> # Send HTTP headers >> -_start_png_output(); >> +_start_svg_output(); >> >> # Graphs are first grouped by their origin. >> # This is because some graph categories require special parameter handling. >> @@ -204,46 +203,62 @@ if($graphstatus) { >> >> ###--- Internal functions ---### >> >> -# Send HTTP headers and switch to binary output >> +# Send HTTP headers >> # (don't print any non-image data to STDOUT afterwards) >> -sub _start_png_output { >> +sub _start_svg_output { >> print "Cache-Control: no-cache, no-store\n"; >> - print "Content-Type: image/png\n"; >> + print "Content-Type: image/svg+xml\n"; >> print "\n"; # End of HTTP headers >> - binmode(STDOUT); >> } >> >> -# Print error message to PNG output >> +# Print error message to SVG output >> sub _print_error { >> my ($message) =3D @_; >> - $message =3D "- Error -\n \n$message"; >> - >> - # Create new image with the same size as a graph >> - my $img =3D GD::Image->new($Graphs::image_size{'width'}, $Graphs::image_= size{'height'}); >> - $img->interlaced('true'); >> - >> - # Basic colors >> - my $color_background =3D $img->colorAllocate(255, 255, 255); >> - my $color_border =3D $img->colorAllocate(255, 0, 0); >> - my $color_text =3D $img->colorAllocate(0, 0, 0); >> >> - # Background and border >> - $img->setThickness(2); >> - $img->filledRectangle(0, 0, $img->width, $img->height, $color_background= ); >> - $img->rectangle(10, 10, $img->width - 10, $img->height - 10, $color_bord= er); >> -=09 >> - # Draw message with line-wrap >> - my $textbox =3D GD::Text::Wrap->new($img, >> - text =3D> $message, >> - width =3D> ($img->width - 50), >> - color =3D> $color_text, >> - align =3D> 'center', >> - line_space =3D> 5, >> - preserve_nl =3D> 1 >> + # Prepare image options >> + my %img =3D ( >> + 'width' =3D> $Graphs::image_size{'width'}, >> + 'height' =3D> $Graphs::image_size{'height'}, >> + 'text_center' =3D> int($Graphs::image_size{'width'} / 2), >> + 'line_height' =3D> 20, >> + 'font_family' =3D> "DejaVu Sans, Helvetica, sans-serif" # Matching the = IPFire theme >> ); >> - $textbox->set_font(gdLargeFont); >> - $textbox->draw(25, 25); >> >> - # Get PNG output >> - print $img->png; >> + # Line-wrap message to fit image (adjust to font width if necessary) >> + local($Text::Wrap::columns) =3D int($img{'width'} / 10); >> + $message =3D wrap('', '', $message); >> + >> + # Create new image with fixed background and border >> + print <> + >> + >> + >> + >> + >> + >> + - $Lang::tr{'error'} - >> + >> +END >> +; >> + >> + # Print message lines >> + my $shift_y =3D 0; # Shifts text along y-axis >> + foreach my $line (split(/\n/, $message)) { >> + if($line ne "") { # Don't create empty tspan elements >> + print <> + $line >> +END >> +; >> + $shift_y =3D $img{'line_height'}; >> + } else { # Create blank lines by summing up unused line height >> + $shift_y +=3D $img{'line_height'}; >> + } >> + } >> + >> + # Finish SVG output >> + print <> + >> + >> +END >> +; >> } >> --=20 >> 2.27.0.windows.1 >> --===============0464757967854415738==--