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 80Then 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
<a href="https://medium.com/media/62487b70af73c8ca3a68ed037836127d/href">https://medium.com/media/62487b70af73c8ca3a68ed037836127d/href</a>
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.
<a href="https://medium.com/media/79d580bbc41cb59038c81d73ae51315f/href">https://medium.com/media/79d580bbc41cb59038c81d73ae51315f/href</a>
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).