Week 15: Interface and application programming

Assignment

For this work I used the board I developed in week 13 to make an interface to control components attached to the board.

I used one of the above board.

I designed the interface as a web platform and uploaded it in the board to control componets(LED and Button) on the board.

To program this board I used the arduino IDE and I had to add the board in the IDE. I did it using this guide. The library I used were include when I installed the board in the IDE.

Here is the source code for the web.

<!DOCTYPE html>
<html>
<head>
    <meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style type="text/css">
      body {
        font-size:15px;
        font-family: gabriola;
        padding-left:30px;
        padding-bottom: 15px;
        padding-right:15px;
        padding-top:15px;
        background-color: #e6f2ff;
       }
     h1{
       text-align: center;
       font-size:35px;
       color:steelblue;
     }
    button {
        display: table-cell;
        height: 200px;
     /*change this and the width for the size of your initial circle*/
        width: 200px;
        text-align: center;
        vertical-align: middle;
        border-radius: 50%;
      /*make it pretty*/
        background: red;
        color:white;
        font: 18px ;
      /*change this for font-size and font-family*/
    } 
    .circle-green {
        display: table-cell;
        height: 200px;
     /*change this and the width for the size of your initial circle*/
        width: 200px;
        text-align: center;
        vertical-align: middle;
        border-radius: 50%;
      /*make it pretty*/
        background: green;
        color:white;
        font: 18px;
      /*change this for font-size and font-family*/
    }
    </style>
<title>FabAcademy | Interface and Application Programming</title>
</head>
<body>
    <h1>Interface and Application Programming</h1>

    <div>
        <button type="button">BUTTON!</button>
    </div>

    <br><br>

    <div class="circle-green">
        <p>Switch Pressed on Board!</p>
    </div>
</body>
</html>

This is how the web looks like.

Now I include the source code above in arduino ESP8266 server.

This is the final source code.

#include <ESP8266WiFi.h>

const char* ssid = "******";
const char* password = "*******";

WiFiServer server(80);

int led = D1;
int btn = D2;

void setup() {
  Serial.begin(115200);
  Serial.println();
  // Connect to WiFi network
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected");

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

  // Print the IP address
  Serial.print("Use this URL to connect: ");
  Serial.print("http://");
  Serial.print(WiFi.localIP());
  Serial.println("/");

  pinMode(led, OUTPUT);
  pinMode(btn, INPUT);
}

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

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

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

  // Return the response
  client.println("HTTP/1.1 200 OK");
  client.println("Content-Type: text/html");
  client.println(""); //  do not forget this one
  client.println("<!DOCTYPE HTML>");
  client.println("<html>");
  client.println("<head>");
  client.println("<meta content='text/html; charset=iso-8859-2' http-equiv='Content-Type'>");
  client.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
  client.println("<style type=\"text/css\"> body { font-size:15px; font-family: gabriola;");
  client.println("padding-left:30px; padding-bottom: 15px; padding-right:15px; padding-top:15px;");
  client.println("background-color: #e6f2ff; } h1{ text-align: center; font-size:35px; color:steelblue; }"); 
  client.println("button { display: table-cell; height: 200px;");
  client.println("width: 200px; text-align: center; vertical-align: middle; border-radius: 50%;");
  client.println("background: red; color:white; font: 18px; }");
  client.println(".circle-green { display: table-cell; height: 200px;");
  client.println("width: 200px; text-align: center; vertical-align: middle; border-radius: 50%;");
  client.println("background: green; color:white; font: 18px; } </style>");
  client.println("<title>FabAcademy</title> </head>");
  client.println("<body> <h1>Interface and Application Programming</h1>");

  client.println("<div> <a href=\"/ledON\"><button type=\"button\">BUTTON / LED ON!</button></a>");
  client.println("<div> <a href=\"/ledOFF\"><button type=\"button\">BUTTON / LED OFF!</button></a>");
  client.println(" </div> <br><br>");
  if (digitalRead(btn) == HIGH) {
    client.println("<div class=\"circle-green\"> <p>Switch Pressed on Board!</p> </div>");
  }
  else {
    client.println("<div class=\"circle-green\"> <p>Switch Not Pressed</p> </div>");
  }
  client.println("</body> </html>");

  Serial.println("client disconnected\n");
}

Here I teste the board with the above code.

below it is the video of the project working

Files used for this assignment can be found here.