NetStatus

NetStatus is designed as an always-on dashboard WebUI to track internet connectivity It will periodically recheck its connection & provide a live view of status, online or off. speed up/down & latency

Live: http://netstatus.ryanpowell.dev

This project was intended for use with Raspberry Pi + 3.5" LCD display, however it supports multiple devices, aspect-ratios Device setup instructions for Raspberry PI, (flasing image, package installs, autostart setup) RPI

Features

• Offline notifications
• Periodic netspeed speed checks (latency, jitter, upload/download speed)
• Configurable
• Easy to run (Docker)
• Optimized for small screens, however designed to work on any screensize or orientation,

Screenshots

Everything ok

No network connection found/lost

Latency/Upload error status & download warning status

Bottom row: left is the time elapsed since the last speed test. Right is your public IP address

When the WiFi icon is showing, a new speed-test is underway, display will be updated once all results are in

Run

Options:

1. Load url https://netstatus.ryanpowell.dev in Browser
2. Build project & serve static files (Download project, run npm run build & serve contents from ./build)
3. Deploy locally with Docker below & open http://localhost:80
4. Deploy with balena (more details below)

Docker Deployment

Run below (supports amd64, arm64 & arv7, aka PC, Pi4, Pi3) sudo docker run --name netspeed -d --restart=always -p 80:80 ryandev/netspeed

Docker Configurables

Name	Description	Environment name	Value units	Default value
Frequency of ping checks	How frequently to fetch a favicon to check if the network is there. This is needed as navigator.isOnline implmentation varies across browsers	REACT_APP_PINGINTERVAL	Seconds	15
Which websites to check connectivity with	Used with the above parameter, a random website from this list is pulled and the favicon is fetched from. To override this value please set as a JSON array	REACT_APP_PINGWEBSITES	N/A	See config/ping.ts
Speed test interval	How frequently to check network speed (latency, jitter, upload & download speed)	REACT_APP_TESTINTERVAL	Seconds	300
Speed test servers	List of speed test servers to use to test speed against. Configuration is passed to Librespeed, for more info see the config or Librespeed/speedtest website	REACT_APP_SERVERCONFIGURATIONS	N/A	See config/speedtest.ts
Upload warning threshold	Threshold at which the color of the upload status will be shown as a warning. Example: if after a speed test the upload speed is less than REACT_APP_UPLOADWARN then display as warning	REACT_APP_UPLOADWARN	Mbit/s	4
Upload error threshold	Same as above except for displaying as error status	REACT_APP_UPLOADERROR	Mbit/s	1
Download warning theshold		REACT_APP_DOWNLOADWARN	Mbit/s	8
Download error threshold		REACT_APP_DOWNLOADERROR	Mbit/s	1
Latency warning threshold		REACT_APP_LATENCYWARN	ms	40
Latency error threshold		REACT_APP_LATENCYERROR	ms	100
Jitter warning threshold		REACT_APP_JITTERWARN	ms	50
Jitter error threshold		REACT_APP_JITTERERROR	ms	100
All configurables can be found under src/config/*.ts

Docker Deployment Example

Set speed test interval to 10mins, ping checks every 1min, & latency warn threshold to 20ms

sudo docker run --name netspeed -d --restart=always -p 80:80 --env REACT_APP_TESTINTERVAL=600 --env REACT_APP_PINGINTERVAL=60 --env REACT_APP_LATENCYWARN=20 ryandev/netspeed:arm64

Balena Deployment Example

You can use balenaCloud to deploy this project to Raspberry Pis and other single board computers in just a few clicks, avoiding the need to manually configure any software packages.

or, manually:

• Install the balena CLI tools
• Login with balena login
• Download this project and from the project directory run balena push <appName> where <appName> is the name you gave your balenaCloud application in the first step

Attributions

• Librespeed - SpeedTest
• FontAwesome - Iconography
• Bootstrap - HTML Layout
• Inconsolata, Google fonts - Typography

License

MIT