https://github.com/evanxd/air-quality-widget

A Web widget to visually show real-time air quality data.
https://github.com/evanxd/air-quality-widget

air-quality air-quality-data air-quality-sensor d3-js internet-of-things open-data paho-mqtt web-of-things

Last synced: about 1 month ago
JSON representation

A Web widget to visually show real-time air quality data.

• Host: GitHub
• URL: https://github.com/evanxd/air-quality-widget
• Owner: evanxd
• Created: 2017-03-11T05:36:31.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-03-20T08:04:41.000Z (over 7 years ago)
• Last Synced: 2024-01-30T14:17:02.393Z (7 months ago)
• Topics: air-quality, air-quality-data, air-quality-sensor, d3-js, internet-of-things, open-data, paho-mqtt, web-of-things
• Language: JavaScript
• Homepage: http://evanxd.io/air-quality-widget
• Size: 438 KB
• Stars: 2
• Watchers: 2
• Forks: 2
• Open Issues: 6
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Air Quality Widget

A Web widget to visually show real-time air quality data. It depends on two libraries, [D3.js][d3-js] ([Liquid Fill Gauge][liquid-fill-gauge]) to show data visually and [Paho][paho] to get data from a MQTT server.

Go to the [widget demonstration page][demo] to see the visualized real-world air quality data. If the value on the widget always keeps zero, it means no one uploads air quality data to the MQTT broker/topic. And you can follow the [instruction][air-quality-monitoring-station] to setup one and show the data visually with the widget.



  



## How-to

This is a iframe-based widget. You can simply embed it into your web page with the below one line HTML code.

```html

```

This is its URL search parameters to receive air quality data from a specific MQTT server or topic.

- Required

  - `topic`

    - A MQTT topic you receive the data from, the default value is `topic`.

- Optional

  - `mqtt`

    - A MQTT server address, the default value is `broker.mqtt-dashboard.com`.

  - `port`

    - A MQTT server port, the default value is `8000`.

  - `mode`

    - The widget mode you want to use, the default value is `average`.

      - `average` means show the one-minute average data.

      - `real-time` means show the real-time data at a moment.

The air quality data format/example on the MQTT broker topic is

```json

{ "pm1_0": 26, "pm2_5": 36, "pm10_0": 38 }

```

Please make sure you have same format data to use the widget, or just flash the [air-quality-monitoring-station][air-quality-monitoring-station] firmware into your device to do so.

[d3-js]: https://d3js.org/

[liquid-fill-gauge]: http://bl.ocks.org/brattonc/5e5ce9beee483220e2f6

[paho]: http://www.eclipse.org/paho

[demo]: http://evanxd.io/air-quality-widget

[air-quality-monitoring-station]: https://github.com/evanxd/air-quality-monitoring-station