Project

General

Profile

Actions

Bug #3351

closed

increase traffic graph.php SVG resolution

Added by Bill McGonigle over 10 years ago. Updated over 8 years ago.

Status:
Needs Patch
Priority:
Normal
Assignee:
-
Category:
Web Interface
Target version:
-
Start date:
12/04/2013
Due date:
% Done:

0%

Estimated time:
Plus Target Version:
Release Notes:
Affected Version:
2.1
Affected Architecture:
All

Description

While debugging a limiter issue it turned out I needed the text on the traffic graphs which hadn't been working for me for a while. After a bit of googling I realized it had to do with Firefox's minimum font size setting.

What appears to be going on is this: The SVG produced for the traffic graphs has an internal coordinate resolution of 200x100. It has elements defined with font-sizes like 4. This turns out fine because the actual SVG rendering is scaled to its containing DOM element, so it's all just relative (n.b. I don't know anything about SVG really, just deducing).

The trick is that Firefox applies its minimum font size uniformly, based on css apparently. So, I have my minimum font size set to 14 (enough web designers seek to blind me) and this was causing the fonts in the SVG up to 14 out of 200/100, which leads the labels to run all over each other.

There's an old forum thread about a similar problem - not sure if it's the same or not:
http://forum.pfsense.org/index.php?topic=3511.0

To deal with this, I increased the internal resolution of the SVG (the part that says to not touch it) to 900x450 - the pfSense theme is hardcoded to 900px, so I figured that having the two match would establish appropriate scaling expectations for fonts. I scaled the other fixed values in the SVG by the same factor and also tweaked the font size and y position of the switch unit and scale labels, since they looked slightly wrong with just a straight scaling.

Seems to work for me in Firefox. I also checked it in Chromium and it looks pretty much the same as stock to me.

Attaching before and after screenshots and a patch. I haven't tested on Windows or MacOS yet and won't have a chance to do so right away - figured I'd upload what I've got so far. I'll test those when I can unless others do first.


Files

limiter-double-chart.png (41.4 KB) limiter-double-chart.png before Bill McGonigle, 12/04/2013 12:36 AM
limiter-double-chart-improved.png (32 KB) limiter-double-chart-improved.png after Bill McGonigle, 12/04/2013 12:36 AM
pfsense-svg-increase-resolution-4.5x.patch (6.11 KB) pfsense-svg-increase-resolution-4.5x.patch Bill McGonigle, 12/04/2013 12:36 AM
Actions #1

Updated by Renato Botelho over 10 years ago

This patch doesn't apply cleanly. Is it possible to submit this change using github's pull request? It's much easier for us to review and apply patches there.

Actions #2

Updated by Chris Buechler over 8 years ago

  • Status changed from New to Needs Patch

Bill: if you could update for bootstrap (current master) and put in a pull request, we can review there and get it merged. https://github.com/pfsense/pfsense

Actions

Also available in: Atom PDF