From Sensor to Smartphone: A DIY Temperature and Humidity Monitoring System using Flutter

Ever wished you could monitor the temperature and humidity in your home, greenhouse, or any environment you care about, right from your smartphone? This blog will guide you through building your own temperature and humidity monitoring system using readily available components and Flutter for the mobile application.

We'll explore the hardware setup, delve into the world of sensor communication, and finally, build a user-friendly app with Flutter to visualize the data.

Introduction:

Maintaining ideal temperature and humidity levels is crucial for various environments. In homes, it can affect comfort levels, and air quality, and even prevent mold growth. Greenhouses thrive with specific temperature and humidity ranges for optimal plant growth.

This DIY project allows you to build a system that constantly monitors these critical environmental factors and provides real-time data on your smartphone.

Flutter, a modern mobile app development framework known for its cross-platform capabilities and rich UI elements, will be used to create the user interface for our monitoring system. With Flutter, you can build a single codebase that runs seamlessly on both Android and iOS devices.

Hardware Requirements:

Here's a list of the components you'll need to build your system:

1. Temperature & Humidity Sensor (DHT11/DHT22 or BME280):

These digital sensors output temperature and humidity readings. DHT sensors are popular choices due to their affordability, but they require a dedicated data pin on the microcontroller. BME280 offers additional features like barometric pressure sensing and communicates via I2C protocol, freeing up microcontroller pins for other functionalities.

2. Microcontroller board (Arduino Uno, ESP32 DevKit):

This acts as the brain of the system, reading data from the sensor, formatting it, and transmitting it to the phone app via Bluetooth or WiFi. Arduino Uno is a popular beginner-friendly option, while ESP32 offers additional features like built-in WiFi and Bluetooth.

3. Jumper wires:

These thin wires connect the various components on the breadboard or directly to the microcontroller. Choose different colors for easier identification.

4. Breadboard (optional for prototyping):

This provides a convenient platform for prototyping the circuit before finalizing connections on the microcontroller board.

5. Power source (USB cable or battery pack):

Power the microcontroller board using a USB cable connected to your computer or a mobile power bank for portability.

Setting Up the Hardware For Temperature and Humidity Monitoring System:

Here's how to set up the hardware for your temperature and humidity monitoring system:

1. Choosing a Sensor:

Both DHT and BME sensors have their pros and cons. DHT sensors (DHT11/DHT22) are inexpensive and easy to use, but they require a dedicated data pin on the microcontroller and have a slightly lower accuracy compared to BME280. BME280 offers higher accuracy, and additional functionalities like barometric pressure sensing, and communicates via I2C protocol, freeing up microcontroller pins. We'll provide connection diagrams for both sensor options.

2. DHT Sensor Connection:

If using a breadboard, connect the following pins:

• Sensor VCC pin to 5V on the microcontroller.
• Sensor DATA pin to any digital pin on the microcontroller (e.g., pin 2 in this example).
• Sensor GND pin to GND on the microcontroller.

If connecting directly to the microcontroller board without a breadboard, refer to the specific pin layout for your board and connect accordingly.

3. BME280 Sensor Connection:

• BME280 uses the I2C communication protocol. Connect the SCL (Serial Clock) pin of the sensor to the SCL pin of the microcontroller (usually A5 on Arduino Uno).
• Connect the SDA (Serial Data) pin of the sensor to the SDA pin of the microcontroller (usually A4 on Arduino Uno).
• Connect the VCC pin of the sensor to 3.3V on the microcontroller (important, not 5V!).
• Connect the GND pin of the sensor to GND on the microcontroller.

Microcontroller Code Development:

The microcontroller code acts as the conductor of your temperature and humidity monitoring system. It orchestrates communication between the sensor and your phone app, ensuring data flows seamlessly. Here's a closer look at its functionalities:

1. Role of the Microcontroller Code:

• Sensor Initialization: The code establishes communication with the chosen sensor (DHT or BME280) using specific protocols. Different sensors have unique communication methods, so the code needs to be tailored accordingly.
• Data Acquisition: The code instructs the sensor to take temperature and humidity measurements at regular intervals. This involves sending specific commands to the sensor and interpreting the response it sends back.
• Data Formatting: Raw sensor readings are often numerical values. The code prepares this data in a format suitable for transmission to your phone app. A common approach is to convert the data into a JSON (JavaScript Object Notation) string. JSON provides a structured way to represent data, making it easier for the app to understand.
• Communication and Data Transmission: The code chooses a communication method (Bluetooth or WiFi) and implements the necessary logic to connect with your phone app. This involves establishing a connection, sending the formatted data package (e.g., JSON string), and potentially disconnecting after transmission.

2. Programming Language: Arduino C++

For Arduino boards, the primary programming language used is Arduino C++. It's a simplified version of C++ designed for microcontroller development, making it easier to learn and use compared to standard C++.

3. Code Functionalities - Breakdown:

a) Sensor Initialization:

• The code includes libraries specific to the chosen sensor (e.g., DHT.h for DHT sensors, libraries provided by the BME280 manufacturer).
• These libraries provide functions for initializing communication with the sensor, specifying the sensor model and data pin connections.

b) Reading Temperature and Humidity Data:

• The code uses library functions designed for the specific sensor to initiate a measurement.
• These functions send commands to the sensor to trigger a reading and then retrieve the sensor's response containing the temperature and humidity values.

c) Formatting Data for Transmission:

• The code typically converts the raw numerical readings (temperature and humidity) into a JSON string.
• Libraries like ArduinoJson (https://github.com/bblanchon/ArduinoJson ) can simplify JSON data creation.
• The JSON string might look like {"temperature": 25.0, "humidity": 60.0}, where "temperature" and "humidity" are labels for the corresponding values.

d) Communication and Data Transmission (Choosing Bluetooth or WiFi): i) Bluetooth Communication:

• Libraries like BluetoothLowEnergy (https://www.arduino.cc/en/Reference/ArduinoBLE ) enable Bluetooth communication on Arduino boards.
• The code uses functions to advertise the presence of the Arduino device and establish a connection with the phone app.
• Once connected, the code sends the formatted data package (e.g., JSON string) to the phone app using Bluetooth functions.
• Finally, the connection can be closed to conserve power.

ii) WiFi Communication:

• WiFi communication typically involves setting up the Arduino board as a web server using libraries like WiFi and AsyncTCP.
• The code configures WiFi connection details and establishes a connection to your WiFi network.
• When the phone app connects to the Arduino's web server address, the code can send the formatted data package (e.g., JSON string) as part of the HTTP response.

4. Resources for Finding Complete Code Examples:

• The official Arduino website provides code examples and tutorials for various sensors and communication methods (https://projecthub.arduino.cc/ ).
• Libraries mentioned above (e.g., DHT library, BluetoothLowEnergy library) often have example code included in their documentation.
• Online resources and communities dedicated to Arduino programming offer a wealth of code examples and project tutorials. By searching for specific sensor models and communication methods, you can find detailed code implementations.

Remember, the specific code implementation will vary depending on the chosen sensor, communication method, and desired functionalities. However, this breakdown provides a high-level understanding of the core functionalities handled by the microcontroller code in your temperature and humidity monitoring system.

Building the Flutter Mobile App

Now that we have the hardware and communication methods set up, let's build the Flutter app to visualize the temperature and humidity data from the sensor.

1. Setting Up the Flutter Project:

• Make sure you have Flutter installed on your development machine (refer to the official documentation for installation instructions: https://docs.flutter.dev/get-started/install ).

• Create a new Flutter project using the command line tool: flutter create my_sensor_app.

• Open the project directory in your preferred code editor (e.g., Visual Studio Code).

2. Dependencies and Packages:

To connect with the chosen communication method (Bluetooth, WiFi, or cloud platform) in your Flutter app, you'll need to add relevant packages to the pubspec.yaml file. Here are some common options:

a. Bluetooth: Use the flutter_blue package (https://pub.dev/packages/flutter_blue_pro ) to discover, connect, and communicate with Bluetooth devices.

b. WiFi: For simple HTTP communication, the built-in http package in Flutter can be used. For more advanced features like web sockets, consider packages like web_socket_channel (https://pub.dev/packages/web_socket_client ).

c. Cloud Platforms: Cloud platforms like Firebase and ThingSpeak offer their own Flutter libraries or SDKs. Refer to their documentation for specific package names and integration instructions.

3. App Design and Layout:

Use the Material package included with Flutter to design a user-friendly interface for your app. Consider including elements like:

• Text widgets to display current temperature and humidity readings.
• Gauge widgets or charts for visually representing data (e.g., using the charts_flutter package: https://pub.dev/packages/flutter_charts ).
• Optional buttons for refreshing data, setting thresholds for alerts (e.g., notifying the user if temperature exceeds a certain limit), or accessing historical data logs.

4. Implementing Communication Logic:

Here's a breakdown of communication logic based on different scenarios:

a. Bluetooth Communication:

Copy
1import 'package:flutter/material.dart';
2import 'package:flutter_blue/flutter_blue.dart';
3
4void main() {
5  runApp(MyApp());
6}
7
8class MyApp extends StatelessWidget {
9  @override
10  Widget build(BuildContext context) {
11    return MaterialApp(
12      home: MyHomePage(),
13    );
14  }
15}
16
17class MyHomePage extends StatefulWidget {
18  @override
19  _MyHomePageState createState() => _MyHomePageState();
20}
21
22class _MyHomePageState extends State<MyHomePage> {
23  BluetoothDevice? connectedDevice;
24  double temperature = 0.0;
25  double humidity = 0.0;
26
27  @override
28  void initState() {
29    super.initState();
30    FlutterBlue.instance.scanResults.listen((results) {
31      // Discover Bluetooth devices and search for your sensor device
32      for (ScanResult result in results) {
33        if (result.device.name == "Your Sensor Name") { // Replace with actual device name
34          connectedDevice = result.device;
35          connectDevice();
36          break;
37        }
38      }
39    });
40  }
41
42  void connectDevice() async {
43    try {
44      await connectedDevice!.connect();
45      listenForData();
46    } catch (e) {
47      // Handle connection errors
48      print("Connection error: $e");
49    }
50  }
51
52  void listenForData() async {
53    await connectedDevice!.services.then((services) {
54      for (BluetoothService service in services) {
55        // Find the characteristic used for data transmission
56        service.characteristics.then((characteristics) {
57          for (BluetoothCharacteristic characteristic in characteristics) {
58            if (characteristic.uuid.toString() == "your_characteristic_uuid") { // Replace with actual characteristic UUID
59              characteristic.value.listen((data) {
60                // Parse received data (e.g., JSON format) and update UI
61                String dataString = String.fromCharCodes(data);
62                var jsonData = jsonDecode(dataString);
63                temperature = jsonData["temperature"];
64                humidity = jsonData["humidity"];
65                setState(() {}); // Update UI with new readings
66              });
67              characteristic.setNotifyValue(true); // Enable notifications for data updates
68            }
69          }
70        });
71      }
72    });
73  }
74
75  @override
76  Widget build(BuildContext context) {
77    return Scaffold(
78      appBar: AppBar(
79        title: Text("Temperature & Humidity Monitor"),
80      ),
81      body: Center(
82        child: Column(
83          mainAxisAlignment: MainAxisAlignment.center,
84          children: [
85            Text(
86              "Temperature: $temperature °C",
87              style: TextStyle(fontSize: 24),
88            ),
89            Text(
90              "Humidity: $humidity %",
91              style: TextStyle(fontSize: 24),
92            ),
93          ],
94        ),
95      ),
96    );
97  }
98}

Explanation: This example demonstrates fetching data from a sensor connected to your WiFi network using a simple HTTP GET request.

Remember to replace "http://your_sensor_ip/data" with the actual URL endpoint where your sensor exposes the data.

b. Cloud Communication: The implementation for cloud communication will vary based on the chosen platform (Firebase, ThingSpeak, etc.). Refer to their respective Flutter libraries and documentation for specific instructions. Generally, you'll use platform-specific methods to connect to the cloud platform, retrieve sensor data stored there, and update the UI in your app.

Additional Features and Considerations:

• Data Logging: Implement functionality to store historical data readings locally on the phone or in the cloud platform you're using. This allows users to track trends and analyze data over time.
• Alerting System: Set up notifications or visual cues in the app to alert users when temperature or humidity levels exceed predefined thresholds.
• User Interface Enhancements: Customize the app's UI with themes, icons, and animations to create a user-friendly and visually appealing experience.

Testing and Deployment:

Thoroughly test the app on your device by connecting to the sensor using the chosen communication method. Verify that data is received and displayed correctly.

For deployment, consider sideloading the app on your Android device for personal use. Refer to Flutter documentation for app deployment options on different platforms (https://docs.flutter.dev/deployment ).

Conclusion:

By following this comprehensive guide, you've built a DIY temperature and humidity monitoring system using readily available components and Flutter. You now have a mobile app that provides real-time data visualization and allows you to monitor your environment remotely.

This project serves as a foundation for further exploration. You can customize it to suit your specific needs, add new functionalities like controlling connected devices based on sensor readings (e.g., smart home applications), or explore integrating with advanced analytics platforms. With a little creativity and perseverance, you can turn this DIY project into a powerful tool for monitoring and managing your environment.