Speedtest Plugin - Widget not available on 24.7

[gspannu]

Could you please update the repo so that the Speediest plugin widget works on OPNsense 24.7 ?

Thanks...

[mimugmail]

In 3 weeks, currently off

[svanhoutte]

@mimugmail Thanks for the hard work on this, could you update the repo and include PR #230
Thanks a lot !

[djatwork]

any update?, still can´t get the widget working... thanks werner

[circa1665]

Hi, I'm not a dev. But I made a Speedtest widget for the new Dashboard.

• Responsive layout
• Choose which metrics to display (Download, Upload, Latency)
• Displays the results of the most recent test
• Run a test directly from the widget
• Clicking on the "Last test" line takes you to the Speedtest plugin UI.

Happy for anyone to use this, you'll need to rename the two txt files from Speedtest-js-v4.txt and Speedtest-xml-v4.txt to Speedtest.js and Speedtest.xml (I had to make these txt files to attach).

Also happy for this to be incorporated into the plugin if it's helpful?

speedtest-readme.md
Speedtest-js-v4.txt
Speedtest-xml-v4.txt

[gspannu]

Hi, I'm not a dev. But I made a Speedtest widget for the new Dashboard.

@circa1665 : Help Needed !

This is awesome....
Can you help me with something on the same?

I am looking to edit your widget to show the Latest Result (instead of average) in the main section (Value field) and add the Average as an extra line item in the sub-section.

I have tried to edit your code to something like this in your Speedtest.js file.

const metricsData = [
{
  id: 'download',
  title: 'Download',
  icon: 'fa-download',
  value: data?.download?.youngest, #instead of avg
  min: data?.download?.min,
  max: data?.download?.max,
  avg: data?.download?.avg,
  unit: 'Mbps'

</div>
<small class="text-muted">Min: ${metric.min.toFixed(2)} ${metric.unit}</small>
<small class="text-muted">Max: ${metric.max.toFixed(2)} ${metric.unit}</small>
<small class="text-muted">Avg: ${metric.avg.toFixed(2)} ${metric.unit}</small>

Could you please help as to what should be the const metricsData section?

What should this line look like
value: data?.download?.avg,

value: data?.download?.latest or value: data?.download?.youngest or ???

Apologies, I am not great at javascript or Ajax !

[circa1665]

Hi @gspannu, your suggestion makes a lot more sense than the way I had it. Have updated Speedtest-js-v4.txt and Speedtest-xml-v4.txt above.

[gspannu]

Hi @gspannu, your suggestion makes a lot more sense than the way I had it. Have updated Speedtest-js-v4.txt and Speedtest-xml-v4.txt above.

Great... that works a treat !

[gspannu]

@mimugmail

As above, @circa1665 has done a great job on the widget for speedtest.

Could you please include the widget in your plugin and release an update?
Many thanks.

[circa1665]

I've made some small additional updates:

• Added "Avg." prefix to min/max labels
• Changed "Last test" link destination to actual speedtest result URL
• Moved all text strings to XML file
• Updated JS to use translations via this.translations

speedtest-readme.md
Speedtest-js-v5.txt
Speedtest-xml-v5.txt

[gspannu]

I've made some small additional updates:

• Added "Avg." prefix to min/max labels
• Changed "Last test" link destination to actual speedtest result URL
• Moved all text strings to XML file
• Updated JS to use translations via this.translations

speedtest-readme.md Speedtest-js-v5.txt Speedtest-xml-v5.txt

Apologies, but I am unable to understand the Average concept !

What do you mean by Average Min and Average Max?

---

In ordinary language, an average is a single number or value that best represents a set of data. The type of average taken as most typically representative of a list of numbers is the arithmetic mean – the sum of the numbers divided by how many numbers are in the list.

---

My suggestion:

Add another field called Average like.... This will show an additional line e.g. Min, Max. Avg.
avg: data?.download?.avg

This will show the average download/ upload and latency values.

Something like...

const metricsData = [
            {
                id: 'download',
                icon: 'fa-download',
                value: parseFloat(data?.latest?.[5]),
                min: data?.download?.min,
                max: data?.download?.max,
                avg: data?.download?.avg,
                unit: 'Mbps'
            },

And add the average to the display lines....

if (this.isWideLayout) {
            rows.push([
                $(`
                    <div class="speedtest-wide">
                        ${metricsData.map(metric => `
                            <a href="/ui/speedtest/#" style="text-decoration: none; color: inherit;">
                                <div>
                                    <b>${this.translations[metric.id]}</b>
                                    <div style="margin: 5px 0">
                                        <i class="fa-solid ${metric.icon} text-primary"></I>
                                        <span style="margin-left: 10px;">
                                            ${metric.value ? metric.value.toFixed(2) : this.translations.noData} ${metric.unit}
                                        </span>
                                    </div>
                                    <small class="text-muted">${this.translations.avgMin}: ${metric.min.toFixed(2)} ${metric.unit}</small>
                                    <small class="text-muted">${this.translations.avgMax}: ${metric.max.toFixed(2)} ${metric.unit}</small>
                                    <small class="text-muted">${this.translations.avgAvg}: ${metric.avg.toFixed(2)} ${metric.unit}</small>
                                </div>
                            </a>
                        `).join('')}
                    </div>
                `).prop('outerHTML')
            ]);
        } else {
            metricsData.forEach(metric => {
                rows.push([
                    $(`
                        <a href="/ui/speedtest/#" style="text-decoration: none; color: inherit;">
                            <div>
                                <b>${this.translations[metric.id]}</b>
                                <div style="margin: 5px 0">
                                    <i class="fa-solid ${metric.icon} text-primary"></I>
                                    <span style="margin-left: 10px;">
                                        ${metric.value ? metric.value.toFixed(2) : this.translations.noData} ${metric.unit}
                                    </span>
                                </div>
                                <small class="text-muted">${this.translations.avgMin}: ${metric.min.toFixed(2)} ${metric.unit}</small>
                                <br/>
                                <small class="text-muted">${this.translations.avgMax}: ${metric.max.toFixed(2)} ${metric.unit}</small>
                                <br/>
                                <small class="text-muted">${this.translations.avgAvg}: ${metric.avg.toFixed(2)} ${metric.unit}</small>
                            </div>
                        </a>
                    `).prop('outerHTML')
                ]);
            });
        }

Add the same to the xml.

        <translations>
            <title>Speedtest</title>
            <download>Download</download>
            <upload>Upload</upload>
            <latency>Latency</latency>
            <avgMin>Avg. min</avgMin>
            <avgMax>Avg. max</avgMax>
						<avg>Avg</avg>
            <runSpeedtest>Run Speedtest</runSpeedtest>
            <lastTest>Last test</lastTest>
            <noData>N/A</noData>
            <metrics>Metrics</metrics>
        </translations>

I would also suggest to rename the variables to the previous version names.
min, max instead of avgmin and avgmax

---

Unless, I have totally misunderstood what you have done.

[circa1665]

No clearly I totally misunderstood!
Have updated as you suggest:
Speedtest-js-v6.txt
Speedtest-xml-v6.txt