RF Field Observer & Heatmap: Visualizing Invisible Radio Environments

Making the Invisible Visible!

Today I’ve brought you a very valuable lesson along with a fun and interesting project 🎉🔧.

We all use Wi-Fi a lot in our day-to-day lives, right? 📡 But have you ever thought about how Wi-Fi signals behave around us 🤔❓

Even though Wi-Fi and GSM signals from our phones are all around us 📶📱, we can never actually see them with our eyes 👀.

ESP32

WS2812 Matrix PCB ( 4x4 or 8x8)

Breadboard

Jumper Wires

Doubleside Tape

Soldering Iron

Soldering Wires

Power Bank

First, let’s look at how to build an RF Field Observer. 🔍📶 To make things a bit more exciting, I decided to design this with a hacker themed style. 🟢🖥️

At the moment, I don’t have a GSM module, so I displayed some fake data for demonstration purposes. 📊

However, if you use this project for school or educational activities, it can still be very useful. I included this feature with that in mind. 🎓

I believe that if you slightly modify and improve this design, you can turn it into a really nice and creative project. 🚀✨

First, I started with a WS2812 LED matrix. 💡 I soldered three small circuit wires to it if you prefer, you can also use three jumper wires. 🔧

To make the LEDs look clearer and more visible, I placed and neatly fixed a thin white paper sheet on top of the matrix. 🤍✨ Next, I mounted the matrix onto the breadboard using double‑sided tape so it stays firmly in place. 🧲

Then, I inserted the ESP32 into the breadboard and connected all the wires properly. I’ve included the wiring diagram for reference. 📄🔌

Since this ESP32 prototype is meant to be carried around, it’s important to make sure all the connections are secure and won’t come loose. 🚶‍♂️⚡

While moving around, I powered the prototype using a power bank. 🔋 If you prefer, you can also use a battery to power this setup.

Once all the hardware connections are done correctly, we can upload the required code to the ESP32. 🔌➡️🖥️

I’ve shared the RF Field Observer code below, so anyone who needs it can download and use it. 📥📄

In the code, don’t forget to enter your Wi-Fi network name and password on lines 8 and 9. 📶🔐

Also, if you’re using a larger WS2812 LED matrix than mine, such as an 8×8 matrix, don’t forget to update line 13 in the code accordingly. 🔢🧩📄

After setting everything up correctly, you can upload the code to the ESP32. 🚀🖥️

Once the code is uploaded, you also need to upload the ESP32 sketch data. 📂⚙️

I’ve shared the step by step process using photos to make it easy to follow. 📸➡️

Download code file from here.

Once both the code and sketch data are uploaded, you can open the Serial Monitor to check whether the ESP32 has successfully connected to your Wi-Fi. 📶🔍

If it’s connected, you’ll be able to see the ESP32’s IP address displayed there. 🌐🖥️

Next, open a web browser such as Google Chrome 🌍 and enter that IP address in the address bar, then open it. 🔗➡️

Now you can see the Hacker Mode RF Field Observer interface running beautifully. 🎉🟢💻

On this interface, you can first see a large Wi-Fi Heatmap and a GSM Heatmap. 📶🗺️

I designed this heatmap so you can visually understand how your Wi-Fi signal behaves around you. 👀

The heatmap fills up block by block, continuously scanning the Wi-Fi signals around you. 🔲➡️

It takes a few minutes for the entire heatmap to fill, and once it’s complete, you can clearly see how Wi-Fi signals behave depending on your location. 📍

Sometimes, you may even notice clear and interesting patterns forming on the heatmap. 📊

While the scan is running, try walking around with the ESP32, 🚶‍♂️📡 you’ll see the heatmap change in real time as the signal strength increases or decreases.

I’ve also added a REAL TIME SIGNAL STRENGTH panel on the side. This lets you quickly monitor signal changes instantly without waiting for the full heatmap to update. 📈

I’m hoping that someone will complete the GSM part of this project as well. 🤞📱

Unfortunately, I wasn’t able to finish that section at the moment.

Overall, this is a super cool and powerful tool. 🔥🛠️

You can build this project and impress your friends at school or university. 🎓😄🚀

While the heatmap is filling up, you’ll also be able to see the LED matrix working beautifully in sync with it. This allows you to visually experience the signal activity not only on the screen but also through the LED display. 👀💡📡

So, earlier we built the Hacker Mode 🟢💻.

That mode doesn’t require any manual control it simply displays how your Wi-Fi signal behaves. 📶👀

Now, in this step, we’re going to map the Wi-Fi signal and generate a heatmap. 🗺️

So, what can we use this for? 🤔

1. You can use it to find weak Wi-Fi signal areas in a large hall or building. 🏢📉
2. Or imagine using it to discover the strongest Wi-Fi spot in your school. 📍

If you take this project one step further, you can even improve it for indoor mapping applications. 🏠🗺️ All of this really depends on your creativity. 🚀

Just like before, in the code for this mode, don’t forget to enter the Wi-Fi network name and password for the network you want to map 🔐📶

Make sure to update lines 8 and 9 accordingly. 📄✏️

After that, you can configure the details of your LED matrix here. 🧩💡

After setting everything up, upload the code first, and then upload the sketch data, just like before. ⬆️

Once that’s done, check the IP address in the Serial Monitor. 🖥️

Then, open a web browser 🌍 and enter that IP address. 🔗➡️

Now you’ll be able to see the Wi‑Fi mapping interface working properly. 🗺️

Download code file from here.

Now you can see a more advanced interface compared to the previous one. 🚀💻

At the top, you’ll be able to view your current Wi-Fi signal strength, 📶 followed by the signal quality. 📊 then the mapping points being collected, 🗺️📍 and finally, you can also see your network name. (SSID) 🔐📡

Below that, you’ll find the LED Matrix control interface. 🎛️💡

From here, you can adjust the brightness of your matrix and use the dropdown menu to change the display mode easily.

There are four display modes available 👇

1. Signal Strength Bar 📶
2. Mini Heatmap 🗺️
3. Rainbow Animation 🌈
4. Signal Pulse 💓

I’ve explained how each mode works separately in the sections below.

In Auto Mapping mode, the ESP32 maps the received signal every second. ⏱️📶

Once you start auto mapping, you should walk from one corner to the other of the hall or room you want to map. 🚶‍♂️🏠

As you move, you’ll be able to see the heatmap updating accurately based on your position. 🗺️✨ It takes a few minutes to complete the full mapping process. ⏳🔥

By default, the system is set to Manual Click Mode. 🖱️ In this mode, you can click on the heatmap to add and display mapping data points. 📍🗺️

Manual mode allows you to map only specific areas, making it easy to identify where the signal is strong and where it is weak. 📶🔍

On the heatmap, the signal levels are shown using colors:

1. 🟢 Green – Excellent (-30 to -50 dBm)
2. 🟡 Yellow – Good (-50 to -60 dBm)
3. 🟠 Orange – Fair (-60 to -70 dBm)
4. 🔴 Red – Poor (-70 to -90 dBm)

By looking at the colors on your map, you can easily understand the signal behavior and overall quality.

This is an example of a hall that I mapped. 🗺️

Around the edges, the signal is quite weak, while the Wi-Fi router was placed in the center. 📶📍

That’s why the signal strength is much better in the middle of the map.

I believe this will be a very useful tool for you 💡🛠️. If you have any questions, feel free to ask in the comments below... 💬👇