My take on a speedtest widget for pfsense.

Being a newcomer to pfsense I guess i’m still playing catchup, as the newbie when my download speeds are nowhere near what i’m paying for I suspect pfsense as thats the only thing that changed in my setup. Knowing what my broadband supplier is going to say I pre-empt this by doing my own diagnosis before calling them. I’ve disconnected everything from the back of my modem and plugged my laptop in directly, gone to www.Speedtest.net and hit the ‘GO’ button. Unfortunately the reading is no different (download speeds still suck*). One thing is for sure: I’ve just wasted several minutes dismantling a perfectly good hardware install, now I just have a mass of cables near my modem which need to be plugged back in.

There must be a better way to do the speedtest without having to do a complete dismantling of my installation. After some headscratching involving search terms in google such as pfsense and speedtest, I came across a post where someone was asking for a tool within pfsense which did the testing for you. Ok I know its not recommended by netgate themselves but hear me out. If the tool is ran from the psfense box I am emulating plugging in my laptop directly into the back of my broadband modem and hence fulfiling the requirment from my broadband supplier that the rest of the devices be disconnected from the hub/router.

My search led to seeking a widget that filled my requirement. I didn’t find one so i’m rolling my own.

Step 1.

How do I write a widget for pfsense ? um … lets look in the pfsense guide under the section about Creating widgets, anyone as confused as me? coming from a hardware background what I am seeing is just programmer speak. So i’m applying a bit of artistic licensing here what I actually need is just a php file, a javascript file and an inc file.

Step 2.

What about the mechanism for measuring the speeds. Easy we can cheat here as the big Search giants are in on the act by pushing their own take on a widget that runs a test directly from the search results. We just need to borrow one we like the look off and wrap it up in our widget. The caveat here is that the utility will target a server which may not necessarily be close to you so the results will be lowered according to distance.

How about this for our utility ? courtesy of Microsoft looks clean enough

MS Speedtest

URL: https://www.bing.com/widget/t/speedtest

or this one from MLab.

Mlab Speedtest

URL: https://www.measurementlab.net/p/ndt-ws.html

MLab is a opensource provider of testing utilities (Google use this one via the API for its widget).

Step 3.

Putting it all together

Ok I lied when I said 3 files, we actually only need 2 as there is no logic so we can scrap the javascript file. No logic you say? Yep in my limited understanding, the way the widget files work is that the inc file is used to define things like the title bar text.

The php file is the wrapper for the widget, so in our case go grab the speedtest mechanism from Microsoft/MLab and then display it in the widget frame whilst applying boundaries to fix the viewable size of the mechanism as necessary.

The javascript file would be where we add the logic for any buttons or text boxes etc. we create, as we have no buttons created by us we don’t need this.

our simplistic code is then just the 2 files as follows:

include (inc) file

<?php
/* File     : /usr/local/www/widgets/include/SpeedTest.inc
 * Author   : Zak Ghani
 * Date     : 10-03-2019
 * 
 * This software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES
 * OR CONDITIONS OF ANY KIND, either express or implied.
 * 
 */

$SpeedTest_title = gettext("Speed Test");

?>

widget (php) file

<?php
/* File     : /usr/local/www/widgets/widgets/SpeedTest.widget.php
 * Author   : Zak Ghani
 * Date     : 10-03-2019
 * 
 * This software is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES 
 * OR CONDITIONS OF ANY KIND, either express or implied.
 * 
 * URL Choices :    https://www.bing.com/widget/t/speedtest
 *                  https://www.measurementlab.net/p/ndt-ws.html
 * 
 */

require_once("guiconfig.inc");

?> 

<iframe 
    src="Substitute the URL for the widget you want to use here." 
    width="498"
    height="500"
    frameborder="0"
>
</iframe>

to install this widget login to your pfsense router and navigate to Diagnostics->Edit File->Browse

Get File Location for my widget

navigate to /usr/local/www/widgets/include

.inc File Location for my widget

At the end of the navigation file path add /SpeedTest.inc and press the save button to create a blank file within the .inc file location

Create .inc file

to refresh the view once the file is created just hit thebrowse button again

.inc file created

Click the file name you just created and it should open it up in an editable state. Now just copy the code from above for the .inc file remembering to substitue the URL for the speedtest widget you want and save the changes by clicking the Save button Click Browse once the file has been saved and this will take you back to the contents of the include folder.

Now navigate to /usr/local/www/widgets/widgets and create a blank file here call it SpeedTest.widget.php

.inc file created

Just as before click this new file and copy the code from above for the Widget (php) and paste it into the new file before saving it.

That’s all now we just need to return to our main dashboard page in psfense and add our widget

Dashboard

click the [+] And select our widget name

SpeedTest

here we have it a SpeedTest widget which we can use graphically from within the pfsense dashboard

MS Widget

and the Alternate one using the MLab test

MLab Widget

[*] Since writing this post my Speed has returned to a more normal level hence the screen grab’s showing closer to the 200Mbs. After all this though I do now have a widget which i can use without having to unplug everything from the back of the mode.