Skip to content

14. Interface and application programming

group assignment:

  - compare as many tool options as possible

  Since there are three students in Kannani Lab, each of us tried different tool option to compare each other.

1. Switch On and Off from iPhone (Ishimura)

I tried Blynk.

I followed below steps.

Blynk setup

 - Install Blynk from App Store to iPhone
 - Input New Project name
 - Select Device ESP8266
 - Button and  select pin as Digital | ~gp4

ESP8266

 - Cabling   
       LED Pin connect to IO04(GPIO4)

Arduino 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
- Add http://arduino.esp8266.com/stable/package_esp8266com_index.json to Additional Boards Manager URLs of Preference.
- Install ESP8266 in Board Manager ( Tool/Board/Board manager)
- Select Generic ESP8266 Module as Board
- Download “Source. Zip” from Blynk site (https://github.com/blynkkk/blynk-library/releases )    

   - Install Blynk Library to Arduino   
Sketch＞Include Library＞Add >ZIP Library and select downloaded “ Source code (zip) “


- Open Program

     Files/Blynk/examples/Boards_Wifi/ESP8266_Standalone/ESP8266_Standalone.ino

 - Input SSID and Password as below

      char ssid[] = “---------;  
      char pass[] = “---------”;
      char auth[] = "R4adzoZ-ltNZLQsVjLVhhlM47pw1OYLS";(for my case)
Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#include <ESP8266WiFi.h>
#include <BlynkSimpleEsp8266.h>

// You should get Auth Token in the Blynk App.
// Go to the Project Settings (nut icon).
char auth[] = "R4adzoZ-ltNZLQsVjLVhhlM47pw1OYLS";

// Your WiFi credentials.
// Set password to "" for open networks.
char ssid[] = “---------”;
char pass[] = “---------”;

void setup()
{
 // Debug console
 Serial.begin(9600);

 Blynk.begin(auth, ssid, pass);
}

void loop()
{
 Blynk.run();
}

Results:

Successfully connected LED and Blynk.

Reference site : https://stocker.jp/500W/2015/12/23/esp8266/

Notes for Mac OS users :

When I was trying to upload a program, I encountered an error below. I am using Mac OS Big Sur. It seems that the error has known among Big Sur users who tried ESP8266 per below referred site. - Arduino’s error message :

   pyserial or esptool directories not found next to this upload.py tool.An error occurred while uploading the sketch
  • Referred site ( in Japanese)
    https://www.storange.jp/2020/12/macos-big-suresp8266.html
  • Suggested adjustments

Adjustments to be made in ~/Library/Arduino15/packages/esp8266/hardware/esp8266/2.7.4/tools/pyserial/serial/tools/list_ports_osx.py

What to be adjusted is Line 29 and 30 of above file

Original text ( # means comment out as adjustment)
‘’ # iokit = ‘ ctypes.cdll.LoadLibrary(ctypes.util.find_library(‘IOKit’))
‘’# cf=ctypes.cdll.LoadLibrary(ctypes.util.find_library(‘CoreFoundation’))

Text to be added “iokit = ctypes.cdll.LoadLibrary(‘/System/Library/Frameworks/IOKit.framework/IOKit’) “cf = ctypes.cdll.LoadLibrary(‘/System/Library/Frameworks/CoreFoundation.framework/CoreFoundation’)

The error was not shown in uploading a program to ESP8266 after the adjustments.

2.MIT App Inventor with LED lights (By Kamei)

I was interested to Wi-Fi connected interface where the user can operate the device from the smartphone. Also making an easy app for it sounded fun, so I decided to try MIT App Inventor which was introduced in the class.

The basic information

Input : MIT App Inventor (http://ai2.appinventor.mit.edu/) Board: ESP8266(Commercial) Client Environment: Arduino IDE 1.8.13 Output : LED light (Turning ON/OFF by the button on the app)

Thanks a lot forAdrián Torres’s(Fab Lab León) perfect documentation, I followed all procedures as he did.

1.Install App from Google play.

MIT App Inventor was an app for Android and luckily my smartphone was so.

2.Develop the App from MIT App Inventor Website

Next, access to the MIT App Inventor website. Both the computer(which accesses the website) and the smartphone(which the app was installed in)should be connected to the same Wi-Fi.

From “Project”>”Start New Project”, you can start to create the app.
Design the On the top of the right side, you can switch the following two modes. Design: where you can design how the app looks to the user. Blocks: where you can set the inside structure and logic of the app.

2-1.Designer Mode

Since the MIT App Inventor was very easy to understand visually, this step was the one of the fun parts! All you have to do is to add the necessary function from the pallet on the left side.

2-2.Blocks Mode

You can pick the necessary elements for your app from the left hand side. By assembling them you can program the app easily.

3.Connect the electricity on the board.

4.Write a code

Then you can write a code and connect it to the app. 

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
#include <ESP8266WiFi.h>

const char* ssid = "---------";//type your ssid
const char* password = "---------";//type your password

int relayPin = 2; // GPIO2 of ESP8266
WiFiServer ESPserver(80);//Service Port

void setup()
{
Serial.begin(115200);
pinMode(relayPin, OUTPUT);
digitalWrite(relayPin, HIGH);

Serial.println();
Serial.println();
Serial.print("Connecting to: ");
Serial.println(ssid);

WiFi.begin(ssid, password);
delay(5000);

/*
 The following four line of the
 code will assign a Static IP Address to
 the ESP Module. If you do not want this,
 comment out the following four lines.  
 */

/*IPAddress ip(192,168,1,254);   
IPAddress gateway(192,168,1,1);   
IPAddress subnet(255,255,255,0);   
WiFi.config(ip, gateway, subnet);
delay(5000);*/

while (WiFi.status() != WL_CONNECTED)
{
delay(100);
Serial.print("*");
}
Serial.println("");
Serial.println("WiFi connected");

// Start the server
ESPserver.begin();
Serial.println("Server started");

// Print the IP address
Serial.print("The URL to control ESP8266: ");
Serial.print("http://");
Serial.print(WiFi.localIP());
}

void loop()
{
// Check if a client has connected
WiFiClient client = ESPserver.available();
if (!client)
{
return;
}

// Wait until the client sends some data
Serial.println("New Client");
while(!client.available())
{
delay(1);
}

// Read the first line of the request
String request = client.readStringUntil('\r');
Serial.println(request);
client.flush();

// Match the request

int value = LOW;
if (request.indexOf("/off1") != -1)
{
Serial.println("LAMP is ON");
digitalWrite(relayPin, LOW);
value = LOW;
}
if (request.indexOf("/on1") != -1)
{
Serial.println("LAMP is OFF");
digitalWrite(relayPin, HIGH);
value = HIGH;
}

// Return the response
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); //  IMPORTANT
client.println("");
client.println("");

client.print("Status of the Lamp: ");

if(value == LOW)
{
client.print("ON");  
}
else
{
client.print("OFF");
}

delay(1);
//client.stop();
Serial.println("Client disconnected");
Serial.println("");
}

5.Load the App

Finally, everything has set. Load the app you created from the tab “Build”>”App(QR code)”, then try on the smartphone!

6.Results

On the serial monitor

On the board

3.

Last update: May 10, 2021