Project

General

Profile

Actions

Bug #3351

closed

increase traffic graph.php SVG resolution

Added by Bill McGonigle almost 8 years ago. Updated about 6 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 almost 8 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 about 6 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