Esp8266 Shop Door Assistant

h1 {
    text-align: center;
    font-family: Georgia, serif;
    padding:10px;
    margin:10px;
    border-bottom: 1px, black;
}

html {
    background-color: #37392E;
    color:azure; 
    margin: 0px;
    width:100%;    
    padding:0 px;
    border-top: 1px black solid;
    border-bottom: 1px black solid;
}

.dataNumbers {
    font-size: 8em;
    text-align: center;
    margin: 0px;
    
}

.dataContainer {
    
    top:0;
    left:0;
    width: 100%;
    background-color: #28AFB0; 
    display:flex;
    border-spacing: 0 0 ;
    border-top: 1px black solid;
    border-bottom: 1px black solid;
}




#rightSection {
    float: right;
    width: 45%;  
    padding: 0px;
}

#leftSection {
    float:left;
    width: 45%;
    margin;
}

#sectionDataLabel {
    margin: 0px;
    background-color: #19647E; 
    text-align: center;
    border-top: 1px black solid;
    border-bottom: 1px white solid;
    padding: 0px;
    
}

#dataIncreaseButton {
    background-color: coral;
    border:none;
    color: white;
    padding:5px 10px;
    font-size: 2em;
    margin-right:10px;
    border-radius: 12px;
    margin-bottom: 8px;
}

#dataDecreaseButton {
    background-color:darkseagreen;
    border:none;
    color: white;
    padding:5px 10px;
    font-size: 2em;
    margin-left:10px;
    border-radius: 12px;
    margin-bottom: 8px;
}

*{
    margin: 0;
}

#Foot {
    background-color: #EEE5E5; 
    color: black;
    padding: 4px;
    margin: 0px;
    border: 0px;
}

#resetButton {
    background-color: coral;
    border:none;
    color: white;
    padding:5px 10px;
    font-size: 2em;
    margin-right:10px;
    border-radius: 12px;
    margin-bottom: 8px;
}

.buttonSection {
text-align: center;
}

#centralSection {
    flaot: left;
    width: 10%;
    text-align: center;
    border: 2px black solid;
    background: #474747;
}

.trafficLight {
    border: solid black 2px;
    border-radius: 50%;
    width:96%;
    height:auto;
    text-align: center;
    line-height: 4.4;
    font-family: Georgia, serif, bold;
}

#redLight {
    background: red;
}

#amberLight {
    background: #FFC200;
}

#greenLight {
    background: lightgreen;
}

#actionLog {
    height:  auto;
    min-width:500px; 
    max-width:99.7%;
    min-height:40px;
    height:100%;
    width:99.5%;
    border: 0;
    overflow-y: scroll;
    padding-bottom: 0;
    border-bottom: 0;
    
}

#include <WebSocketsServer.h>
#include <ESP8266WiFiMulti.h>
#include <ESP8266mDNS.h>
#include <ESP8266WebServer.h>
#include <FS.h>   // Include the SPIFFS library

#ifndef STASSID
#define STASSID ""
#define STAPSK  ""
#endif


//LED sign pins
int redLedPin = D3;
int amberLedPin = D8;
int greenLedPin = D2;

//Entry ultrasonic sensor Pins
int entryPinOut = D5;
int entryPinIn = D6;

//Exit ultrasonic sensor Pins
int exitPinOut = D7;
int exitPinIn = D1;

//WiFi Credentials
const char* ssid = STASSID;
const char* password = STAPSK;

int maxCustomers = 0;
float currentCustomers = 0;

ESP8266WiFiMulti wifiMulti;     // Create an instance of the ESP8266WiFiMulti class, called 'wifiMulti'
ESP8266WebServer server(80);    // Create a webserver object that listens for HTTP request on port 80
WebSocketsServer webSocket(81); // Creat websockets object listening to port 81.


String getContentType(String filename); // convert the file extension to the MIME type
bool handleFileRead(String path);       // send the right file to the client (if it exists)

void setup() {
  Serial.begin(115200);         // Start the Serial communication to send messages to the computer
  delay(10);
  Serial.println('\n');

  startWifi();    //starts WiFi access point.

  SPIFFS.begin();  // Start the SPI Flash Files System

  startWebSocket(); //starts the webSockets server

  startServer(); //starts the HTTP server with a file read handler

  initialisePins();//initialises pins used with hardware

}

void loop(void) {
  webSocket.loop(); //Updates websocket
  MDNS.update();    //Allows mDNS to be used (doesn't work with android phones)
  server.handleClient(); //Handles http requests
  currentCustomers = trafficLight(); //Updates traffic light LEDs and takes sensor readings
  
}

//Fs formatting for http get requests
String getContentType(String filename) { // convert the file extension to the MIME type
  if (filename.endsWith(".html")) return "text/html";
  else if (filename.endsWith(".css")) return "text/css";
  else if (filename.endsWith(".js")) return "application/javascript";
  else if (filename.endsWith(".ico")) return "image/x-icon";
  return "text/plain";
}


bool handleFileRead(String path) { // send the right file to the client (if it exists)
  Serial.println("handleFileRead: " + path);
  if (path.endsWith("/")) path += "dashboard.html";     // If page not fully requested, append the correct ending
  String contentType = getContentType(path);            // Get the MIME type
  if (SPIFFS.exists(path)) {                            // If the file exists
    File file = SPIFFS.open(path, "r");                 // Open it
    size_t sent = server.streamFile(file, contentType); // And send it to the client
    file.close();                                       // Then close the file again
    return true;
  }
  Serial.println("\tFile Not Found");
  return false;                                         // If the file doesn't exist, return false
}

void startWifi(){
  wifiMulti.addAP(ssid, password);   // add Wi-Fi networks you want to connect to

  Serial.println("Connecting ...");
  int i = 0;
  while (wifiMulti.run() != WL_CONNECTED) { // Wait for the Wi-Fi to connect
    delay(250);
    Serial.print('.');
  }

  Serial.println('\n');
  Serial.print("Connected to ");
  Serial.println(WiFi.SSID());              // Tell us what network we're connected to
  Serial.print("IP address:\t");
  Serial.println(WiFi.localIP());           // Send the IP address of the ESP8266 to the computer

  if (MDNS.begin("doorMate")) {              // Start the mDNS responder for esp8266.local
    Serial.println("mDNS responder started");
  } else {
    Serial.println("Error setting up MDNS responder!");
  }
}

void startServer(){
  server.onNotFound([]() {                              // If the client requests any URI
    if (!handleFileRead(server.uri()))                  // send it if it exists
      server.send(404, "text/plain", "404: Not Found"); // otherwise, respond with a 404 (Not Found) error
  });

  server.begin();                           // Actually start the server
  Serial.println("HTTP server started");
}

void startWebSocket(){
  webSocket.begin();
  webSocket.onEvent(webSocketEvent);//if a webSocket message arrives, go to the webSocketEvent function
  Serial.println("WebSocket server started.");
}

//When a webSocket event is received
void webSocketEvent(uint8_t num, WStype_t type, uint8_t * payload, size_t length){
switch(type){
  case WStype_DISCONNECTED://When a server disconnects
  Serial.printf("[%u] Disconnected.\n",num);
  break;
  case WStype_CONNECTED:{//When new server is established
    IPAddress ip = webSocket.remoteIP(num);
    Serial.printf("[%u] connected from %d.%d.%d.%d url: %s\n", num, ip[0], ip[1], ip[2], ip[3], payload);
  }
  break;
  case WStype_TEXT:   //if new text data is received
  Serial.printf("[%u] get Text: %s\n", num, payload);
  uint32_t customers = (int)strtol((const char*) &payload[0], NULL, 10);
  maxCustomers  = customers >> 10 & 0x3FF; //Formatting the payload
  currentCustomers = customers &0x3FF;//Formatting the payload
  Serial.println(maxCustomers);
  Serial.println(currentCustomers);
  break;
} 
}

void initialisePins(){
  //Setting the sign LED pins
  
  pinMode(redLedPin, OUTPUT);
  pinMode(amberLedPin, OUTPUT);
  pinMode(greenLedPin, OUTPUT);


  //Setting the entry ultrasonic sesnor pins
  pinMode(entryPinOut, OUTPUT);
  pinMode(entryPinIn, INPUT);


  //Setting the exit ultrasonic sesnor pins
  pinMode(exitPinOut, OUTPUT);
  pinMode(exitPinIn, INPUT);
  
  Serial.println("Pin Initialisation Complete");
}

int trafficLight(){
 
  //variables to be used
  long entryDuration, entryCm, exitDuration, exitCm;

  //If the us sensor reading is below this value, it reads as a definite scan of a person
  int sensorLimit = 15;

  //If current customer count is greater or equal to max allowance, show the red sign.
  if (currentCustomers >= maxCustomers) {
    digitalWrite(redLedPin, HIGH);
    digitalWrite(amberLedPin, LOW);
    digitalWrite(greenLedPin, LOW);
  }

  //Otherwise show the amber sign and detect for an entry
  else {
    digitalWrite(redLedPin, LOW);
    digitalWrite(amberLedPin, HIGH);
    digitalWrite(greenLedPin, LOW);
    

    //Taking a distance sensor reading
    digitalWrite(entryPinOut, LOW);
    delayMicroseconds(2);
    digitalWrite(entryPinOut, HIGH);

    delayMicroseconds(10);
    digitalWrite(entryPinOut, LOW);
    entryDuration = pulseIn(entryPinIn, HIGH);

    //Converting to cm
    entryCm = entryDuration / 29 / 2;
    Serial.println("Entry Sensor:");
    Serial.println(entryCm);
  
    //If the distance is below the sensorLimit and there is space, the green light will turn on
    if (entryCm <= sensorLimit & currentCustomers < maxCustomers){
      digitalWrite(amberLedPin, LOW);
      digitalWrite(greenLedPin, HIGH);


      currentCustomers++; //Noting the entry of a person

      //Using json formatting to send over data
      String json = "{\"currentCustomers\":";
      json += currentCustomers;
      json += "}";
      Serial.println(json.c_str());

      //Send updated customer count over webSocket
      webSocket.broadcastTXT(json.c_str(), json.length());
      Serial.println("Green, enter, person count:");
      Serial.println(currentCustomers);
      delay(3000);
    }
  }
    //If there is more than 1 person in the shop, detect for departure
  if (currentCustomers > 0) {
    
    //Taking a distance sensor reading for exiting sensors
    digitalWrite(exitPinOut, LOW);
    delayMicroseconds(2);
    digitalWrite(exitPinOut, HIGH);
    delayMicroseconds(10);
    digitalWrite(exitPinOut, LOW);
    exitDuration = pulseIn(exitPinIn, HIGH);
    
    //Converting to cm
    exitCm = exitDuration / 29 / 2;
    Serial.println("Exit Sensor:");
    Serial.println(exitCm);

    if (exitCm <= sensorLimit) {
      currentCustomers--;
  //Putting all lights on to indicate the departure has been read.
      digitalWrite(amberLedPin, HIGH);
      digitalWrite(greenLedPin, HIGH);
      digitalWrite(redLedPin, HIGH);

      //format as json
      String json = "{\"currentCustomers\":";
      json += currentCustomers;
      json += "}";
      Serial.println(json.c_str());

      //Send over updated value
      webSocket.broadcastTXT(json.c_str(), json.length());

      Serial.println("Person left the room, person Count:");
      Serial.println(currentCustomers);
      delay(3000);
    }

  }
  
  return currentCustomers;
}

<!DOCTYPE html>
<html>

<!--  Header  -->
<head>
  <link rel="stylesheet" href="dashboard.css">
    <script type="text/javascript" src="dashboard.js"></script>
</head>
    
<!--Title-->
<h1>
    Customer Data
</h1>

    
<!--Main Page     -->
<section class = "dataContainer">
    <section id = "leftSection">
        <h3 id = sectionDataLabel>
            Current Number of Customers:
        </h3>
        
        <body>
            <p class = "dataNumbers" id = "currentCustomers">
                0
            </p>
        </body>
        <section class = "buttonSection">
            <button id = "resetButton" onclick="currentCustomers = resetCurrent()">
        Reset Counter
        </button>
        </section>
        
    </section>
    
    <section id = "centralSection">
    <section class = "trafficLight" id = "redLight">
        Queue</section>
    <section class="trafficLight" id = amberLight>
        Scan</section>
    <section class="trafficLight" id = greenLight>
        Enter</section>
    </section>
    <section id = "rightSection">
    <h3 id = sectionDataLabel>
        Customer Limit:
    </h3>
        <body>
            <p class = "dataNumbers" id = "maxCustomers">
                0
            </p>

        </body>
       <section class = "buttonSection">
        <button id = "dataIncreaseButton" onclick="maxCustomers = increaseMax()">Increase</button>
 
        <button id = "dataDecreaseButton" onclick = "maxCustomers = decreaseMax()">Decrease</button>   
        </section> 
    </section>
</section>
    <section>
    <textarea id = "actionLog" readonly rows="4">Action Log: System reset, please wait until system is ready.</textarea>
    </section>
    
<!-- Footer   -->
<p id = "Foot">
    Version: <b>0.70</b><br>
    Last website edit date: <b>03 July 2020</b><br>
A website to accompany a <a href = "https://www.hackster.io/HarryAnderson> Hackster.io Project</a> to reduce the spread of Covid-19 while enabling small shops to open during the release of lockdown.
</p>  
    
   
    
</html>