13. Application & Interface Programming¶
Group Assignment¶
Adrien gives a great overview of the different tools we were quickly introduced to.
Individual Assignment¶
As part of my final project, I use an internel web address inside my ESP8266 in order to generate an interface that allows the user to mark their day of their menstrual cycle.
Once marked, my code will count 25 days from the moment the button was pushed to change the light to red, marking the approach of the next menstrual cycle.
The tricky parts were two:
- using epoch time
- saving in the eeprom so that the internal clock keeps counting the 25 days even after the lamp is off.
Code explanation¶
In order to make this work, I used
I had to:
- define the libraries I will use.
- Identify WiFi credentials -set up local server host
- connect the ESP8266 to the WiFi.
- upload the html into the local server page.
- set up interne
- set-up the eeprom library.
- save the epoch value in the eeprom everytime the the button is HIGH.
- if the eeprom value saved + 25 days is smaller than current time, change the colour setting to red, until the button is clicked again.
#include <time.h> // time() ctime()
#include <moonPhaser.h>; // our lovely moon
#include <WiFiClient.h>
#include <ESP8266WiFiMulti.h>
#include <ESP8266mDNS.h>
#include <ESP8266WebServer.h>
#include <ESP_EEPROM.h>
// Wifi credentials
#ifndef STASSID
//#define STASSID "MIWIFI_2G_4E4H" // set your SSID
//#define STAPSK "YaM7rPuc" // set your wifi password
//#define STASSID "Iaac-Wifi" // set your SSID
//#define STAPSK "enteriaac2013" // set your wifi password
#define STASSID "vodafoneBA1219" // set your SSID
#define STAPSK "M6TUNAHGNMUJRAUM" // set your wifi password
#endif
// All stuff for local server
// Set web server port number to 80
WiFiServer server(80);
// Variable to store the HTTP request
String header;
// Auxiliar variables to stor
String output5State = "off";
// Assign output variables to GPIO pins
const int output5 = D1;
WiFiClient client = server.available(); // Listen for incoming clients
if (client) { // If a new client connects,
Serial.println("New Client."); // print a message out in the serial port
String currentLine = ""; // make a String to hold incoming data from the client
currentTime = millis();
previousTime = currentTime;
while (client.connected() && currentTime - previousTime <= timeoutTime) { // loop while the client's connected
currentTime = millis();
if (client.available()) { // if there's bytes to read from the client,
char c = client.read(); // read a byte, then
Serial.write(c); // print it out the serial monitor
header += c;
if (c == '\n') { // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();
// turns the GPIOs on and off
if (header.indexOf("GET /YAS I CAN!") >= 0) {
Serial.println("Start counting 25 days");
output5State = "on";
digitalWrite(output5, HIGH);
} else if (header.indexOf("GET /") >= 0) {
output5State = "off";
{ unsigned long aNewVar1 = time(&now);
EEPROM.put(0, aNewVar1);
boolean ok1 = EEPROM.commit();
Serial.println((ok1) ? "First commit OK" : "Commit failed");
// this goes where the epoch
//unsigned long aNewVar2;
EEPROM.get(0, aNewVar3);
aNewVar3 += 2160000;
Serial.print("Read back the time of your period + 25 days from EEPROM: ");
Serial.println(aNewVar3);
}
digitalWrite(output5, LOW);
}
// Display the HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences
client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #195B6A; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #77878A;}</style></head>");
// Web Page Heading
client.println("<body><h1>Can you please already?</h1>");
// Display current state, and ON/OFF buttons for GPIO 5
client.println("<p>GPIO 5 - State " + output5State + "</p>");
// If the output5State is off, it displays the ON button
if (output5State == "off") {
client.println("<p><a href=\"/5/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/5/off\"><button class=\"button button2\">OFF</button></a></p>");
}
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else { // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') { // if you got anything else but a carriage return character,
currentLine += c; // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
if (aNewVar3 < time(&now)) {
FastLED.clear();
for (int i = 0; i < NUM_LEDS; i++) {
leds[i] = CRGB::Red;
Serial.println("PMS TIME");
}
FastLED.show();
}
}
Documentation¶
To make sure that
- 
To test it, instead to putting the equivalent of 25 days in epoch time (2160000), i put 60 ms, which is 1 minute