Real time monitoring of temperature from NodeMCU,  on mobile App developed on Flutter

This is a basic app for real time monitoring of temperature from NodeMCU. NTC thermistor is used as the temperature sensor. Mobile device will send HTTP request on every three seconds periodically to get the temperature from NodeMCU. Circuit is done as shown in the following diagram.

Download TemperatureMonitor library from the following link. Unzip and copy the downloaded library to Arduino libraries folder.

Restart Arduino software and open the example program from File -> Examples -> TemperatureMonitor -> TemperatureMonitor. Upload this program to your NodeMCU. Next is to create the mobile App using Flutter. Necessary program files for creating the mobile App on Flutter is given below. Flutter source files of the mobile App is also provided.

pubspec.yaml

name: timerapp
description: A new Flutter application.

version: 1.0.0+1

environment:
  sdk: ">=2.1.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  http: ^0.12.0+4

  cupertino_icons: ^0.1.2
  flutter_timer: ^0.0.6

dev_dependencies:
  flutter_test:
    sdk: flutter

flutter:
  uses-material-design: true

  fonts:
    - family: Pacifico
      fonts:
        - asset: fonts/Pacifico-Regular.ttf

    - family: Bitter-Bold
      fonts:
        - asset: fonts/Bitter-Bold.ttf

    - family: Bitter-Regular
      fonts:
        - asset: fonts/Bitter-Regular.ttf

main.dart

import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/material.dart';

class Post
{
  dynamic temperature;

  Post({this.temperature});

  factory Post.fromJson(Map <String, dynamic> json)
  {
    return Post(
      temperature: json['temperature']
    );
  }

  Map toMap()
  {
    var map = new Map<String, dynamic>();
    map["temperature"] = temperature;
    return map;
  }
}

Future <Post> createPost(String url, {Map body}) async
{
  return http.post(url, body: body).then((http.Response response)
  {
    final int statusCode = response.statusCode;

    if(statusCode < 200 || statusCode > 400 || json == null)
      {
        throw new Exception("Failed to fetch");
      }
    return Post.fromJson(json.decode(response.body));
  });
}

void main() => runApp(MyApp());

class MyApp extends StatefulWidget
{
  MyApp({Key key}):super(key:key);

  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> with TickerProviderStateMixin
{
  String myText = "0";

  static final CREATE_POST_URL = 'http://192.168.4.1/convertDataToJson';

  void initState() {
    Timer.periodic(Duration(seconds: 3), (timer) {
      changeTemperature();
    });
  }

  void changeTemperature() async
  {
    Post p = await createPost(CREATE_POST_URL);

    setState(() {
      myText = p.temperature.toString();
    });
  }

  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: "WEB SERVICE",
      theme: ThemeData(
        primaryColor: Colors.teal,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'Temperature Reader'
          ),
        ),
        body: new Center(
          child: new Column(
            children: <Widget>[

              new SizedBox(
                height: 20,
              ),

              new Text(
                'Current temperature is',
                style: TextStyle(
                  fontSize: 22,
                  color: Colors.pink,
                  fontFamily: 'Pacifico',
                ),
              ),

              new SizedBox(
                height: 20,
              ),

              new Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text(
                    "${myText}",
                    style: TextStyle(
                      fontSize: 45,
                      fontFamily: 'Bitter-Regular',
                    ),
                  ),

                  new Column(
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text("\u2103",
                            style: TextStyle(
                              fontSize: 20,
                              fontFamily: 'Bitter-Regular',
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ],
              ),

              new SizedBox(
                height: 20,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Create and upload the App to you mobile device. Connect your mobile device to NodeMCU through WiFi. Open the newly created App on your mobile device. Updated temperature will be displayed on the App.

0 0 vote
Article Rating

Published by

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
X