Read temperature from NodeMCU through mobile app developed on Flutter, on button press

This circuit and programs will help you to send HTTP request from the mobile device through an App to read the temperature from NodeMCU. NTC thermistor is used as the temperature sensor. Temperature will be updated when the “Read temperature” button is pressed. Circuit is done as shown in the following diagram.

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

Restart Arduino software and open File -> Examples -> TemperatureMonitor -> TemperatureMonitor

Upload the program to your NodeMCU. Now, create the Mobile App using Flutter. Necessary program files for creating the mobile App on Flutter is given below.

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

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>
{
  String myText = "0";

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

  void changeText(String title)
  {
    setState(() {
      myText = title;
    });
  }

  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 Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text(
                    "${myText}",
                    style: TextStyle(
                      fontSize: 45,
                    ),
                  ),

                  new Column(
                    children: <Widget>[
                      new Row(
                        children: <Widget>[
                          new Text("\u2103",
                            style: TextStyle(
                              fontSize: 25,
                            ),
                          ),
                        ],
                      )
                    ],
                  ),
                ],
              ),

              new SizedBox(
                height: 20,
              ),

              new RaisedButton(
                onPressed: () async
                {
                  Post newPost = new Post(temperature: 0);
                  Post p = await createPost(CREATE_POST_URL);
                  print(p.temperature.toString());
                  changeText(p.temperature.toString());
                },
                color: Colors.pink,

                shape: RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(10),
                ),

                child : const Text(
                    "Read temperature",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 15,
                  ),
                ),
                padding: EdgeInsets.only(right: 60, left: 60, top: 20, bottom: 20),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Create and upload the App to your mobile device. Connect your mobile device to NodeMCU through WiFi and open your newly created App on mobile device. Press the “Read temperature” button to get the updated temperature reading.

Published by

Leave a Reply

avatar
  Subscribe  
Notify of
X