Install speed-test

Was playing around with live data update on panels and wanted to see how one can customise the show() panel a bit, so I wrote this script to check internet download/upload speed.

import "@johnlindquist/kit";
// Menu: Speed Test
// Description: Test the speed and performance of your internet connection
// Author: Altrim Beqiri
// Twitter: @altrimbeqiri
const speedTest = await npm("speedtest-net");
interface SpeedTestResult {
timestamp: Date;
ping: { jitter: number; latency: number };
download: { bandwidth: number; bytes: number; elapsed: number };
upload: { bandwidth: number; bytes: number; elapsed: number };
packetLoss: number;
isp: string;
interface: {
internalIp: string;
name: string;
macAddr: string;
isVpn: boolean;
externalIp: string;
};
server: {
id: number;
name: string;
location: string;
country: string;
host: string;
port: number;
ip: string;
};
result: {
id: string;
url: string;
};
}
const progressPanelInfo = ({ downloadSpeed = 0, uploadSpeed = 0 }: { downloadSpeed: number; uploadSpeed: number }) => {
return `
<div class="flex flex-col p-4">
<p class="mb-2 text-xl font-mono text-center text-yellow-500" style="font-variant-numeric: tabular-nums;">
${downloadSpeed.toFixed(2)} Mbps &darr; </p>
<p class="text-xl text-center font-mono text-yellow-500" style="font-variant-numeric: tabular-nums;">
${uploadSpeed.toFixed(2)} Mbps &uarr;</p>
</div>
`;
};
const showResultsPanel = ({
datacenter,
downloadSpeed,
uploadSpeed,
}: {
datacenter: string;
downloadSpeed: number;
uploadSpeed: number;
}) => {
show(
`
<div class="px-2 py-2 mx-auto">
<h3 class="text-center bg-clip-text text-green-400" style="background-image: linear-gradient(45deg, #2ed1c1, #3a86f4); color: transparent; -webkit-background-clip:text">Datacenter ${datacenter}</h3>
<div class="grid grid-cols-2" style="gap: 1rem;">
<div class="flex flex-col justify-center p-4 bg-gray-800 rounded">
<p class="text-3xl font-semibold font-mono text-center text-white">${downloadSpeed.toFixed(2)}</p>
<p class="text-2xl font-semibold text-center text-gray-300">Mbps</p>
<p class="text-center text-gray-400">Download</p>
</div>
<div class="flex flex-col justify-center p-4 bg-gray-800 rounded">
<p class="text-3xl font-semibold font-mono text-center text-white">${uploadSpeed.toFixed(2)}</p>
<p class="text-2xl font-semibold text-center text-gray-300">Mbps</p>
<p class="text-center text-gray-400">Upload</p>
</div>
</div>
</div>
`,
{ width: 640, height: 170, transparent: true }
);
};
try {
let downloadSpeed = 0;
let uploadSpeed = 0;
div(progressPanelInfo({ downloadSpeed, uploadSpeed }));
const testResult: SpeedTestResult = await speedTest({
acceptLicense: true,
acceptGdpr: true,
progress: (progress: any) => {
if (progress.type === "download") {
downloadSpeed = progress.download.bandwidth / 131072;
}
if (progress.type === "upload") {
uploadSpeed = progress.upload?.bandwidth / 131072;
}
setPanel(progressPanelInfo({ downloadSpeed, uploadSpeed }));
},
});
downloadSpeed = testResult.download.bandwidth / 131072;
uploadSpeed = testResult.upload.bandwidth / 131072;
let datacenter = `${testResult.server.name} ${testResult.server.location} - ${testResult.server.country}`;
showResultsPanel({ datacenter, downloadSpeed, uploadSpeed });
} catch (err: any) {
console.log(err.message);
}