`Environmental Sensor Dashboard With ESP32 - Simulated Data

Software

1. A modern web browser
2. A text/code editor
3. HTML
4. CSS
5. JavaScript

Optional hardware for a future physical version

1. ESP32 development board
2. Environmental sensors compatible with the ESP32
3. USB cable
4. Breadboard and jumper wires

Note: The version documented in this Instructable is a browser-based prototype. The environmental readings are simulated, so the physical hardware listed above is not required to run the current version.

Before working with the hardware, it helps to understand how the different parts of the system fit together.

The planned system follows this basic architecture:

Environmental Sensors → ESP32 → Data Processing → Web Dashboard

The sensors provide environmental measurements such as temperature, humidity, particulate matter, and air-quality-related readings.

The ESP32 acts as the microcontroller. In a physical implementation, it would collect the sensor readings, process them, and transmit the data over Wi-Fi.

The web dashboard is responsible for displaying the readings in a simple interface. In my current prototype, this part is already working in the browser.

For now, I use simulated data instead of physical sensor readings. This allows me to test the dashboard independently before connecting the hardware.

The dashboard currently displays:

1. CO₂
2. PM2.5
3. Temperature
4. Humidity
5. A simulated CO₂ trend

The simulated readings update every 3 seconds, giving the interface the behaviour of a live monitoring system.

This separation also makes the project easier to develop: the dashboard can be tested first, while the ESP32 and sensors can be integrated later.

Current data flow

Planned hardware data flow

The next step is to prepare the dashboard and understand how the front-end files work together.

For the planned hardware version, the sensors can be connected to the ESP32 as follows.

DHT22 — Temperature and Humidity

DHT22 ESP32

VCC

3.3V

GND

GND

DATA

GPIO 4

The DHT22 can provide temperature and humidity readings for the monitoring dashboard.

MQ-135 — Air Quality

MQ-135 ESP32

VCC

Appropriate supply voltage for the module

GND

GND

AOUT

GPIO 34

The MQ-135 is an air-quality/gas sensor. Its output requires appropriate calibration and interpretation; it should not be treated as a direct, calibrated CO₂ measurement simply because the dashboard displays a CO₂ field.

Important

The wiring above describes the planned physical implementation. The current version of this project uses simulated data, so these sensors are not required to run the browser dashboard.

Once the physical hardware is assembled, the ESP32 can be programmed to read the sensors and transmit the resulting data to the dashboard.

For background on environmental monitoring equipment, see the Air Quality & Atmospheric Testers resource from Enviro Education Tools.

The dashboard is built with three simple web technologies:

1. HTML — creates the dashboard structure
2. CSS — controls the layout and appearance
3. JavaScript — generates and updates the simulated sensor readings

The interface contains four main reading cards:

1. CO₂
2. PM2.5
3. Temperature
4. Humidity

It also includes a CO₂ trend section and a simple explanation of the sensor-to-dashboard data flow.

For the prototype, I kept the interface simple and responsive so it can be viewed on a laptop, tablet, or smaller screen.

Create three files:

The HTML file loads the CSS and JavaScript files:

and:

The JavaScript then updates the dashboard values and chart.

The complete working prototype can be viewed here:

CodePen: Environmental Sensor Dashboard

Replit: Live Dashboard Demo

In the next step, I'll show how the JavaScript generates the changing sensor readings and updates the dashboard every three seconds.

Since the physical sensors are not connected to the dashboard yet, I used JavaScript to generate simulated environmental readings.

This makes it possible to test how the dashboard behaves when new sensor data arrives continuously.

The updateDashboard() function generates new values for:

1. CO₂
2. PM2.5
3. Temperature
4. Humidity

For example, the CO₂ value is generated within a defined range:

The other readings are generated in a similar way:

The values are then placed into the corresponding dashboard cards:

Finally, JavaScript's setInterval() runs the update function every three seconds:

This gives the prototype a live-monitoring feel while keeping the data clearly identified as simulated.

Important

These values are not measurements from physical sensors. They are generated for development and demonstration purposes.

In a future hardware implementation, this simulation function can be replaced with actual readings received from the ESP32.

The working prototype can be tested here:

CodePen: Environmental Sensor Dashboard

Replit: Live Dashboard Demo

A single sensor reading is useful, but a series of readings makes it easier to see how a value changes over time.

For this prototype, I added a simple bar chart to visualize the simulated CO₂ readings.

The dashboard stores recent CO₂ values in an array:

Whenever a new simulated CO₂ reading is generated, it is added to the history:

I limited the chart to the most recent 10 readings so that it stays easy to read:

The JavaScript then creates a bar for each value and calculates its height based on the simulated CO₂ range.

The chart is rebuilt whenever the dashboard updates, so the visual trend changes along with the simulated readings.

Why this matters

In a real environmental monitoring system, historical readings can help users identify changes rather than looking at isolated measurements.

For this project, the chart is only a visualization of simulated data. It does not represent actual environmental measurements.

The complete working dashboard can be viewed here:

This project is a working prototype for an Environmental Sensor Data Dashboard built around the ESP32.

Live Prototype:

CodePen Live Demo

Replit Live Demo

For sensor selection and educational background I referenced:

Enviro Education Tools - Air Quality & Atmospheric Testers

Now it's time to run the prototype and check that the dashboard is updating correctly.

1. Open the project

Open the dashboard in a modern web browser.

You can test the working version here:

CodePen:

You can test the working version here:

CodePen: Environmental Sensor Dashboard

Replit: Live Dashboard Demo

2. Check the readings

You should see four environmental readings:

1. CO₂
2. PM2.5
3. Temperature
4. Humidity

3. Watch the values change

Leave the dashboard open for a few seconds.

The simulated readings should update automatically every 3 seconds.

The CO₂ chart should also change as new readings are added to the recent history.

4. Check the responsive layout

Resize the browser window or open the dashboard on a smaller screen.

The dashboard should rearrange its cards to remain readable on different screen sizes.

Important

The changing values are simulated readings. They are being generated by JavaScript rather than received from the ESP32 or physical sensors.

This test confirms that the dashboard's front-end and data-update logic are working before a physical sensor data source is connected.

Once the hardware version is implemented, the same interface could be adapted to receive readings from the ESP32 instead of the simulated JavaScript values.

This project helped me connect several areas of IoT development in one practical prototype.

What I worked on

1. Designing an environmental monitoring dashboard
2. Structuring sensor data for a web interface
3. Using JavaScript to generate and update data
4. Creating a simple CO₂ trend visualization
5. Building a responsive interface with HTML and CSS
6. Thinking about how an ESP32 can connect physical sensors to a web application
7. Separating the data-generation layer from the dashboard interface

One important lesson was that the dashboard can be developed and tested before the physical sensors are connected. Using simulated data made it possible to work on the interface and update logic independently.

Next Hardware Version

The next stage is to replace the simulated data with readings from an ESP32 and compatible environmental sensors.

The planned architecture is:

Sensors → ESP32 → Wi-Fi → Data Processing → Web Dashboard

At that stage, the dashboard will need to receive actual sensor measurements instead of the JavaScript-generated values used in this prototype.

Final Note

This project is a demonstration of the development process rather than a claim of live environmental measurements. The current dashboard should therefore be treated as a prototype until it is connected to calibrated physical sensors.

For further environmental monitoring resources, I also referenced:

Enviro Education Tools:

For further environmental monitoring resources, I also referenced:

Enviro Education Tools:

https://enviroeducationtools.com/

Air Quality & Atmospheric Testers:

Air Quality & Atmospheric Testers - Enviro Education Tools

The working browser prototype is available on CodePen and Replit for anyone who wants to explore the dashboard.