Nitrogen dioxide (NO2) card with background
Who it’s for
Environmental health officers, traffic managers, and smart city operators ask “can I read the NO₂ severity across the whole monitoring network at a glance, even from across the room?” The background-color variant is designed for wall-mounted dashboards where a single colored card must communicate severity without anyone needing to read the number.
What it does
A monitoring station reporting nitrogen = 28 µg/m³ displays the reading on a card whose entire background fills with the severity color: green for Good (0–40 µg/m³), light green for Moderate (40–90 µg/m³), orange for Elevated (90–120 µg/m³), dark orange for High (120–230 µg/m³), and red for Hazardous (above 230 µg/m³).
- Full-card background color makes severity readable across a room without reading the number
- Live NO₂ reading in µg/m³
- Shows one sensor’s reading per widget; tile multiple widgets to cover an entire monitoring network at a glance
How to set up
Data keys
| Key | Role | Type | Description |
|---|---|---|---|
nitrogen | Main value | Timeseries | Nitrogen dioxide concentration in µg/m³; change the key name to match your device’s telemetry key |
The widget ships with a simulated function datasource key labeled Nitrogen dioxide, so it draws random values until you point the datasource at a device and rename the key.
To point it at your own device: open the dashboard in edit mode, open the widget’s Datasources, pick the entity or entity alias, and replace the function key with the key your device reports.
Value ranges
| Range | Level | Color |
|---|---|---|
| 0–40 | Good | Green |
| 40–90 | Moderate | Light Green |
| 90–120 | Elevated | Orange |
| 120–230 | High | Dark Orange |
| 230+ | Hazardous | Red |
How to customize
- To change the severity thresholds — edit Icon color ranges and Value color ranges; set the same boundaries in both so the icon and the number always agree.
- To change the band colors — edit the color of each range in Icon color ranges and Value color ranges.
- To rename the units label — change the Units field in the widget settings if your sensor reports in ppb.
Tips
- On a wall display showing multiple NO₂ cards, the background color lets operators spot a single elevated station instantly without scanning individual numbers.
- Use consistent severity colors across all air quality widgets on the same dashboard.
- For compliance reporting, pair this card with a NO₂ chart card so inspectors see both the current reading and the daily trend without switching views.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.