Interface and Application Programming

Building an Interface for my Final Project

Design Ideas

A preliminary basic interface idea that I intend to build off on is solely displaying the data about whether the shelves are empty or full in the HTML web server. Once I accomplish this I plan to keep building off of it and make it nicer by including a separate HTML page that it will fill in, with a more user intuitive understanding of which shelves are which rather than just going off of the pin number, as well as introducing some CSS.

Implementation

For the first iteration of the interface by using the following code in the web server loop, the user is interfaced with the sensor data like so:

vvoid webServer(){
  char cold,cnew;
  WiFiClient client = server.available();
  if (client) {
    printf("\nReceived connection from %s\n\n",client.remoteIP().toString().c_str());
    while (client.connected()) {
      if (client.available()) {
        cnew = client.read();
        printf("%c",cnew);
        if ((cold == '\n') && (cnew == '\r')) { // check for blank line at end of request
          client.printf("HTTP/1.1 200 OK\n");
          client.printf("Content-type:text/html\n");
          client.println("Refresh: 5"); 
          client.println("<!DOCTYPE HTML>");
          client.println("<html lang='en'>"); 
          client.println("<head\>"); 
          client.println("<meta charset='utf-8'>"); 
          client.println("<title>Smart Steps</title>"); 
          client.println("</head>"); 
          client.println("<body>"); 
          client.println(html);
          client.println(updateAll());
          client.println("</body>");
          client.println("</html>");
          client.flush();
          client.stop();
          break;
          }
        cold = cnew;
        }
      }
    }
}

Future Developments

I would like to develop what I outlined above given more time to make everything look nicer. Possibly following: this