Showing posts with label google chart. Show all posts
Showing posts with label google chart. Show all posts

Tuesday, February 4, 2020

Send Line notification from ESP8266 when PM2.5 is too high

Introduction


Low-cost (US$19) Air Quality Monitoring System with Line notification


Purpose


The aim of this project is to receive Line notification when air quality is higher than certain level from Wemos. It uses PMS7003 sensor to measure air quality and visualizes the result with Google Chart API. Air quality measurement data is presented in gauge type. We can check current status via web browser using WiFi connection.

Features


This project is based on our previous project named "IoT Laboratory: ESP8266-based WiFi air quality monitoring system using PMS7003 sensor with Google Chart visualization." It adds Line notification functionality to notify user when the level of air quality hits a certain level which is specified by the user in the source code. The entire process for sending Line notification is like below. Wemos sends HTTP POST request to Line Notify website, then, the message will be delivered to our Line messenger.


For web server, we use ESPAsyncWebServer library and it is available at github. Additionally, we need to install EPS8266 Sketch Data Upload to upload web server related files to Wemos. For example, in this project, we use HTML, CSS files under data directory. In other words, we need to upload sketch and web related files separately.

Prerequisites


- Arduino IDE
- ESP8266 package for Arduino IDE
- EPS8266 Sketch Data Upload
- ESPAsyncTCP Library
- ESPAsyncWebServer Library
- Line account and Token

Requirements


Hardware
-Wemos D1 mini : US$1.77 on Aliexpress
-PMS7003 air quality sensor : US$16.80 on Aliexpress

Instructions


Step 1. Setup hardware

PMS7003 sensor comes with a small breakout board, which has TX, RX, VCC, GND pins. Connect TX of PMS7003 to D5 of Wemos, RX to D6, VCC to 5V, and GND to G. Finally, connect micro usb to Wemos for uploading firmware, and check serial monitor and serial plotter in Android IDE to make sure the sensor works correctly.



Step 2. Create Line account and Token for notification

To be able to receive Line notification, we need to get a token from Line Notify website and put it in our source sketch. Useful tutorial on how to create a token is available at https://engineering.linecorp.com/en/blog/using-line-notify-to-send-messages-to-line-from-the-command-line/. Take a good look at it to understand basic procedure to create a token.

First, login to the LINE Notify website


Click "My page"


Click "Generate token"


Important! Then, type any name for the token and choose who will receive Line notification. We can choose a single recipient or group. For testing purpose, let's choose myself here, then it will send notification only to me.

Step 3. Upload sketch to Wemos D1 mini

This step is to upload sketch to Wemos as usual. In the following sketch, following values need to be modified with your own.

- WIFI_SSID  : Name of WiFi router
- WIFI_PASS  : Password of WiFi router
- LINE_TOKEN : Token string from Line Notify website

 In this example sketch, it send Line notification only when PM2.5 hit 20 or higher. And before sending again it waits 10 minutes. These values can be changed by user.

- notifyLevel : PM2.5 threshold for Line notification
- interval    : Waiting time (specify in milliseconds)



 Step 4. Upload data to Wemos D1 mini

This step is to upload web server related files (HTML, CSS) to Wemos. These files are located in directory named data. Click "ESP8266 Sketch Data Upload" under Tools menu in Arduino IDE to upload these files to Wemos. Once it shows the measurement data, it will refresh every 3 seconds automatically.

HTML file

On web interface, the size of gauge is defined in width, height of options variable. Just change these values to customize chart size. And if you want to modify refresh rate, change the value of 30000 in setInterval function to other value.

CSS file


Results


After uploading firmware, Wemos restarts itself automatically. Once Wemos D1 mini has restarted, serial monitor shows a welcome message, PM2.5 threshold, and waiting period. When PM2.5 is higher than threshold it will send Line notification to the user as below.


One Wemos sends notification, Line messenger will show you the content of it as below. Notice that "Air quality" in the message is actually the token name we typed when the token was created.


Use web browser to connect to the device, then it will show current time and visualized information, which is based on Google Chart API. It will refresh itself every 3 seconds automatically.


References

Source codes at github
Posted by at No comments:
Labels: , , , , , , ,

ESP8266-based WiFi air quality monitoring system using PMS7003 sensor with Google Chart visualization

Introduction


Low-cost (US$19) WiFi Air Quality Monitoring System with Google Chart visualization



Purpose


The aim of this project is to use PMS7003 sensor to measure air quality and visualize the result with Google Chart API. Air quality measurement data is presented in gauge type. We can check current status via web browser using WiFi connection.

Features


This project is based on our previous project named "ESP8266-based air quality monitoring system using PMS7003 sensor". It adds web server functionality to offer web-based user interface, which is based on Google Chart API to visualize measured air quality data. For web server, we use ESPAsyncWebServer library and it is available at github. Additionally, we need to install EPS8266 Sketch Data Upload to upload web server related files to Wemos. For example, in this project, we use HTML, CSS files under data directory. In other words, we need to upload sketch and web related files separately.

Prerequisites


- Arduino IDE
- ESP8266 package for Arduino IDE
- EPS8266 Sketch Data Upload
- ESPAsyncTCP Library
- ESPAsyncWebServer Library

Requirements


Hardware
-Wemos D1 mini : US$1.77 on Aliexpress
-PMS7003 air quality sensor : US$16.80 on Aliexpress

Instructions


Step 1. Setup hardware

PMS7003 sensor comes with a small breakout board, which has TX, RX, VCC, GND pins. Connect TX of PMS7003 to D5 of Wemos, RX to D6, VCC to 5V, and GND to G. Finally, connect micro usb to Wemos for uploading firmware, and check serial monitor and serial plotter in Android IDE to make sure the sensor works correctly.



Step 2. Upload sketch to Wemos D1 mini

This step is to upload sketch to Wemos as usual. In the following sketch, two values need to be modified with your own.

- WIFI_SSID : Name of WiFi router
- WIFI_PASS : Password of WiFi router

Step 3. Upload data to Wemos D1 mini

This step is to upload web server related files (HTML, CSS) to Wemos. These files are located in directory named data. Click "ESP8266 Sketch Data Upload" under Tools menu in Arduino IDE to upload these files to Wemos. Once it shows the measurement data, it will refresh every 3 seconds automatically.

HTML file

The size of gauge is defined in width, height of options variable. Just change these values to customize chart size. And if you want to modify refresh rate, change the value of 30000 in setInterval function to other value.

CSS file


Results


After uploading firmware, Wemos restarts itself automatically. Once Wemos D1 mini has restarted, serial monitor shows welcome message as below. Remember IP address of Wemos to connect it via web browser.



Use web browser to connect to the device, then it will show current time and visualized information, which is based on Google Chart API. It will refresh itself every 3 seconds automatically.




References

Source codes at github
Posted by at No comments:
Labels: , , , , , ,

Friday, June 12, 2015

ESP8266 based Wifi weather monitoring system


Introduction


Low-cost Wireless Weather Monitoring System

Purpose


This system transmits temperature and humidity data to cloud on internet via Wifi and provides web interface to monitor those measured information.

In this system, ESP8266 reads data from DHT22 sensor, then, send it to data.sparkfun.com cloud system using simple HTTP protocol. For web interface, all charts are implemented with Google Chart APIs. 

Prerequisites


- Arduino IDE
- ESP8266 package for Arduino IDE (*Refer to http://hpclab.blogspot.com/2015/06/esp8266-arduino-ide-on-mac-os-x.html for more information)

Compiling and uploading is done in Arduino IDE with ESP8266 package installed. Therefore, basic knowledge about Arduino IDE is required to proceed following steps.   

Requirements

Hardware


-ESP8266 ( Around $3 on ebay )
-DHT22 ( Around $7 on eBay )
-Resistor 10k(Pull up)

To keep the cost low, ESP8266 is used as not only controller, but also Wifi transmitter. DHT22 sensor can be replaced by any other temperature sensor. Pull up resistor is used for the input pin of ESP8266.

Software


-data.sparkfun.com
-Google Chart 

We used data.sparkfun.com cloud system to store measured data with two reasons. First, it provides free service and even does not require any account. We just need to create a 'free stream', which is basically a storage area. Secondly, it's easy to use. A single HTTP GET request can send measured data to cloud.

For web interface, Google Chart is used to draw gauge and graph to show historical change of temperature, humidity, and heat index.

Instructions


Setup hardware

For uploading


Here is a wiring information to upload sketch to ESP8266 using USB to TTL converter. Since my converter is 5v version, I used another power supply to provide 3.3v to ESP8266. GPIO 0 should be pulled down to the ground for uploading.

 BE CAREFUL! ESP8266 works with only 3.3v, not 5v!


For running


Connect ESP8266 to DHT22 temperature sensor. GPIO 2 pin of ESP8266 is used to read measured data of DHT22.



Step 1. Create 'free data stream' at data.sparkfun.com


Visit https://data.sparkfun.com/ and click 'CREATE' menu to create a 'free data stream'. It's like an identifier for your data to read and write. One interesting feature of data.sparkfun.com is that it doesn't require you to create or activate any account. Just create 'free data stream'. Just remember that no more than 100 requests within 15 minutes window are allowed. On average, one request is allowed every 9 seconds. Check here for detail.


Among several fields in the creation form, 'Fields' and 'Stream Alias' are important. Fields are actual variable name for data when you send it with HTTP GET request. 'Stream Alias' is a name which can be used in URL to retrieve data from cloud.


Once you finish creating 'stream', it provides several information such as private key, public key and simple instructions on how to send and retrieve data. Don't loose them, you need them to proceed to the next step.

Step 2. Upload Sketch


For this step, you need those information at hand,

-SSID & Password of you Access Point
-List of field names you typed in 'Fields' in the creation form in Step 1
-Public Key from Step 1
-Private Key from Step 1

In this example, we used 3 fields to send data to cloud,

-temp: for temperature value measured in DHT22
-hum: for humidity value measured in DHT22
-hidx: for heat index calculated in the sketch

HTTP GET request for sending data looks like this,

data.sparkfun.com/input/YOUR_PUBLIC_KEY?private_key=YOUR_PRIVATE_KEY&temp=82.04&hum=53.10&hidx=83.29

Modify those values in the sketch according to your configuration. Then, compile and upload to ESP8266 using USB to TTL converter. If you face errors on Mac machine, refer to http://hpclab.blogspot.com/2015/06/esp8266-arduino-ide-on-mac-os-x.html for solution.

Once finish uploading, open 'Serial Monitor' in Arduino IDE, then you will see something like this,


To verify whether the data has been transmitted and stored in cloud without error, type this URL in web browser.

https://data.sparkfun.com/streams/YOUR_PUBLIC_KEY

You will see this kind of output if everything has gone well.



Step 3. Create HTML file


For this step, you need this information at hand,

-Public key from Step 1

Modify the value of public_key to your own key in example HTML file for web interface. Basically, it retrieves data in JSON format from cloud, then pass it to Google Chart API for drawing chart. In this example, gauge chart and line chart are used for demonstration.


Results


Open HTML file with web browser, then you will see this chart right away. If you would like to access web interface from anywhere in the world, then, just upload this HTML file to your web site. It does not require any additional files or libraries or anything, just one single HTML file.  That's it!


References

Posted by at 14 comments:
Labels: , , , , , , ,
Subscribe to: Posts (Atom)