From mboxrd@z Thu Jan 1 00:00:00 1970 From: Michael Tremer To: development@lists.ipfire.org Subject: Re: [PATCH] rrd graphs: Switch to SVG output format Date: Wed, 04 Aug 2021 16:40:14 +0200 Message-ID: <120DB920-CF9A-4D46-A250-2C1895577C51@ipfire.org> In-Reply-To: <20210804110106.592-1-hofmann@leo-andres.de> MIME-Version: 1.0 Content-Type: multipart/mixed; boundary="===============2400662443047103419==" List-Id: --===============2400662443047103419== Content-Type: text/plain; charset="utf-8" Content-Transfer-Encoding: quoted-printable 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 wrote: >=20 > The vector graphics can be scaled without becoming blurred. >=20 > Signed-off-by: Leo-Andres Hofmann > --- >=20 > Hi, >=20 > Michael suggested switching to the SVG format for the graphs: > https://lists.ipfire.org/pipermail/development/2021-July/010804.html >=20 > I have tested this with firefox and chrome, the graphs and error message lo= ok fine to me. > If someone knows a good SVG validator, I would be happy to get the link :) >=20 > Regards, > Leo >=20 > config/cfgroot/graphs.pl | 2 +- > html/cgi-bin/getrrdimage.cgi | 87 +++++++++++++++++++++--------------- > 2 files changed, 52 insertions(+), 37 deletions(-) >=20 > 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; >=20 > my @GRAPH_ARGS =3D ( > # Output format > - "--imgformat", "PNG", > + "--imgformat", "SVG", >=20 > # 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 @@ >=20 > use strict; > use URI; > -use GD; > -use GD::Text::Wrap; > +use Text::Wrap; > use experimental 'smartmatch'; >=20 > # 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 "ge= trrdimage.cgi")) { >=20 > ### Create graphs ### > # Send HTTP headers > -_start_png_output(); > +_start_svg_output(); >=20 > # Graphs are first grouped by their origin. > # This is because some graph categories require special parameter handling. > @@ -204,46 +203,62 @@ if($graphstatus) { >=20 > ###--- Internal functions ---### >=20 > -# 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); > } >=20 > -# 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_s= ize{'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); >=20 > - # 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_borde= r); > -=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 I= PFire theme > ); > - $textbox->set_font(gdLargeFont); > - $textbox->draw(25, 25); >=20 > - # 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 >=20 --===============2400662443047103419==--