The radio spectrum is a complex space, with many overlapping technologies and bands that vary depending on the regulatory domain. The radio spectrum is too complex to present on a static chart, so I always wanted to create something interactive to display it.
Additionally, I’ve always liked graphical Wi-Fi scanners and spectrum analysis tools, and I thought an interactive spectrum chart tool could build on the graphical Wi-Fi scanner concept.
Side note: As far as I know, the credit for the first graphical Wi-Fi scanner goes to Ryan Woodings (and probably Brian Tuttle as well), who pioneered the idea with the InSSIDER2 at MetaGeek based on his experience with low-cost spectrum analyzers in the 2.4 GHz band.
So, over the past few months, I created something! What I came up with is a little web application that allows you to pan across the spectrum, zoom in and zoom out, and turn different techniques on and off.
https://spectrum.potatofi.com
- Turn off Bluetooth, and zoom in on some 20 MHz channels. Check out those subcarriers!
- 20 MHz channels, 2.4 GHz overlapping channels, turn on Bluetooth, And Zigbee. Check out how crazy the 2.4 GHz band is!
- Move to 900 MHz band, Japanese regulatory domain and turn off all 802.11ah channel widths. As far as I know, this is the first 802.11ah channel chart, and I’m very proud of it.
- In the 900 MHz band, turn back on the Japanese regulatory domain. See how close the channel centers are up to 500 KHz! This is very unsatisfactory! Sorry I ruined your day.
- Seize the day using full spectrum Shortcut. Check out how much unlicensed space we have for activities!
- If you have an iPhone, use this share , Add to Home Screen Button to create shortcuts. I spent some extra time making it feel good with a nice icon on the iPhone.
panning
Pan across the spectrum:
- Swiping left and right with two fingers on the trackpad
- Left clicking and dragging with the mouse pointer
- Swiping horizontally on a touchscreen
zoom
Zoom in and zoom out the spectrum:
- Scrolling with two fingers on the trackpad
- rotating the scroll wheel on the mouse
- pinching the touchscreen
Option
Use Hamburger Menu 🍔 Top left to hide and show different technologies, channel widths and modes. You can also change the height of the signature/mask with the slider.
regulatory domain
In Regulatory Domain 🌍 menu, you can turn certain regulatory domains on and off. If a channel is included in one or more of the selected regulatory domains, it will be displayed. around the world This includes all channels that are generally available (or compatible) everywhere. Note that accuracy here is on a best effort basis; The world is a complex place.
shortcut
To go to a specific part of the band, use Shortcut ⭐ Menu.
download
Use Download 📥 Button to take a snapshot of the canvas and download it.
Feel free to use this chart:
- A reference whenever you want to look something up.
- Entertainment.
- Teaching classes in both paid and unpaid settings about radio technologies like Wi-Fi.
Please do not copy my code and redistribute it, or host it elsewhere. I may add more permissive licenses in the future, but not right now.
“Technology Stack”
Very early on, I decided to build it in vanilla HTML, CSS, and JavaScript. I was hoping to use CSS divs for the channel labels, so that I could use CSS for mouseover, sorting, and other interactivity, the performance was disappointing. Because of that, I reverted to pure JavaScript. Although this is quite performant (even with my spaghetti code), the downside is that interactivity is much more difficult. But hey, it technically works on my Windows XP netbook!
802.11ah channel chart
I had to do a lot of digging in the 802.11-2020 spec to find the channel chart. is the specialty Now! It’s so esoteric that I put some of it into Claude.ai to make sure we agree on how channels work. I’m pretty sure this resulted in the first 802.11ah chart that is openly available on the Internet. I am very proud of this.
For now, I have worked alone on this project to learn HTML, CSS and JavaScript and do something creative. My employer (Hamina Wireless) has shown interest in putting some real development effort behind this idea and creating an official “Hamina Spectrum Chart”. Maybe this will happen.
Planned Features
I could add some of these features, but I’m a novice developer. We’ll see what I can get done.
- Overhaul the band label system, because there are a lot of band labels I want to implement but the system isn’t flexible enough.
- Find out how to combine technologies without writing a lot of specifications and repeating code for them. For example, it’s mentally stopping me from adding CBRS/Private Celluer right now.
- Use system resources more efficiently, for example not to constantly redraw the screen if the user is doing nothing.
- Add more technologies, such as cellular bands (I have a very detailed list from Keith at Wireless LAN Pros).
- Show subcarriers for 40, 80, and 160 MHz Wi-Fi channels.
- Add 320 MHz Wi-Fi channel.
- Show 802.11ax subcarriers.
- Mouseover inspector that draws a vertical line and shows the current frequency.
- Add an option to display the center frequency on each channel label.
- Store settings (such as frequency, zoom level and selected options) in a cookie.
- Put all labels of a particular technology on a single line (I had this before but the code was extremely complex and hard to work with).
- Limit panning to the visible spectrum.
- Expand spectrum beyond 8 GHz.
- Let the user zoom in more to see the technologies underneath VHF.
feature request
If you have any feature requests, feel free to open an issue in GitHub. Just temper your expectations – I’m a novice developer, and already a little short of my abilities.
Thanks for checking out what I made, I hope you like it!