Flutter IoT Series: Interfacing a 16X2 LCD with WeMos D1-R1
Throughout 2020 and 2021 I've worked on a lot of cool Flutter projects but I've had my eye’s on starting IoT with flutter all along. In July I began ordering parts for my Arduino projects and after struggling with getting my Arduino to connect with an ESP-01 Module and a stand-alone ESP8266 module I finally hit the jackpot with a WeMos D1-R1 Board.
I spent hours learning how to connect each component with different types of boards some times trial by error worked, at other times I had to research deeper and read the documentation for different components and bits.
Before we start here are a few things I would advise:
- Get a microcontroller that comes with an embedded wifi e.g Arduino Uno Wifi, Node MCU’s, ESP8266, ESP8285, ESP8266, ESP8285.
- Get a development kit with a lot of sensors and at least 3 breadboards.
The Goal: What we plan on building/achieving:
The major aim of this project is to connect our Flutter app to an LCD module using the WeMos D1-R1 Chip as an echo server. I.E we connect to a Wifi Network with the WeMos microcontroller chip and then connect the LCD to it too, so when we send commands via a WebSocket to the WeMos microcontroller chip it displays it on the LCD screen.
Wire Diagram:
Here’s a simple guide to how we would be connecting our wires, the matching color codes are to help guide us in our connections.
Here is the complete connection on a breadboard with corresponding wire colors.
Project Structure
Coding the Micro-controller
If you don't have the Arduino IDE you’d have to get it from here.
The first thing we’d do is import our libraries and define our wifi details
#include <LiquidCrystal.h>
#include <ESP8266WiFi.h> const char *ssid = "TP-Link_58E5"; // Wifi Name
const char *password = "97001515"; // Password LiquidCrystal lcd(5, 4, 2, 14, 12, 13); // Creates an LC object. Parameters: (rs, enable, d4, d5, d6, d7)WiFiServer wifiServer(80); // Wifi Server on port 80
Then we can easily spin up an instance of our serial, LCD, and WiFi. You might want to take a look at the documentation for LiquidCrystal
Coding the Flutter App
The flutter app would be a basic WebSocket connection to the WeMos chip.
Using Sockets from the dart:io library we can make this connection.
*Note: Make sure your device and your WeMos Chip are connected to the same SSID/ Network.
Creating Comms Channels
Next, we would create a simple page that uses the web socket to send messages to our server. This would then automatically print whatever we type into the TextField on our LCD module.
We can see that it’s very easy to interface Arduino modules and components with mobile apps via socket connections.
Really sorry that this article was delayed almost 3 months, hopefully, the other part of this series are released in January 2022.
ありがと (Arigato).
