From f126fe72e971d42ec9f44b44a155f5386ecf34a6 Mon Sep 17 00:00:00 2001
From: Bill Matt <83033180+varhah@users.noreply.github.com>
Date: Tue, 11 Mar 2025 19:06:36 -0400
Subject: [PATCH 01/18] Delete Arduino
 Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino

---
 .../BREAD-DARPA-Controls.ino                  | 891 ------------------
 1 file changed, 891 deletions(-)
 delete mode 100644 Arduino Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino

diff --git a/Arduino Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino b/Arduino Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino
deleted file mode 100644
index 5f94204..0000000
--- a/Arduino Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino	
+++ /dev/null
@@ -1,891 +0,0 @@
-/* Function layouts
-Get thermocouple data:        void RLHTRequestThermo(int address, float* t1, float* t2)
-Set heating setpoint:         void RLHTCommandSetpoint(int address, byte heater, float heatSetpoint, byte thermocouple, bool enableReverse)
-Set heating PID tunings:      void RLHTCommandPID(int address, byte heater, float Kp_set, float Ki_set, float Kd_set)
-Set motor speeds:             void DCMTCommandSpeed(int address, byte motor, int speed_set, bool enable)
-Set as pump with pH setpoint: void DCMTCommandPH(int address, float pHSetpoint_set, float currentPH_set)
-Set as pH PID tunings:        void DCMTCommandPHPID(int address, float Kp_set, float Ki_set, float Kd_set)
-Set as turbidity pump:        void DCMTCommandTurbidity(int address, byte motor, byte direction, bool enable, int sample_period)
-Send commands to pH & DO:     void PHDOCommand(int address, char *commandData)
-Get pH or DO readings:        float PHDORequest(int address)
-*/
-
-#include <WiFi.h>
-#include <AsyncTCP.h>
-#include <ESPAsyncWebServer.h>
-#include <ArduinoJson.h>
-
-#include "SD.h"
-#include "FS.h"
-#include "SPI.h"
-#include <Wire.h>
-
-#include <ESP32Time.h>
-ESP32Time rtc;
-
-#define SLICE_DATA_INTERVAL_MS 10000
-
-#define NUM_DCMT_SLICES   8
-#define NUM_RLHT_SLICES   8
-#define NUM_PHDO_SLICES   2
-
-// microSD Card Reader connections
-#define SD_CS          5
-#define SPI_MOSI      23 
-#define SPI_MISO      19
-#define SPI_SCK       18
-
-#define ESTOP   32
-
-const char* ssid     = "BREAD-DARPA";
-const char* password = "12345678";
-
-// Useful unions for breaking data into bytes
-union FLOATUNION_t //Define a float that can be broken up and sent via I2C
-{
-  float number;
-  uint8_t bytes[4];
-};
-union INTUNION_t //Define an int that can be broken up and sent via I2C
-{
-  int number;
-  uint8_t bytes[4];
-};
-
-// Slice structures for managing data
-struct DCMT_t {
-  int address;    // I2C address of Slice
-  int m1Speed;   // motor 1 speed (-100-100)
-  int m2Speed;   // motor 2 speed (-100-100)
-  bool m1En;   // motor 1 enable (0:off/apply brake, 1:on/coast)
-  bool m2En;   // motor 2 enable (0:off/apply brake, 1:on/coast)
-  float pHSetpoint;
-  float currentPH;
-  float Kp_pH;
-  float Ki_pH;
-  float Kd_pH;
-};
-
-struct RLHT_t {
-  int address;    // I2C address of Slice
-  float heatSetpoint_1;   // set desired temperature for heater 1 (if using relay as heater actuator)
-  float Kp_1;             // PID proportional gain for heater 1
-  float Ki_1;             // PID integral gain for heater 1
-  float Kd_1;             // PID derivative gain for heater 1 
-  float heatSetpoint_2;
-  float Kp_2;
-  float Ki_2;
-  float Kd_2;
-  float thermo1;  // thermocouple 1 measurement
-  float thermo2;  // thermocouple 2 measurement
-};
-
-struct PHDO_t {
-  int addressPH; // I2C address of Atlas Scientific pH EZO board (default = 99)
-  int addressDO; // I2C address of Atlas Scientific dissolved oxygen EZO board (default = 97)
-  float pH;       // current pH reading
-  float DO;       // current dissolved oxygen reading
-  bool calPH = false;
-  bool calDO = false;
-};
-
-DCMT_t DCMT[NUM_DCMT_SLICES];
-RLHT_t RLHT[NUM_RLHT_SLICES];
-PHDO_t PHDO[NUM_PHDO_SLICES];
-
-int pyro_thermo[9][2] = {   // pyrolyis thermocouple layout {address, thermocouple}
-  {16, 2}, // DT
-  {17, 1}, // DHT
-  {16, 1}, // V
-  {15, 2}, // CC
-  {15, 1}, // SR
-  {14, 1}, // KD
-  {10, 1}, // C0
-  {11, 1}, // C1
-  {12, 1}  // C2
-};
-float pyro_thermo_val[9] = {0,0,0,0,0,0,0,0,0};   // stores thermocouple values
-
-int pyro_heater[10][4] = {   // pyrolysis heater/fan layout {address, heater, thermocouple, reverseEnable}
-  {16, 2, 2, 0}, // DT
-  {16, 1, 1, 0}, // V
-  {15, 2, 2, 0}, // CC
-  {15, 1, 1, 0}, // SR
-  {14, 1, 1, 0}, // KD
-  {10, 1, 1, 0}, // C0H
-  {10, 2, 1, 1}, // C0F
-  {11, 1, 1, 0}, // C1H
-  {11, 2, 1, 1}, // C1F
-  {12, 1, 1, 1}  // C2F
-};
-float pyro_heater_pid[10][4];  // pyrolysis heater/fan PID {setpoint, Kp, Ki, Kd}
-
-int bio_thermo[2][2] = {    // bioreator thermocouples {address, thermocouple}
-  {10, 2},
-  {11, 2}
-};
-int bio_post_heaters[2][4] = {    // bioreactor post processing heaters {address, heater, thermocouple, reverseEnable}
-  {12, 2, 2, 0},    // pasteurization
-  {14, 2, 2, 0}     // dryer
-};
-float bio_post_heater_pid[2][4];  // {setpoint, Kp, Ki, Kd}
-float bio_thermo_val[4] = {0,0,0,0};
-
-int bio_ph[2][2] = {      // bioreactor pH layout {PHDO address, DCMT address}
-  {98, 20},
-  {100, 21}
-};
-float bio_ph_val[2][5];   // bioreactor pH settings (pH, Setpoint, Kp, Ki, Kd)
-
-int bio_do[2] = {97, 99}; // bioreactor DO addresses
-float bio_do_val[2] = {0,0};      // bioreactor DO values
-
-int bio_turbidity[2][4] = {   // bioreactor turbidity pump {address, motor, direction, sampleTime}
-  {22, 1, 1, 0},
-  {22, 2, 1, 0}
-};
-float bio_turbidity_val[2] = {0,0};   // bioreactor turbidity value
-
-int bio_motors[10][3] = {     // bioreactor motor config {address, motor, speed}
-  {23, 1, 0},   // stirring 1
-  {20, 1, 0},   // base 1
-  {20, 2, 0},   // acid 1
-  {24, 1, 0},   // water
-  {24, 2, 0},   // spent media
-  {23, 2, 0},   // stirring 2
-  {21, 1, 0},   // base 2
-  {21, 2, 0},   // acid 2
-  {25, 1, 0},   // harvest
-  {25, 2, 0}    // TFF
-};
-
-int chem_thermo[2][4] = {   // {address, heater, thermocouple, reverseEnable}
-  {13, 1, 1, 0},    // reactor 1
-  {13, 2, 2, 0}     // reactor 2
-};
-float chem_thermo_val[2] = {0,0};
-float chem_heater_pid[2][4];
-
-int chem_motors[4][3] = {
-  {26, 1, 0},   // ammonium hydroxide
-  {26, 2, 0},   // liquid transfer
-  {27, 1, 0},   // water dilute
-  {27, 2, 0}    // reactor wash
-};
-
-AsyncWebServer server(80);
-
-AsyncEventSource events("/events");
-
-bool logging = false; //logging data to SD card and graphs
-
-void initSlices(){
-  // DCMT Slice address assignment
-  for(int i=0;i<NUM_DCMT_SLICES;i++){
-    DCMT[i].address = 20+i;   // addresses 20-26
-  }
-  // RLHT Slice address assignment
-  for(int i=0;i<NUM_RLHT_SLICES;i++){
-    RLHT[i].address = 10+i;   // addresses 10-15
-  }
-  // addresses of Atlas Scientific Sensors
-  PHDO[0].addressDO = 97;
-  PHDO[0].addressPH = 98;
-  PHDO[1].addressDO = 99;
-  PHDO[1].addressPH = 100;
-}
-
-void initSDCard(){
-  pinMode(SD_CS, OUTPUT);      
-  digitalWrite(SD_CS, HIGH); 
-    
-  // Initialize SPI bus for microSD Card
-  SPI.begin(SPI_SCK, SPI_MISO, SPI_MOSI);
-  
-  if(!SD.begin(SD_CS)){
-    Serial.println("Card Mount Failed");
-    return;
-  }
-  uint8_t cardType = SD.cardType();
-
-  if(cardType == CARD_NONE){
-    Serial.println("No SD card attached");
-    return;
-  }
-
-  Serial.print("SD Card Type: ");
-  if(cardType == CARD_MMC){
-    Serial.println("MMC");
-  } else if(cardType == CARD_SD){
-    Serial.println("SDSC");
-  } else if(cardType == CARD_SDHC){
-    Serial.println("SDHC");
-  } else {
-    Serial.println("UNKNOWN");
-  }
-  uint64_t cardSize = SD.cardSize() / (1024 * 1024);
-  Serial.printf("SD Card Size: %lluMB\n", cardSize);
-}
-
-void removeFile(fs::FS &fs, const char * path){
-  Serial.printf("Removing file: %s\n", path);
-
-  bool file = fs.remove(path);
-  if(!file){
-    Serial.println("Failed to remove file");
-    return;
-  } else {
-    Serial.println("Removed file");
-  }
-}
-
-void appendFile(fs::FS &fs, const char * path, String message){
-  Serial.printf("Appending to file: %s\n", path);
-
-  File file = fs.open(path, FILE_APPEND);
-  if(!file){
-    Serial.println("Failed to open file for appending");
-    return;
-  }
-  if(file.print(message)){
-      Serial.println("Message appended");
-  } else {
-    Serial.println("Append failed");
-  }
-  file.close();
-}
-
-void writeFile(fs::FS &fs, const char * path, const char * message){
-  Serial.printf("Writing file: %s\n", path);
-
-  File file = fs.open(path, FILE_WRITE);
-  if(!file){
-    Serial.println("Failed to open file for writing");
-    return;
-  }
-  if(file.print(message)){
-    Serial.println("File written");
-  } else {
-    Serial.println("Write failed");
-  }
-  file.close();
-}
-
-uint32_t lastPOST;
-
-void setup() {
-  Serial.begin(115200);
-
-  Wire.begin();
-  
-  initSDCard();
-
-  initSlices();
-
-  pinMode(ESTOP, OUTPUT);
-
-  //start access point wifi
-  WiFi.softAP(ssid, password);
-  IPAddress myIP = WiFi.softAPIP();
-  Serial.print("AP IP address: ");
-  Serial.println(myIP);
-  Serial.println("Server started");
-
-  //send html data to server
-  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
-    request->send(SD, "/index.html", "text/html");
-  });
-
-  //load data from slice form
-
-/*
-Pyrolysis Commands:
-  ps1:  pyrolysis setpoint 1
-  pp1:  pyrolysis Kp 1
-  pi1:  pyrolysis Ki 1
-  pd1:  pyrolysis Kd 1
-
-Bioreactor Commands:
-  bs1:  bioreactor setpoint 1
-  bp1:  bioreactor Kp 1
-  bi1:  bioreactor Ki 1
-  bd1:  bioreactor Kd 1
-  bm1:  bioreactor motor 1
-  bt1:  bioreactor turbidity sample time 1
-
-Chem Decon Commands:
-  cm1:  chemreactor motor 1 (pump)
-  cs1:  chemreactor setpoint 1
-  cp1:  chemreactor Kp 1
-  ci1:  chemreactor Ki 1
-  cd1:  chemreactor Kd 1
-*/
-
-  server.on("/form-submit", HTTP_POST, [](AsyncWebServerRequest * request) {
-    int params = request->params();
-    for (int i = 0; i < params; i++) {
-      AsyncWebParameter* p = request->getParam(i);
-      Serial.printf("POST[%s]: %s\n", p->name().c_str(), p->value().c_str());
-      String postName = p->name().c_str();
-      String postValue = p->value().c_str();
-      uint8_t index = postName.substring(2).toInt() - 1;
-
-      if(postName.charAt(0) == 'p') {   // pyrolysis reactor
-        switch(postName.charAt(1)) {
-          case 's': //setpoint
-            pyro_heater_pid[index][0] = postValue.toFloat();
-            RLHTCommandSetpoint(pyro_heater[index][0], pyro_heater[index][1], pyro_heater_pid[index][0], pyro_heater[index][2], pyro_heater[index][3]);
-            break;
-          case 'p': //Kp
-            pyro_heater_pid[index][1] = postValue.toFloat();
-            break;
-          case 'i': //Ki
-            pyro_heater_pid[index][2] = postValue.toFloat();
-            break;
-          case 'd': //Kd
-            pyro_heater_pid[index][3] = postValue.toFloat();
-            RLHTCommandPID(pyro_heater[index][0], pyro_heater[index][1], pyro_heater_pid[index][1], pyro_heater_pid[index][2], pyro_heater_pid[index][3]);
-            break;
-        }
-        //float converted into 4 bytes
-      }else if(postName.charAt(0) == 'b') {
-        uint8_t index = postName.substring(2).toInt() - 1;
-        switch(postName.charAt(1)) {
-          case 's': //setpoint
-            bio_ph_val[index][1] = postValue.toFloat();
-            DCMTCommandPH(bio_ph[index][1], bio_ph_val[index][1], bio_ph_val[index][0]);
-            break;
-          case 'p': //Kp
-            bio_ph_val[index][2] = postValue.toFloat();
-            //send command to BREAD here:
-            break;
-          case 'i': //Ki
-            bio_ph_val[index][3] = postValue.toFloat();
-            //send command to BREAD here:
-            break;
-          case 'd': //Kd
-            bio_ph_val[index][2] = postValue.toFloat();
-            Serial.println("Sending pH PID");
-            DCMTCommandPHPID(bio_ph[index][1], bio_ph_val[index][2], bio_ph_val[index][3], bio_ph_val[index][4]);
-            break;
-          case 'm':
-            bio_motors[index][2] = postValue.toInt();
-            DCMTCommandSpeed(bio_motors[index][0], bio_motors[index][1], bio_motors[index][2], 1);
-            break;
-          case 't':
-            bio_turbidity[index][3] = postValue.toInt();  // sample time
-            DCMTCommandTurbidity(bio_turbidity[index][0], bio_turbidity[index][1], bio_turbidity[index][2], 1, bio_turbidity[index][3]);
-            break;
-        }
-      } else if(postName.charAt(0) == 'c') {
-        switch(postName.charAt(1)) {
-          case 's': //setpoint
-            chem_heater_pid[index][0] = postValue.toFloat();
-            RLHTCommandSetpoint(chem_thermo[index][0], chem_thermo[index][1], chem_heater_pid[index][0], chem_thermo[index][2], chem_thermo[index][3]);
-            //send command to BREAD here:
-            break;
-          case 'p': //Kp
-            chem_heater_pid[index][1] = postValue.toFloat();
-            //send command to BREAD here:
-            break;
-          case 'i': //Ki
-            chem_heater_pid[index][2] = postValue.toFloat();
-            //send command to BREAD here:
-            break;
-          case 'd': //Kd
-            chem_heater_pid[index][3] = postValue.toFloat();
-            RLHTCommandPID(chem_thermo[index][0], chem_thermo[index][1], chem_heater_pid[index][1], chem_heater_pid[index][2], chem_heater_pid[index][3]);
-            break;
-          case 'm':
-            chem_motors[index][2] = postValue.toInt();
-            DCMTCommandSpeed(chem_motors[index][0], chem_motors[index][1], chem_motors[index][2], 1);
-            break;
-        }
-      }else if(postName.charAt(0) == 'P') {   // bioreactor post processing
-        uint8_t index = postName.substring(2).toInt() - 1;
-        switch(postName.charAt(1)) {
-          case 's': //setpoint
-            bio_post_heater_pid[index][0] = postValue.toFloat();
-            RLHTCommandSetpoint(bio_post_heaters[index][0], bio_post_heaters[index][1], bio_post_heater_pid[index][0], bio_post_heaters[index][2], bio_post_heaters[index][3]);
-            break;
-          case 'p': //Kp
-            bio_post_heater_pid[index][1] = postValue.toFloat();
-            //send command to BREAD here:
-            break;
-          case 'i': //Ki
-            bio_post_heater_pid[index][2] = postValue.toFloat();
-            //send command to BREAD here:
-            break;
-          case 'd': //Kd
-            bio_post_heater_pid[index][3] = postValue.toFloat();
-            Serial.println("Sending pH PID");
-            RLHTCommandPID(bio_post_heaters[index][0], bio_post_heaters[index][1], bio_post_heater_pid[index][1], bio_post_heater_pid[index][2], bio_post_heater_pid[index][3]);
-            break;
-        }
-      }
-    }
-  });
-
-  //load any non-form POST request body and url
-  server.onRequestBody([](AsyncWebServerRequest *request, uint8_t *data, size_t len, size_t index, size_t total){
-    Serial.println(request->url());
-    if (request->url() == "/all-data") {
-      String s = "";
-      for(size_t i=0; i<len; i++) {
-        s += char(data[i]);
-      }
-      Serial.println(s);
-    }if(request->url() == "/get-variables") {
-      //set time on esp32 rtc
-      String s = "";
-      for(size_t i=0; i<len; i++) {
-        s += char(data[i]);
-      }
-      
-      uint16_t timeDate[6];
-      for(uint8_t x = 0; x < 5; x++) {
-        uint8_t nextComma = s.indexOf(',');
-        timeDate[x] = s.substring(0, nextComma).toInt();
-        s = s.substring(nextComma+1);
-      }
-      timeDate[5] = s.toInt();
-      rtc.setTime(timeDate[0], timeDate[1], timeDate[2], timeDate[3], timeDate[4], timeDate[5]);
-
-      //how variables are sent to the server (I should probably use a more structured format like JSON)
-      String toServer = "";
-      if(logging) {
-        toServer += "logging-";
-      } else {
-        toServer += "not logging-";
-      }
-           
-      for(uint8_t x = 0; x < 10; x++) {
-        toServer += (
-          String(pyro_heater_pid[x][0]) + "|" +   // setpoint
-          String(pyro_heater_pid[x][1]) + "|" +          // Kp
-          String(pyro_heater_pid[x][2]) + "|" +          // Ki
-          String(pyro_heater_pid[x][3]) + ","            // Kd
-        );
-      }
-      toServer.remove(toServer.length()-1);
-      toServer += '-';
-
-      for(uint8_t x = 0; x < 2; x++) {
-        toServer += (
-          String(bio_ph_val[x][1]) + "|" +    // setpoint
-          String(bio_ph_val[x][2]) + "|" +    // Kp
-          String(bio_ph_val[x][3]) + "|" +    // Ki
-          String(bio_ph_val[x][4]) + ","      // Kd
-        );
-      }
-      toServer.remove(toServer.length()-1);
-      toServer += '-';
-      toServer += String(bio_turbidity[0][3]) + "," + String(bio_turbidity[1][3]);
-      toServer += '-';
-
-      for(uint8_t x = 0; x < 2; x++) {
-        toServer += (
-          String(bio_post_heater_pid[x][0]) + "|" +    // setpoint
-          String(bio_post_heater_pid[x][1]) + "|" +    // Kp
-          String(bio_post_heater_pid[x][2]) + "|" +    // Ki
-          String(bio_post_heater_pid[x][3]) + ","      // Kd
-        );
-      }
-      toServer.remove(toServer.length()-1);
-      toServer += '-';
-      
-      for(uint8_t x = 0; x < 10; x++) {
-        toServer += String(bio_motors[x][2]) + ",";   // motor speed
-      }
-      toServer.remove(toServer.length()-1);
-      toServer += '-';
-
-      for(uint8_t x = 0; x < 4; x++) {
-        toServer += String(chem_motors[x][2]) + ",";  // motor speed
-      }
-      toServer.remove(toServer.length()-1);
-      toServer += '-';
-
-      for(uint8_t x = 0; x < 2; x++) {
-        toServer += (
-          String(chem_heater_pid[x][0]) + "|" +    // setpoint
-          String(chem_heater_pid[x][1]) + "|" +    // Kp
-          String(chem_heater_pid[x][2]) + "|" +    // Ki
-          String(chem_heater_pid[x][3]) + ","      // Kd
-        );
-      }
-      toServer.remove(toServer.length()-1);
-      
-      request->send(200, "text/plain", toServer);
-    } if(request->url() == "/logging") {
-      Serial.println("log to SD card");
-      logging = true;
-    } if(request->url() == "/not-logging") {
-      Serial.println("stop log to SD card");
-      logging = false;
-    } if(request->url() == "/estop-on") {
-      Serial.println("estop on");
-      digitalWrite(ESTOP, HIGH);
-    } if(request->url() == "/estop-off") {
-      Serial.println("estop off");
-      digitalWrite(ESTOP, LOW);
-    } else if(request->url() == "/delete-pyrolysis") {
-      writeFile(SD, "/pyrolysis-data.csv", "Date and Time,Dissolution Tank,Dissolution Heating Tape,Valve,Char Chamber,Secondary Reactor,Knockout Drum,Condenser 0,Condenser 1,Condenser 2");
-    } else if(request->url() == "/delete-bioreactor") {
-      writeFile(SD, "/bioreactor-data.csv", "Date and Time,Thermocouple 1,pH Sensor 1,Dissolved Oxygen 1,Turbidity 1,Thermocouple 2, pH Sensor 2, Dissolved Oxygen 2,Turbidity 2,Pasteurization,Dryer");
-    } else if(request->url() == "/delete-chemreactor") {
-      writeFile(SD, "/chemreactor-data.csv", "Date and Time,Reactor 1,Reactor 2");
-    }
-  });
-
-  // Handle Web Server Events
-  events.onConnect([](AsyncEventSourceClient *client){
-    if(client->lastId()){
-      Serial.printf("Client reconnected! Last message ID that it got is: %u\n", client->lastId());
-    }
-    // send event with message "hello!", id current millis
-    // and set reconnect delay to 1 second
-    client->send("hello!", NULL, millis(), 10000);
-  });
-  server.addHandler(&events);
-
-  server.serveStatic("/", SD, "/");
-  server.begin();
-
-  lastPOST = millis();
-}
-
-uint32_t calTime = 0;
-int calDelay = 900;
-bool readRequestedPHDO = false;
-
-uint8_t loggingCounter = 6;
-void loop() {
-  //get slice data from slices
-  if(millis() - lastPOST > SLICE_DATA_INTERVAL_MS) {
-    Serial.println("getting data");
-    //get time
-    String timeToServer = rtc.getTime("%F %T");
-    String pyrolysisToServer = timeToServer;
-    String bioToServer = timeToServer;
-    String chemToServer = timeToServer;
-    
-    //Heating data
-    for(int i=0;i<9;i++){
-      float temp;
-      if(pyro_thermo[i][1] == 1)
-        RLHTRequestThermo(pyro_thermo[i][0], &(pyro_thermo_val[i]), &(temp));
-      if(pyro_thermo[i][1] == 2)
-        RLHTRequestThermo(pyro_thermo[i][0], &(temp), &(pyro_thermo_val[i]));
-    }
-
-    //Bioreactor data
-
-    for(uint8_t n = 0; n < 2; n++) {
-      if(readRequestedPHDO) bio_ph_val[n][0] = PHDORequest(bio_ph[n][0]);
-      if(readRequestedPHDO) bio_do_val[n] = PHDORequest(bio_do[n]);
-      DCMTRequestTurbidity(bio_turbidity[n][0], &(bio_turbidity_val[0]), &(bio_turbidity_val[1]));
-
-      // update pH pump controller with new pH values if setpoint is nonzero
-      if(bio_ph_val[n][1] != 0)
-        DCMTCommandPH(10 + n, bio_ph_val[n][1], bio_ph_val[n][0]);
-
-      float temp;
-      if(bio_thermo[n][1] == 1)
-        RLHTRequestThermo(bio_thermo[n][0], &(bio_thermo_val[n]), &(temp));
-      if(bio_thermo[n][1] == 2)
-        RLHTRequestThermo(bio_thermo[n][0], &(temp), &(bio_thermo_val[n]));
-    }
-    for(int i=0;i<2;i++){
-      float temp;
-      if(bio_post_heaters[i][2] == 1)
-        RLHTRequestThermo(bio_post_heaters[i][0], &(bio_thermo_val[i+2]), &(temp));
-      if(bio_post_heaters[i][2] == 2)
-        RLHTRequestThermo(bio_post_heaters[i][0], &(temp), &(bio_thermo_val[i+2]));
-    }
-    readRequestedPHDO = false;  // reload new read request
-    
-    //Chemreactor data
-    for(uint8_t n = 0; n < 2; n++) {
-      float temp;
-      if(chem_thermo[n][2] == 1)
-        RLHTRequestThermo(chem_thermo[n][0], &(chem_thermo_val[n]), &(temp));
-      if(chem_thermo[n][2] == 2)
-        RLHTRequestThermo(chem_thermo[n][0], &(temp), &(chem_thermo_val[n]));
-    }
-
-    //convert to data to string to save to SD card and send to server
-    for(uint8_t n = 0; n < 9; n++) {
-      pyrolysisToServer += "," + String(pyro_thermo_val[n]);
-    }
-    for(uint8_t n = 0; n < 2; n++) {
-      bioToServer += "," + String(bio_thermo_val[n]) + "," + String(bio_ph_val[n][0]) + "," + String(bio_do_val[n]) + "," + String(bio_turbidity_val[n]);
-    }
-    bioToServer += "," + String(bio_thermo_val[2]) + "," + String(bio_thermo_val[3]);
-    for(uint8_t n = 0; n < 2; n++) {
-      chemToServer += "," + String(chem_thermo_val[n]);
-    }
-
-    //send data to website
-/*
-Readings to Webpage Format
-Pyrolysis Reactor:
-  Format:  Date and Time,Dissolution Tank,Dissolution Heating Tape,Valve,Char Chamber,Secondary Reactor,Knockout Drum,Condenser 0,Condenser 1,Condenser 2
-  Index:        0       ,       1        ,            2           ,   3 ,     4      ,        5        ,      6      ,     7     ,     8     ,     9    
-Bioreactor:
-  Format:  Date and Time,Thermo1,pH1,DO1,Turb1,Thermo2,pH2,DO2,Turb2,Past,Dry
-  Index:       0        ,   1   , 2 , 3 ,  4  ,   5   , 6 , 7 ,  8  ,  9 , 10
-Chemreactor:
-  Format:  Date and Time,Reactor 1,Reactor 2
-  Index:         0      ,    1    ,    2
-*/
-    events.send(pyrolysisToServer.c_str(), "pyrolysis-readings", millis());
-    events.send(bioToServer.c_str(), "bioreactor-readings", millis());
-    events.send(chemToServer.c_str(), "chemreactor-readings", millis());
-    
-    //log onto the SD card
-    if(logging){
-      appendFile(SD, "/pyrolysis-data.csv", "\r\n" + pyrolysisToServer);
-      appendFile(SD, "/bioreactor-data.csv", "\r\n" + bioToServer);
-      appendFile(SD, "/chemreactor-data.csv", "\r\n" + chemToServer);
-    }
-    lastPOST = millis();
-  }else if(!readRequestedPHDO){
-    for(uint8_t n = 0; n < 2; n++){
-      PHDOCommand(bio_do[n], "r");  // request reading from DO sensors
-      PHDOCommand(bio_ph[n][0], "r");  // request reading from pH sensors
-    }
-    readRequestedPHDO = true;
-  }
-}
-
-void RLHTRequestThermo(int address, float* t1, float* t2)
-{
-  bool data_received = false;
-  byte in_char;
-  char in_data[20];
-  FLOATUNION_t thermo1;
-  FLOATUNION_t thermo2;
-
-  thermo1.number = 0;
-  thermo2.number = 0;
-  
-  Wire.requestFrom(address, 8, 1);
-  int i=0;
-  while (Wire.available()) {                 //are there bytes to receive.
-    data_received = true;
-    in_char = Wire.read();                   //receive a byte.
-    in_data[i] = in_char;                    //load this byte into our array.
-    i++;                                  //incur the counter for the array element.
-  }
-
-  if(data_received){
-    for(int x=0;x<4;x++)
-    {
-      thermo1.bytes[x] = in_data[x];
-      thermo2.bytes[x] = in_data[x+4];
-    }
-  }
-
-  *t1 = thermo1.number;
-  *t2 = thermo2.number;
-}
-
-void RLHTCommandSetpoint(int address, byte heater, float heatSetpoint, byte thermocouple, bool enableReverse)
-{
-  FLOATUNION_t setpoint;
-  setpoint.number = heatSetpoint;
-
-  Wire.beginTransmission(address);
-  Wire.write('H');
-  Wire.write(heater);
-  for(int i=0; i<4; i++){
-    Wire.write(setpoint.bytes[i]);              // sends one byte
-  }
-  Wire.write(thermocouple);
-  Wire.write(enableReverse);
-  Wire.endTransmission();    // stop transmitting
-
-  Serial.print(address);
-  Serial.print('H');
-  Serial.print(heater);
-  Serial.print(setpoint.number);
-  Serial.print(thermocouple);
-  Serial.println(enableReverse);
-}
-
-void RLHTCommandPID(int address, byte heater, float Kp_set, float Ki_set, float Kd_set)
-{
-  FLOATUNION_t Kp;
-  FLOATUNION_t Ki;
-  FLOATUNION_t Kd;
-
-  Kp.number = Kp_set;
-  Ki.number = Ki_set;
-  Kd.number = Kd_set;
-
-  Wire.beginTransmission(address);
-  Wire.write('P');
-  Wire.write(heater);
-  for(int i=0; i<4; i++){
-    Wire.write(Kp.bytes[i]);              // sends one byte
-  }
-  for(int i=0; i<4; i++){
-    Wire.write(Ki.bytes[i]);              // sends one byte
-  }
-  for(int i=0; i<4; i++){
-    Wire.write(Kd.bytes[i]);              // sends one byte
-  }
-  Wire.endTransmission();    // stop transmitting
-
-  Serial.print(address);
-  Serial.print('P');
-  Serial.print(heater);
-  Serial.print(Kp.number);
-  Serial.print(Ki.number);
-  Serial.println(Kd.number);
-}
-
-void DCMTRequestTurbidity(int address, float* turbidity1, float* turbidity2)
-{
-  bool data_received = false;
-  byte in_char;
-  char in_data[20];
-  FLOATUNION_t turb1, turb2;
-
-  turb1.number = 0;
-  turb2.number = 0;
-  
-  Wire.requestFrom(address, 10, 1);
-  int i=0;
-  while (Wire.available()) {                 //are there bytes to receive.
-    data_received = true;
-    in_char = Wire.read();                   //receive a byte.
-    in_data[i] = in_char;                    //load this byte into our array.
-    i++;                                  //incur the counter for the array element.
-  }
-
-  if(data_received){
-    for(int x=0;x<4;x++){
-      turb1.bytes[x] = in_data[x];
-      turb2.bytes[x] = in_data[x+4];
-    }
-  }
-
-  *turbidity1 = turb1.number;
-  *turbidity2 = turb2.number;
-}
-
-void DCMTCommandTurbidity(int address, byte motor, byte direction, bool enable, int sample_period)
-{
-  INTUNION_t sample_p;
-  sample_p.number = sample_period;
-
-  Wire.beginTransmission(address);
-  Wire.write('T');
-  Wire.write(motor);
-  Wire.write(direction);
-  Wire.write(enable);
-  for(int i=0;i<4;i++) Wire.write(sample_p.bytes[i]);
-  Wire.endTransmission();
-}
-
-void DCMTCommandSpeed(int address, byte motor, int speed_set, bool enable)
-{
-  INTUNION_t speed;
-  speed.number = speed_set;
-
-  Wire.beginTransmission(address);
-  Wire.write('M');
-  Wire.write(motor);
-  for(int i=0; i<4; i++){
-    Wire.write(speed.bytes[i]);              // sends one byte
-  }
-  Wire.write(enable);
-  Wire.endTransmission();    // stop transmitting
-}
-
-void DCMTCommandPH(int address, float pHSetpoint_set, float currentPH_set)
-{
-  FLOATUNION_t pHSetpoint, currentPH;
-  pHSetpoint.number = pHSetpoint_set;
-  currentPH.number = currentPH_set;
-
-  Wire.beginTransmission(address);
-  Wire.write('p');
-  for(int i=0; i<4; i++) Wire.write(currentPH.bytes[i]);
-  for(int i=0; i<4; i++) Wire.write(pHSetpoint.bytes[i]);
-  Wire.endTransmission();    // stop transmitting
-}
-
-void DCMTCommandPHPID(int address, float Kp_set, float Ki_set, float Kd_set)
-{
-  FLOATUNION_t Kp, Ki, Kd;
-  Kp.number = Kp_set;
-  Ki.number = Ki_set;
-  Kd.number = Kd_set;
-
-  Wire.beginTransmission(address);
-  Wire.write('P');
-  for(int i=0; i<4; i++) Wire.write(Kp.bytes[i]);
-  for(int i=0; i<4; i++) Wire.write(Ki.bytes[i]);
-  for(int i=0; i<4; i++) Wire.write(Kd.bytes[i]);
-  Wire.endTransmission();    // stop transmitting
-}
-
-
-void PHDOCommand(int address, char *commandData)
-{
-  Wire.beginTransmission(address);
-  Wire.write(commandData);
-  Serial.println(commandData);
-  Wire.endTransmission();    // stop transmitting
-}
-
-float PHDORequest(int address)
-{
-  byte in_char;
-  char in_data[20];
-  FLOATUNION_t data;
-
-  Wire.requestFrom(address, 20, 1);
-
-  byte code = 0;
-  code = Wire.read();                                                   //the first byte is the response code, we read this separately.
-
-  switch (code) {                           //switch case based on what the response code is.
-    case 1:                                 //decimal 1.
-      Serial.println("Success");            //means the command was successful.
-      break;                                //exits the switch case.
-
-    case 2:                                 //decimal 2.
-      Serial.println("Failed");             //means the command has failed.
-      break;                                //exits the switch case.
-
-    case 254:                               //decimal 254.
-      Serial.println("Pending");            //means the command has not yet been finished calculating.
-      break;                                //exits the switch case.
-
-    case 255:                               //decimal 255.
-      Serial.println("No Data");            //means there is no further data to send.
-      break;                                //exits the switch case.
-  }
-
-  int i=0;
-  if(code == 1){
-    while (Wire.available()) {                 //are there bytes to receive.
-      in_char = Wire.read();                   //receive a byte.
-      if(code != 1)                            // check if incoming data is valid
-        in_data[i] = 0;                        // set values to zero if not valid data
-      else
-        in_data[i] = in_char;                    //load this byte into our array.
-      i++;                                  //incur the counter for the array element.
-      if (in_char == 0) {                      //if we see that we have been sent a null command.
-        i = 0;                                 //reset the counter i to 0.
-        break;                                 //exit the while loop.
-      }
-    }
-    return atof(in_data);
-  }else
-    return 0;
-}
\ No newline at end of file

From 426fad6645eaf122757ae6768ac43f686c2f72cd Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Sat, 22 Mar 2025 15:03:52 -0400
Subject: [PATCH 02/18] Add Tabbing

---
 Website Code on SD Card/index.html | 37 ++++++++++++++++++++++++++----
 Website Code on SD Card/style.css  | 31 +++++++++++++++++++++++++
 2 files changed, 63 insertions(+), 5 deletions(-)
 create mode 100644 Website Code on SD Card/style.css

diff --git a/Website Code on SD Card/index.html b/Website Code on SD Card/index.html
index 7bef873..d454eb0 100644
--- a/Website Code on SD Card/index.html	
+++ b/Website Code on SD Card/index.html	
@@ -2,6 +2,7 @@
 <html>
 <head>
     <script src="plotly.js"></script>
+    <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 
 <body onload="loadData()">
@@ -31,9 +32,12 @@ <h1>BREAD Configuration and Controls</h1>
     
     <iframe name="target" style="display:none;"></iframe>
     <hr>
+    <button class="tablink" onclick="openPage('pyrolysis', this, 'green')">Pyrolsis Reactor</button>
+    <button class="tablink" onclick="openPage('bioreactor', this, 'green')" id="defaultOpen">Bioreactor</button>
+    <button class="tablink" onclick="openPage('chemreactor', this, 'green')">Chemical Deconstruction Reactor</button>
 
-    <div id="pyrolysis">
-        <h1>Pyrolysis Reactor</h1>
+    <div id="pyrolysis" class="tabcontent">
+        <!-- <h2>Pyrolysis Reactor</h2> -->
         <!-- Gauge area -->
         <div style="display: grid; grid-template-columns: auto auto auto auto auto;">
             <div>
@@ -306,8 +310,8 @@ <h1>Pyrolysis Reactor</h1>
         <br><br><br><br>
     </div>
 
-    <div id="bioreactor">
-        <h1>Bioreactor</h1>
+    <div id="bioreactor"class="tabcontent">
+        <!-- <h1>Bioreactor</h1> -->
         <div id="bio-thermocouples" style="display: flex">
             <div id="bio-thermo-gauge1"></div>
             <div id="bio-thermo-gauge2"></div>
@@ -533,7 +537,7 @@ <h2>Post Processing</h2>
     </div>
 
     <div id="chemreactor">
-        <h1>Chemical Deconstruction Reactor</h1>
+        <!-- <h1>Chemical Deconstruction Reactor</h1> -->
         <div style="display: grid; grid-template-columns: auto auto auto auto auto auto;">
             <div>
                 <div id="chem-thermo-gauge1"></div>
@@ -1254,6 +1258,29 @@ <h1>Chemical Deconstruction Reactor</h1>
         value: 0,
     },
 }
+function openPage(pageName, elmnt, color) {
+  // Hide all elements with class="tabcontent" by default */
+  var i, tabcontent, tablinks;
+  tabcontent = document.getElementsByClassName("tabcontent");
+  for (i = 0; i < tabcontent.length; i++) {
+    tabcontent[i].style.display = "none";
+  }
+
+  // Remove the background color of all tablinks/buttons
+  tablinks = document.getElementsByClassName("tablink");
+  for (i = 0; i < tablinks.length; i++) {
+    tablinks[i].style.backgroundColor = "";
+  }
+
+  // Show the specific tab content
+  document.getElementById(pageName).style.display = "block";
+
+  // Add the specific color to the button used to open the tab content
+  elmnt.style.backgroundColor = color;
+}
+
+// Get the element with id="defaultOpen" and click on it
+document.getElementById("defaultOpen").click();
 
 //create new gauge plots
 Plotly.newPlot('pyrolysis-thermo-gauge1', thermo_gauge, gaugeLayout);
diff --git a/Website Code on SD Card/style.css b/Website Code on SD Card/style.css
new file mode 100644
index 0000000..9c59bd1
--- /dev/null
+++ b/Website Code on SD Card/style.css	
@@ -0,0 +1,31 @@
+/* Set height of body and the document to 100% to enable "full page tabs" */
+body, html {
+    height: 100%;
+    margin: 0;
+    font-family: Arial;
+  }
+  
+  /* Style tab links */
+  .tablink {
+    background-color: #555;
+    color: white;
+    /* float: left; */
+    border: none;
+    outline: none;
+    cursor: pointer;
+    padding: 14px 16px;
+    font-size: 17px;
+    width: 25%;
+  }
+  
+  .tablink:hover {
+    background-color: #777;
+  }
+  
+  /* Style the tab content (and add height:100% for full page content) */
+  .tabcontent {
+    color: white;
+    display: none;
+    padding: 100px 20px;
+    height: 100%;
+  }
\ No newline at end of file

From 4ae01ca88e1a592263f7515b2d85cf8a8b581d29 Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Sat, 22 Mar 2025 15:04:16 -0400
Subject: [PATCH 03/18] Remove data from repo.|

This should be put in a different repo from code.
---
 Website Code on SD Card/bioreactor-data.csv  | 3 ---
 Website Code on SD Card/chemreactor-data.csv | 3 ---
 Website Code on SD Card/pyrolysis-data.csv   | 3 ---
 3 files changed, 9 deletions(-)
 delete mode 100644 Website Code on SD Card/bioreactor-data.csv
 delete mode 100644 Website Code on SD Card/chemreactor-data.csv
 delete mode 100644 Website Code on SD Card/pyrolysis-data.csv

diff --git a/Website Code on SD Card/bioreactor-data.csv b/Website Code on SD Card/bioreactor-data.csv
deleted file mode 100644
index de68593..0000000
--- a/Website Code on SD Card/bioreactor-data.csv	
+++ /dev/null
@@ -1,3 +0,0 @@
-Date and Time,Thermocouple 1,pH Sensor 1,Dissolved Oxygen 1,Turbidity 1,Thermocouple 2, pH Sensor 2, Dissolved Oxygen 2,Turbidity 2,Pasteurization,Dryer
-2024-07-11 17:35:48,0.00,10.63,27.59,0.00,0.00,0.00,0.00,0.00,0.00,0.00
-2024-07-11 17:36:16,0.00,10.57,27.59,0.00,0.00,0.00,0.00,0.00,0.00,0.00
\ No newline at end of file
diff --git a/Website Code on SD Card/chemreactor-data.csv b/Website Code on SD Card/chemreactor-data.csv
deleted file mode 100644
index 45451bc..0000000
--- a/Website Code on SD Card/chemreactor-data.csv	
+++ /dev/null
@@ -1,3 +0,0 @@
-Date and Time,Reactor 1,Reactor 2
-2024-07-11 17:35:48,0.00,0.00
-2024-07-11 17:36:16,0.00,0.00
\ No newline at end of file
diff --git a/Website Code on SD Card/pyrolysis-data.csv b/Website Code on SD Card/pyrolysis-data.csv
deleted file mode 100644
index 20f59df..0000000
--- a/Website Code on SD Card/pyrolysis-data.csv	
+++ /dev/null
@@ -1,3 +0,0 @@
-Date and Time,Dissolution Tank,Dissolution Heating Tape,Valve,Char Chamber,Secondary Reactor,Knockout Drum,Condenser 0,Condenser 1,Condenser 2
-2024-07-11 17:35:48,0.00,25.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00
-2024-07-11 17:36:16,0.00,25.25,0.00,0.00,0.00,0.00,0.00,0.00,0.00
\ No newline at end of file

From 005cfdbec02c93216968b6de94310dac211362ee Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Sat, 22 Mar 2025 15:16:30 -0400
Subject: [PATCH 04/18] Revert "Delete Arduino
 Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino"

This reverts commit f126fe72e971d42ec9f44b44a155f5386ecf34a6.
---
 .../BREAD-DARPA-Controls.ino                  | 891 ++++++++++++++++++
 1 file changed, 891 insertions(+)
 create mode 100644 Arduino Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino

diff --git a/Arduino Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino b/Arduino Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino
new file mode 100644
index 0000000..5f94204
--- /dev/null
+++ b/Arduino Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino	
@@ -0,0 +1,891 @@
+/* Function layouts
+Get thermocouple data:        void RLHTRequestThermo(int address, float* t1, float* t2)
+Set heating setpoint:         void RLHTCommandSetpoint(int address, byte heater, float heatSetpoint, byte thermocouple, bool enableReverse)
+Set heating PID tunings:      void RLHTCommandPID(int address, byte heater, float Kp_set, float Ki_set, float Kd_set)
+Set motor speeds:             void DCMTCommandSpeed(int address, byte motor, int speed_set, bool enable)
+Set as pump with pH setpoint: void DCMTCommandPH(int address, float pHSetpoint_set, float currentPH_set)
+Set as pH PID tunings:        void DCMTCommandPHPID(int address, float Kp_set, float Ki_set, float Kd_set)
+Set as turbidity pump:        void DCMTCommandTurbidity(int address, byte motor, byte direction, bool enable, int sample_period)
+Send commands to pH & DO:     void PHDOCommand(int address, char *commandData)
+Get pH or DO readings:        float PHDORequest(int address)
+*/
+
+#include <WiFi.h>
+#include <AsyncTCP.h>
+#include <ESPAsyncWebServer.h>
+#include <ArduinoJson.h>
+
+#include "SD.h"
+#include "FS.h"
+#include "SPI.h"
+#include <Wire.h>
+
+#include <ESP32Time.h>
+ESP32Time rtc;
+
+#define SLICE_DATA_INTERVAL_MS 10000
+
+#define NUM_DCMT_SLICES   8
+#define NUM_RLHT_SLICES   8
+#define NUM_PHDO_SLICES   2
+
+// microSD Card Reader connections
+#define SD_CS          5
+#define SPI_MOSI      23 
+#define SPI_MISO      19
+#define SPI_SCK       18
+
+#define ESTOP   32
+
+const char* ssid     = "BREAD-DARPA";
+const char* password = "12345678";
+
+// Useful unions for breaking data into bytes
+union FLOATUNION_t //Define a float that can be broken up and sent via I2C
+{
+  float number;
+  uint8_t bytes[4];
+};
+union INTUNION_t //Define an int that can be broken up and sent via I2C
+{
+  int number;
+  uint8_t bytes[4];
+};
+
+// Slice structures for managing data
+struct DCMT_t {
+  int address;    // I2C address of Slice
+  int m1Speed;   // motor 1 speed (-100-100)
+  int m2Speed;   // motor 2 speed (-100-100)
+  bool m1En;   // motor 1 enable (0:off/apply brake, 1:on/coast)
+  bool m2En;   // motor 2 enable (0:off/apply brake, 1:on/coast)
+  float pHSetpoint;
+  float currentPH;
+  float Kp_pH;
+  float Ki_pH;
+  float Kd_pH;
+};
+
+struct RLHT_t {
+  int address;    // I2C address of Slice
+  float heatSetpoint_1;   // set desired temperature for heater 1 (if using relay as heater actuator)
+  float Kp_1;             // PID proportional gain for heater 1
+  float Ki_1;             // PID integral gain for heater 1
+  float Kd_1;             // PID derivative gain for heater 1 
+  float heatSetpoint_2;
+  float Kp_2;
+  float Ki_2;
+  float Kd_2;
+  float thermo1;  // thermocouple 1 measurement
+  float thermo2;  // thermocouple 2 measurement
+};
+
+struct PHDO_t {
+  int addressPH; // I2C address of Atlas Scientific pH EZO board (default = 99)
+  int addressDO; // I2C address of Atlas Scientific dissolved oxygen EZO board (default = 97)
+  float pH;       // current pH reading
+  float DO;       // current dissolved oxygen reading
+  bool calPH = false;
+  bool calDO = false;
+};
+
+DCMT_t DCMT[NUM_DCMT_SLICES];
+RLHT_t RLHT[NUM_RLHT_SLICES];
+PHDO_t PHDO[NUM_PHDO_SLICES];
+
+int pyro_thermo[9][2] = {   // pyrolyis thermocouple layout {address, thermocouple}
+  {16, 2}, // DT
+  {17, 1}, // DHT
+  {16, 1}, // V
+  {15, 2}, // CC
+  {15, 1}, // SR
+  {14, 1}, // KD
+  {10, 1}, // C0
+  {11, 1}, // C1
+  {12, 1}  // C2
+};
+float pyro_thermo_val[9] = {0,0,0,0,0,0,0,0,0};   // stores thermocouple values
+
+int pyro_heater[10][4] = {   // pyrolysis heater/fan layout {address, heater, thermocouple, reverseEnable}
+  {16, 2, 2, 0}, // DT
+  {16, 1, 1, 0}, // V
+  {15, 2, 2, 0}, // CC
+  {15, 1, 1, 0}, // SR
+  {14, 1, 1, 0}, // KD
+  {10, 1, 1, 0}, // C0H
+  {10, 2, 1, 1}, // C0F
+  {11, 1, 1, 0}, // C1H
+  {11, 2, 1, 1}, // C1F
+  {12, 1, 1, 1}  // C2F
+};
+float pyro_heater_pid[10][4];  // pyrolysis heater/fan PID {setpoint, Kp, Ki, Kd}
+
+int bio_thermo[2][2] = {    // bioreator thermocouples {address, thermocouple}
+  {10, 2},
+  {11, 2}
+};
+int bio_post_heaters[2][4] = {    // bioreactor post processing heaters {address, heater, thermocouple, reverseEnable}
+  {12, 2, 2, 0},    // pasteurization
+  {14, 2, 2, 0}     // dryer
+};
+float bio_post_heater_pid[2][4];  // {setpoint, Kp, Ki, Kd}
+float bio_thermo_val[4] = {0,0,0,0};
+
+int bio_ph[2][2] = {      // bioreactor pH layout {PHDO address, DCMT address}
+  {98, 20},
+  {100, 21}
+};
+float bio_ph_val[2][5];   // bioreactor pH settings (pH, Setpoint, Kp, Ki, Kd)
+
+int bio_do[2] = {97, 99}; // bioreactor DO addresses
+float bio_do_val[2] = {0,0};      // bioreactor DO values
+
+int bio_turbidity[2][4] = {   // bioreactor turbidity pump {address, motor, direction, sampleTime}
+  {22, 1, 1, 0},
+  {22, 2, 1, 0}
+};
+float bio_turbidity_val[2] = {0,0};   // bioreactor turbidity value
+
+int bio_motors[10][3] = {     // bioreactor motor config {address, motor, speed}
+  {23, 1, 0},   // stirring 1
+  {20, 1, 0},   // base 1
+  {20, 2, 0},   // acid 1
+  {24, 1, 0},   // water
+  {24, 2, 0},   // spent media
+  {23, 2, 0},   // stirring 2
+  {21, 1, 0},   // base 2
+  {21, 2, 0},   // acid 2
+  {25, 1, 0},   // harvest
+  {25, 2, 0}    // TFF
+};
+
+int chem_thermo[2][4] = {   // {address, heater, thermocouple, reverseEnable}
+  {13, 1, 1, 0},    // reactor 1
+  {13, 2, 2, 0}     // reactor 2
+};
+float chem_thermo_val[2] = {0,0};
+float chem_heater_pid[2][4];
+
+int chem_motors[4][3] = {
+  {26, 1, 0},   // ammonium hydroxide
+  {26, 2, 0},   // liquid transfer
+  {27, 1, 0},   // water dilute
+  {27, 2, 0}    // reactor wash
+};
+
+AsyncWebServer server(80);
+
+AsyncEventSource events("/events");
+
+bool logging = false; //logging data to SD card and graphs
+
+void initSlices(){
+  // DCMT Slice address assignment
+  for(int i=0;i<NUM_DCMT_SLICES;i++){
+    DCMT[i].address = 20+i;   // addresses 20-26
+  }
+  // RLHT Slice address assignment
+  for(int i=0;i<NUM_RLHT_SLICES;i++){
+    RLHT[i].address = 10+i;   // addresses 10-15
+  }
+  // addresses of Atlas Scientific Sensors
+  PHDO[0].addressDO = 97;
+  PHDO[0].addressPH = 98;
+  PHDO[1].addressDO = 99;
+  PHDO[1].addressPH = 100;
+}
+
+void initSDCard(){
+  pinMode(SD_CS, OUTPUT);      
+  digitalWrite(SD_CS, HIGH); 
+    
+  // Initialize SPI bus for microSD Card
+  SPI.begin(SPI_SCK, SPI_MISO, SPI_MOSI);
+  
+  if(!SD.begin(SD_CS)){
+    Serial.println("Card Mount Failed");
+    return;
+  }
+  uint8_t cardType = SD.cardType();
+
+  if(cardType == CARD_NONE){
+    Serial.println("No SD card attached");
+    return;
+  }
+
+  Serial.print("SD Card Type: ");
+  if(cardType == CARD_MMC){
+    Serial.println("MMC");
+  } else if(cardType == CARD_SD){
+    Serial.println("SDSC");
+  } else if(cardType == CARD_SDHC){
+    Serial.println("SDHC");
+  } else {
+    Serial.println("UNKNOWN");
+  }
+  uint64_t cardSize = SD.cardSize() / (1024 * 1024);
+  Serial.printf("SD Card Size: %lluMB\n", cardSize);
+}
+
+void removeFile(fs::FS &fs, const char * path){
+  Serial.printf("Removing file: %s\n", path);
+
+  bool file = fs.remove(path);
+  if(!file){
+    Serial.println("Failed to remove file");
+    return;
+  } else {
+    Serial.println("Removed file");
+  }
+}
+
+void appendFile(fs::FS &fs, const char * path, String message){
+  Serial.printf("Appending to file: %s\n", path);
+
+  File file = fs.open(path, FILE_APPEND);
+  if(!file){
+    Serial.println("Failed to open file for appending");
+    return;
+  }
+  if(file.print(message)){
+      Serial.println("Message appended");
+  } else {
+    Serial.println("Append failed");
+  }
+  file.close();
+}
+
+void writeFile(fs::FS &fs, const char * path, const char * message){
+  Serial.printf("Writing file: %s\n", path);
+
+  File file = fs.open(path, FILE_WRITE);
+  if(!file){
+    Serial.println("Failed to open file for writing");
+    return;
+  }
+  if(file.print(message)){
+    Serial.println("File written");
+  } else {
+    Serial.println("Write failed");
+  }
+  file.close();
+}
+
+uint32_t lastPOST;
+
+void setup() {
+  Serial.begin(115200);
+
+  Wire.begin();
+  
+  initSDCard();
+
+  initSlices();
+
+  pinMode(ESTOP, OUTPUT);
+
+  //start access point wifi
+  WiFi.softAP(ssid, password);
+  IPAddress myIP = WiFi.softAPIP();
+  Serial.print("AP IP address: ");
+  Serial.println(myIP);
+  Serial.println("Server started");
+
+  //send html data to server
+  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
+    request->send(SD, "/index.html", "text/html");
+  });
+
+  //load data from slice form
+
+/*
+Pyrolysis Commands:
+  ps1:  pyrolysis setpoint 1
+  pp1:  pyrolysis Kp 1
+  pi1:  pyrolysis Ki 1
+  pd1:  pyrolysis Kd 1
+
+Bioreactor Commands:
+  bs1:  bioreactor setpoint 1
+  bp1:  bioreactor Kp 1
+  bi1:  bioreactor Ki 1
+  bd1:  bioreactor Kd 1
+  bm1:  bioreactor motor 1
+  bt1:  bioreactor turbidity sample time 1
+
+Chem Decon Commands:
+  cm1:  chemreactor motor 1 (pump)
+  cs1:  chemreactor setpoint 1
+  cp1:  chemreactor Kp 1
+  ci1:  chemreactor Ki 1
+  cd1:  chemreactor Kd 1
+*/
+
+  server.on("/form-submit", HTTP_POST, [](AsyncWebServerRequest * request) {
+    int params = request->params();
+    for (int i = 0; i < params; i++) {
+      AsyncWebParameter* p = request->getParam(i);
+      Serial.printf("POST[%s]: %s\n", p->name().c_str(), p->value().c_str());
+      String postName = p->name().c_str();
+      String postValue = p->value().c_str();
+      uint8_t index = postName.substring(2).toInt() - 1;
+
+      if(postName.charAt(0) == 'p') {   // pyrolysis reactor
+        switch(postName.charAt(1)) {
+          case 's': //setpoint
+            pyro_heater_pid[index][0] = postValue.toFloat();
+            RLHTCommandSetpoint(pyro_heater[index][0], pyro_heater[index][1], pyro_heater_pid[index][0], pyro_heater[index][2], pyro_heater[index][3]);
+            break;
+          case 'p': //Kp
+            pyro_heater_pid[index][1] = postValue.toFloat();
+            break;
+          case 'i': //Ki
+            pyro_heater_pid[index][2] = postValue.toFloat();
+            break;
+          case 'd': //Kd
+            pyro_heater_pid[index][3] = postValue.toFloat();
+            RLHTCommandPID(pyro_heater[index][0], pyro_heater[index][1], pyro_heater_pid[index][1], pyro_heater_pid[index][2], pyro_heater_pid[index][3]);
+            break;
+        }
+        //float converted into 4 bytes
+      }else if(postName.charAt(0) == 'b') {
+        uint8_t index = postName.substring(2).toInt() - 1;
+        switch(postName.charAt(1)) {
+          case 's': //setpoint
+            bio_ph_val[index][1] = postValue.toFloat();
+            DCMTCommandPH(bio_ph[index][1], bio_ph_val[index][1], bio_ph_val[index][0]);
+            break;
+          case 'p': //Kp
+            bio_ph_val[index][2] = postValue.toFloat();
+            //send command to BREAD here:
+            break;
+          case 'i': //Ki
+            bio_ph_val[index][3] = postValue.toFloat();
+            //send command to BREAD here:
+            break;
+          case 'd': //Kd
+            bio_ph_val[index][2] = postValue.toFloat();
+            Serial.println("Sending pH PID");
+            DCMTCommandPHPID(bio_ph[index][1], bio_ph_val[index][2], bio_ph_val[index][3], bio_ph_val[index][4]);
+            break;
+          case 'm':
+            bio_motors[index][2] = postValue.toInt();
+            DCMTCommandSpeed(bio_motors[index][0], bio_motors[index][1], bio_motors[index][2], 1);
+            break;
+          case 't':
+            bio_turbidity[index][3] = postValue.toInt();  // sample time
+            DCMTCommandTurbidity(bio_turbidity[index][0], bio_turbidity[index][1], bio_turbidity[index][2], 1, bio_turbidity[index][3]);
+            break;
+        }
+      } else if(postName.charAt(0) == 'c') {
+        switch(postName.charAt(1)) {
+          case 's': //setpoint
+            chem_heater_pid[index][0] = postValue.toFloat();
+            RLHTCommandSetpoint(chem_thermo[index][0], chem_thermo[index][1], chem_heater_pid[index][0], chem_thermo[index][2], chem_thermo[index][3]);
+            //send command to BREAD here:
+            break;
+          case 'p': //Kp
+            chem_heater_pid[index][1] = postValue.toFloat();
+            //send command to BREAD here:
+            break;
+          case 'i': //Ki
+            chem_heater_pid[index][2] = postValue.toFloat();
+            //send command to BREAD here:
+            break;
+          case 'd': //Kd
+            chem_heater_pid[index][3] = postValue.toFloat();
+            RLHTCommandPID(chem_thermo[index][0], chem_thermo[index][1], chem_heater_pid[index][1], chem_heater_pid[index][2], chem_heater_pid[index][3]);
+            break;
+          case 'm':
+            chem_motors[index][2] = postValue.toInt();
+            DCMTCommandSpeed(chem_motors[index][0], chem_motors[index][1], chem_motors[index][2], 1);
+            break;
+        }
+      }else if(postName.charAt(0) == 'P') {   // bioreactor post processing
+        uint8_t index = postName.substring(2).toInt() - 1;
+        switch(postName.charAt(1)) {
+          case 's': //setpoint
+            bio_post_heater_pid[index][0] = postValue.toFloat();
+            RLHTCommandSetpoint(bio_post_heaters[index][0], bio_post_heaters[index][1], bio_post_heater_pid[index][0], bio_post_heaters[index][2], bio_post_heaters[index][3]);
+            break;
+          case 'p': //Kp
+            bio_post_heater_pid[index][1] = postValue.toFloat();
+            //send command to BREAD here:
+            break;
+          case 'i': //Ki
+            bio_post_heater_pid[index][2] = postValue.toFloat();
+            //send command to BREAD here:
+            break;
+          case 'd': //Kd
+            bio_post_heater_pid[index][3] = postValue.toFloat();
+            Serial.println("Sending pH PID");
+            RLHTCommandPID(bio_post_heaters[index][0], bio_post_heaters[index][1], bio_post_heater_pid[index][1], bio_post_heater_pid[index][2], bio_post_heater_pid[index][3]);
+            break;
+        }
+      }
+    }
+  });
+
+  //load any non-form POST request body and url
+  server.onRequestBody([](AsyncWebServerRequest *request, uint8_t *data, size_t len, size_t index, size_t total){
+    Serial.println(request->url());
+    if (request->url() == "/all-data") {
+      String s = "";
+      for(size_t i=0; i<len; i++) {
+        s += char(data[i]);
+      }
+      Serial.println(s);
+    }if(request->url() == "/get-variables") {
+      //set time on esp32 rtc
+      String s = "";
+      for(size_t i=0; i<len; i++) {
+        s += char(data[i]);
+      }
+      
+      uint16_t timeDate[6];
+      for(uint8_t x = 0; x < 5; x++) {
+        uint8_t nextComma = s.indexOf(',');
+        timeDate[x] = s.substring(0, nextComma).toInt();
+        s = s.substring(nextComma+1);
+      }
+      timeDate[5] = s.toInt();
+      rtc.setTime(timeDate[0], timeDate[1], timeDate[2], timeDate[3], timeDate[4], timeDate[5]);
+
+      //how variables are sent to the server (I should probably use a more structured format like JSON)
+      String toServer = "";
+      if(logging) {
+        toServer += "logging-";
+      } else {
+        toServer += "not logging-";
+      }
+           
+      for(uint8_t x = 0; x < 10; x++) {
+        toServer += (
+          String(pyro_heater_pid[x][0]) + "|" +   // setpoint
+          String(pyro_heater_pid[x][1]) + "|" +          // Kp
+          String(pyro_heater_pid[x][2]) + "|" +          // Ki
+          String(pyro_heater_pid[x][3]) + ","            // Kd
+        );
+      }
+      toServer.remove(toServer.length()-1);
+      toServer += '-';
+
+      for(uint8_t x = 0; x < 2; x++) {
+        toServer += (
+          String(bio_ph_val[x][1]) + "|" +    // setpoint
+          String(bio_ph_val[x][2]) + "|" +    // Kp
+          String(bio_ph_val[x][3]) + "|" +    // Ki
+          String(bio_ph_val[x][4]) + ","      // Kd
+        );
+      }
+      toServer.remove(toServer.length()-1);
+      toServer += '-';
+      toServer += String(bio_turbidity[0][3]) + "," + String(bio_turbidity[1][3]);
+      toServer += '-';
+
+      for(uint8_t x = 0; x < 2; x++) {
+        toServer += (
+          String(bio_post_heater_pid[x][0]) + "|" +    // setpoint
+          String(bio_post_heater_pid[x][1]) + "|" +    // Kp
+          String(bio_post_heater_pid[x][2]) + "|" +    // Ki
+          String(bio_post_heater_pid[x][3]) + ","      // Kd
+        );
+      }
+      toServer.remove(toServer.length()-1);
+      toServer += '-';
+      
+      for(uint8_t x = 0; x < 10; x++) {
+        toServer += String(bio_motors[x][2]) + ",";   // motor speed
+      }
+      toServer.remove(toServer.length()-1);
+      toServer += '-';
+
+      for(uint8_t x = 0; x < 4; x++) {
+        toServer += String(chem_motors[x][2]) + ",";  // motor speed
+      }
+      toServer.remove(toServer.length()-1);
+      toServer += '-';
+
+      for(uint8_t x = 0; x < 2; x++) {
+        toServer += (
+          String(chem_heater_pid[x][0]) + "|" +    // setpoint
+          String(chem_heater_pid[x][1]) + "|" +    // Kp
+          String(chem_heater_pid[x][2]) + "|" +    // Ki
+          String(chem_heater_pid[x][3]) + ","      // Kd
+        );
+      }
+      toServer.remove(toServer.length()-1);
+      
+      request->send(200, "text/plain", toServer);
+    } if(request->url() == "/logging") {
+      Serial.println("log to SD card");
+      logging = true;
+    } if(request->url() == "/not-logging") {
+      Serial.println("stop log to SD card");
+      logging = false;
+    } if(request->url() == "/estop-on") {
+      Serial.println("estop on");
+      digitalWrite(ESTOP, HIGH);
+    } if(request->url() == "/estop-off") {
+      Serial.println("estop off");
+      digitalWrite(ESTOP, LOW);
+    } else if(request->url() == "/delete-pyrolysis") {
+      writeFile(SD, "/pyrolysis-data.csv", "Date and Time,Dissolution Tank,Dissolution Heating Tape,Valve,Char Chamber,Secondary Reactor,Knockout Drum,Condenser 0,Condenser 1,Condenser 2");
+    } else if(request->url() == "/delete-bioreactor") {
+      writeFile(SD, "/bioreactor-data.csv", "Date and Time,Thermocouple 1,pH Sensor 1,Dissolved Oxygen 1,Turbidity 1,Thermocouple 2, pH Sensor 2, Dissolved Oxygen 2,Turbidity 2,Pasteurization,Dryer");
+    } else if(request->url() == "/delete-chemreactor") {
+      writeFile(SD, "/chemreactor-data.csv", "Date and Time,Reactor 1,Reactor 2");
+    }
+  });
+
+  // Handle Web Server Events
+  events.onConnect([](AsyncEventSourceClient *client){
+    if(client->lastId()){
+      Serial.printf("Client reconnected! Last message ID that it got is: %u\n", client->lastId());
+    }
+    // send event with message "hello!", id current millis
+    // and set reconnect delay to 1 second
+    client->send("hello!", NULL, millis(), 10000);
+  });
+  server.addHandler(&events);
+
+  server.serveStatic("/", SD, "/");
+  server.begin();
+
+  lastPOST = millis();
+}
+
+uint32_t calTime = 0;
+int calDelay = 900;
+bool readRequestedPHDO = false;
+
+uint8_t loggingCounter = 6;
+void loop() {
+  //get slice data from slices
+  if(millis() - lastPOST > SLICE_DATA_INTERVAL_MS) {
+    Serial.println("getting data");
+    //get time
+    String timeToServer = rtc.getTime("%F %T");
+    String pyrolysisToServer = timeToServer;
+    String bioToServer = timeToServer;
+    String chemToServer = timeToServer;
+    
+    //Heating data
+    for(int i=0;i<9;i++){
+      float temp;
+      if(pyro_thermo[i][1] == 1)
+        RLHTRequestThermo(pyro_thermo[i][0], &(pyro_thermo_val[i]), &(temp));
+      if(pyro_thermo[i][1] == 2)
+        RLHTRequestThermo(pyro_thermo[i][0], &(temp), &(pyro_thermo_val[i]));
+    }
+
+    //Bioreactor data
+
+    for(uint8_t n = 0; n < 2; n++) {
+      if(readRequestedPHDO) bio_ph_val[n][0] = PHDORequest(bio_ph[n][0]);
+      if(readRequestedPHDO) bio_do_val[n] = PHDORequest(bio_do[n]);
+      DCMTRequestTurbidity(bio_turbidity[n][0], &(bio_turbidity_val[0]), &(bio_turbidity_val[1]));
+
+      // update pH pump controller with new pH values if setpoint is nonzero
+      if(bio_ph_val[n][1] != 0)
+        DCMTCommandPH(10 + n, bio_ph_val[n][1], bio_ph_val[n][0]);
+
+      float temp;
+      if(bio_thermo[n][1] == 1)
+        RLHTRequestThermo(bio_thermo[n][0], &(bio_thermo_val[n]), &(temp));
+      if(bio_thermo[n][1] == 2)
+        RLHTRequestThermo(bio_thermo[n][0], &(temp), &(bio_thermo_val[n]));
+    }
+    for(int i=0;i<2;i++){
+      float temp;
+      if(bio_post_heaters[i][2] == 1)
+        RLHTRequestThermo(bio_post_heaters[i][0], &(bio_thermo_val[i+2]), &(temp));
+      if(bio_post_heaters[i][2] == 2)
+        RLHTRequestThermo(bio_post_heaters[i][0], &(temp), &(bio_thermo_val[i+2]));
+    }
+    readRequestedPHDO = false;  // reload new read request
+    
+    //Chemreactor data
+    for(uint8_t n = 0; n < 2; n++) {
+      float temp;
+      if(chem_thermo[n][2] == 1)
+        RLHTRequestThermo(chem_thermo[n][0], &(chem_thermo_val[n]), &(temp));
+      if(chem_thermo[n][2] == 2)
+        RLHTRequestThermo(chem_thermo[n][0], &(temp), &(chem_thermo_val[n]));
+    }
+
+    //convert to data to string to save to SD card and send to server
+    for(uint8_t n = 0; n < 9; n++) {
+      pyrolysisToServer += "," + String(pyro_thermo_val[n]);
+    }
+    for(uint8_t n = 0; n < 2; n++) {
+      bioToServer += "," + String(bio_thermo_val[n]) + "," + String(bio_ph_val[n][0]) + "," + String(bio_do_val[n]) + "," + String(bio_turbidity_val[n]);
+    }
+    bioToServer += "," + String(bio_thermo_val[2]) + "," + String(bio_thermo_val[3]);
+    for(uint8_t n = 0; n < 2; n++) {
+      chemToServer += "," + String(chem_thermo_val[n]);
+    }
+
+    //send data to website
+/*
+Readings to Webpage Format
+Pyrolysis Reactor:
+  Format:  Date and Time,Dissolution Tank,Dissolution Heating Tape,Valve,Char Chamber,Secondary Reactor,Knockout Drum,Condenser 0,Condenser 1,Condenser 2
+  Index:        0       ,       1        ,            2           ,   3 ,     4      ,        5        ,      6      ,     7     ,     8     ,     9    
+Bioreactor:
+  Format:  Date and Time,Thermo1,pH1,DO1,Turb1,Thermo2,pH2,DO2,Turb2,Past,Dry
+  Index:       0        ,   1   , 2 , 3 ,  4  ,   5   , 6 , 7 ,  8  ,  9 , 10
+Chemreactor:
+  Format:  Date and Time,Reactor 1,Reactor 2
+  Index:         0      ,    1    ,    2
+*/
+    events.send(pyrolysisToServer.c_str(), "pyrolysis-readings", millis());
+    events.send(bioToServer.c_str(), "bioreactor-readings", millis());
+    events.send(chemToServer.c_str(), "chemreactor-readings", millis());
+    
+    //log onto the SD card
+    if(logging){
+      appendFile(SD, "/pyrolysis-data.csv", "\r\n" + pyrolysisToServer);
+      appendFile(SD, "/bioreactor-data.csv", "\r\n" + bioToServer);
+      appendFile(SD, "/chemreactor-data.csv", "\r\n" + chemToServer);
+    }
+    lastPOST = millis();
+  }else if(!readRequestedPHDO){
+    for(uint8_t n = 0; n < 2; n++){
+      PHDOCommand(bio_do[n], "r");  // request reading from DO sensors
+      PHDOCommand(bio_ph[n][0], "r");  // request reading from pH sensors
+    }
+    readRequestedPHDO = true;
+  }
+}
+
+void RLHTRequestThermo(int address, float* t1, float* t2)
+{
+  bool data_received = false;
+  byte in_char;
+  char in_data[20];
+  FLOATUNION_t thermo1;
+  FLOATUNION_t thermo2;
+
+  thermo1.number = 0;
+  thermo2.number = 0;
+  
+  Wire.requestFrom(address, 8, 1);
+  int i=0;
+  while (Wire.available()) {                 //are there bytes to receive.
+    data_received = true;
+    in_char = Wire.read();                   //receive a byte.
+    in_data[i] = in_char;                    //load this byte into our array.
+    i++;                                  //incur the counter for the array element.
+  }
+
+  if(data_received){
+    for(int x=0;x<4;x++)
+    {
+      thermo1.bytes[x] = in_data[x];
+      thermo2.bytes[x] = in_data[x+4];
+    }
+  }
+
+  *t1 = thermo1.number;
+  *t2 = thermo2.number;
+}
+
+void RLHTCommandSetpoint(int address, byte heater, float heatSetpoint, byte thermocouple, bool enableReverse)
+{
+  FLOATUNION_t setpoint;
+  setpoint.number = heatSetpoint;
+
+  Wire.beginTransmission(address);
+  Wire.write('H');
+  Wire.write(heater);
+  for(int i=0; i<4; i++){
+    Wire.write(setpoint.bytes[i]);              // sends one byte
+  }
+  Wire.write(thermocouple);
+  Wire.write(enableReverse);
+  Wire.endTransmission();    // stop transmitting
+
+  Serial.print(address);
+  Serial.print('H');
+  Serial.print(heater);
+  Serial.print(setpoint.number);
+  Serial.print(thermocouple);
+  Serial.println(enableReverse);
+}
+
+void RLHTCommandPID(int address, byte heater, float Kp_set, float Ki_set, float Kd_set)
+{
+  FLOATUNION_t Kp;
+  FLOATUNION_t Ki;
+  FLOATUNION_t Kd;
+
+  Kp.number = Kp_set;
+  Ki.number = Ki_set;
+  Kd.number = Kd_set;
+
+  Wire.beginTransmission(address);
+  Wire.write('P');
+  Wire.write(heater);
+  for(int i=0; i<4; i++){
+    Wire.write(Kp.bytes[i]);              // sends one byte
+  }
+  for(int i=0; i<4; i++){
+    Wire.write(Ki.bytes[i]);              // sends one byte
+  }
+  for(int i=0; i<4; i++){
+    Wire.write(Kd.bytes[i]);              // sends one byte
+  }
+  Wire.endTransmission();    // stop transmitting
+
+  Serial.print(address);
+  Serial.print('P');
+  Serial.print(heater);
+  Serial.print(Kp.number);
+  Serial.print(Ki.number);
+  Serial.println(Kd.number);
+}
+
+void DCMTRequestTurbidity(int address, float* turbidity1, float* turbidity2)
+{
+  bool data_received = false;
+  byte in_char;
+  char in_data[20];
+  FLOATUNION_t turb1, turb2;
+
+  turb1.number = 0;
+  turb2.number = 0;
+  
+  Wire.requestFrom(address, 10, 1);
+  int i=0;
+  while (Wire.available()) {                 //are there bytes to receive.
+    data_received = true;
+    in_char = Wire.read();                   //receive a byte.
+    in_data[i] = in_char;                    //load this byte into our array.
+    i++;                                  //incur the counter for the array element.
+  }
+
+  if(data_received){
+    for(int x=0;x<4;x++){
+      turb1.bytes[x] = in_data[x];
+      turb2.bytes[x] = in_data[x+4];
+    }
+  }
+
+  *turbidity1 = turb1.number;
+  *turbidity2 = turb2.number;
+}
+
+void DCMTCommandTurbidity(int address, byte motor, byte direction, bool enable, int sample_period)
+{
+  INTUNION_t sample_p;
+  sample_p.number = sample_period;
+
+  Wire.beginTransmission(address);
+  Wire.write('T');
+  Wire.write(motor);
+  Wire.write(direction);
+  Wire.write(enable);
+  for(int i=0;i<4;i++) Wire.write(sample_p.bytes[i]);
+  Wire.endTransmission();
+}
+
+void DCMTCommandSpeed(int address, byte motor, int speed_set, bool enable)
+{
+  INTUNION_t speed;
+  speed.number = speed_set;
+
+  Wire.beginTransmission(address);
+  Wire.write('M');
+  Wire.write(motor);
+  for(int i=0; i<4; i++){
+    Wire.write(speed.bytes[i]);              // sends one byte
+  }
+  Wire.write(enable);
+  Wire.endTransmission();    // stop transmitting
+}
+
+void DCMTCommandPH(int address, float pHSetpoint_set, float currentPH_set)
+{
+  FLOATUNION_t pHSetpoint, currentPH;
+  pHSetpoint.number = pHSetpoint_set;
+  currentPH.number = currentPH_set;
+
+  Wire.beginTransmission(address);
+  Wire.write('p');
+  for(int i=0; i<4; i++) Wire.write(currentPH.bytes[i]);
+  for(int i=0; i<4; i++) Wire.write(pHSetpoint.bytes[i]);
+  Wire.endTransmission();    // stop transmitting
+}
+
+void DCMTCommandPHPID(int address, float Kp_set, float Ki_set, float Kd_set)
+{
+  FLOATUNION_t Kp, Ki, Kd;
+  Kp.number = Kp_set;
+  Ki.number = Ki_set;
+  Kd.number = Kd_set;
+
+  Wire.beginTransmission(address);
+  Wire.write('P');
+  for(int i=0; i<4; i++) Wire.write(Kp.bytes[i]);
+  for(int i=0; i<4; i++) Wire.write(Ki.bytes[i]);
+  for(int i=0; i<4; i++) Wire.write(Kd.bytes[i]);
+  Wire.endTransmission();    // stop transmitting
+}
+
+
+void PHDOCommand(int address, char *commandData)
+{
+  Wire.beginTransmission(address);
+  Wire.write(commandData);
+  Serial.println(commandData);
+  Wire.endTransmission();    // stop transmitting
+}
+
+float PHDORequest(int address)
+{
+  byte in_char;
+  char in_data[20];
+  FLOATUNION_t data;
+
+  Wire.requestFrom(address, 20, 1);
+
+  byte code = 0;
+  code = Wire.read();                                                   //the first byte is the response code, we read this separately.
+
+  switch (code) {                           //switch case based on what the response code is.
+    case 1:                                 //decimal 1.
+      Serial.println("Success");            //means the command was successful.
+      break;                                //exits the switch case.
+
+    case 2:                                 //decimal 2.
+      Serial.println("Failed");             //means the command has failed.
+      break;                                //exits the switch case.
+
+    case 254:                               //decimal 254.
+      Serial.println("Pending");            //means the command has not yet been finished calculating.
+      break;                                //exits the switch case.
+
+    case 255:                               //decimal 255.
+      Serial.println("No Data");            //means there is no further data to send.
+      break;                                //exits the switch case.
+  }
+
+  int i=0;
+  if(code == 1){
+    while (Wire.available()) {                 //are there bytes to receive.
+      in_char = Wire.read();                   //receive a byte.
+      if(code != 1)                            // check if incoming data is valid
+        in_data[i] = 0;                        // set values to zero if not valid data
+      else
+        in_data[i] = in_char;                    //load this byte into our array.
+      i++;                                  //incur the counter for the array element.
+      if (in_char == 0) {                      //if we see that we have been sent a null command.
+        i = 0;                                 //reset the counter i to 0.
+        break;                                 //exit the while loop.
+      }
+    }
+    return atof(in_data);
+  }else
+    return 0;
+}
\ No newline at end of file

From db1a032c37c9a6bab5ce3d662f13c351fd6a1a0b Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Sat, 22 Mar 2025 15:30:08 -0400
Subject: [PATCH 05/18] Change order of library load.

This should help with the crashing of the site.
---
 Website Code on SD Card/index.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/Website Code on SD Card/index.html b/Website Code on SD Card/index.html
index d454eb0..f1bdc78 100644
--- a/Website Code on SD Card/index.html	
+++ b/Website Code on SD Card/index.html	
@@ -1,7 +1,6 @@
 <!DOCTYPE html>
 <html>
 <head>
-    <script src="plotly.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
 </head>
 
@@ -2043,4 +2042,7 @@ <h2>Post Processing</h2>
 </script>
 
 </body>
+<footer>
+    <script src="plotly.js"></script>
+</footer>
 </html>
\ No newline at end of file

From 2b7dedd7658dcda28000a8178c03241d3c4e4947 Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Sat, 22 Mar 2025 17:33:26 -0400
Subject: [PATCH 06/18] Revert "Remove data from repo.|"

This reverts commit 4ae01ca88e1a592263f7515b2d85cf8a8b581d29.
---
 Website Code on SD Card/bioreactor-data.csv  | 3 +++
 Website Code on SD Card/chemreactor-data.csv | 3 +++
 Website Code on SD Card/pyrolysis-data.csv   | 3 +++
 3 files changed, 9 insertions(+)
 create mode 100644 Website Code on SD Card/bioreactor-data.csv
 create mode 100644 Website Code on SD Card/chemreactor-data.csv
 create mode 100644 Website Code on SD Card/pyrolysis-data.csv

diff --git a/Website Code on SD Card/bioreactor-data.csv b/Website Code on SD Card/bioreactor-data.csv
new file mode 100644
index 0000000..de68593
--- /dev/null
+++ b/Website Code on SD Card/bioreactor-data.csv	
@@ -0,0 +1,3 @@
+Date and Time,Thermocouple 1,pH Sensor 1,Dissolved Oxygen 1,Turbidity 1,Thermocouple 2, pH Sensor 2, Dissolved Oxygen 2,Turbidity 2,Pasteurization,Dryer
+2024-07-11 17:35:48,0.00,10.63,27.59,0.00,0.00,0.00,0.00,0.00,0.00,0.00
+2024-07-11 17:36:16,0.00,10.57,27.59,0.00,0.00,0.00,0.00,0.00,0.00,0.00
\ No newline at end of file
diff --git a/Website Code on SD Card/chemreactor-data.csv b/Website Code on SD Card/chemreactor-data.csv
new file mode 100644
index 0000000..45451bc
--- /dev/null
+++ b/Website Code on SD Card/chemreactor-data.csv	
@@ -0,0 +1,3 @@
+Date and Time,Reactor 1,Reactor 2
+2024-07-11 17:35:48,0.00,0.00
+2024-07-11 17:36:16,0.00,0.00
\ No newline at end of file
diff --git a/Website Code on SD Card/pyrolysis-data.csv b/Website Code on SD Card/pyrolysis-data.csv
new file mode 100644
index 0000000..20f59df
--- /dev/null
+++ b/Website Code on SD Card/pyrolysis-data.csv	
@@ -0,0 +1,3 @@
+Date and Time,Dissolution Tank,Dissolution Heating Tape,Valve,Char Chamber,Secondary Reactor,Knockout Drum,Condenser 0,Condenser 1,Condenser 2
+2024-07-11 17:35:48,0.00,25.00,0.00,0.00,0.00,0.00,0.00,0.00,0.00
+2024-07-11 17:36:16,0.00,25.25,0.00,0.00,0.00,0.00,0.00,0.00,0.00
\ No newline at end of file

From 212503b7a3931ca4113fd1b917eacead7cc4370d Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Sat, 22 Mar 2025 17:36:27 -0400
Subject: [PATCH 07/18] Indent HTML to make my eyes happy

---
 Website Code on SD Card/index.html | 3830 ++++++++++++++--------------
 1 file changed, 1913 insertions(+), 1917 deletions(-)

diff --git a/Website Code on SD Card/index.html b/Website Code on SD Card/index.html
index f1bdc78..a7974b8 100644
--- a/Website Code on SD Card/index.html	
+++ b/Website Code on SD Card/index.html	
@@ -1,2048 +1,2044 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <link rel="stylesheet" type="text/css" href="style.css">
-</head>
-
-<body onload="loadData()">
-
-    <h1>BREAD Configuration and Controls</h1>
-    <div style="display: flex">
-        <button id="run" onclick="setRunning()">Start Logging Data</button>
-        <button id="estop" onclick="setESTOP()" style="color: white; background-color: red;">E-STOP OFF</button>
-        <div style="display: flex; flex-direction: column;">
-            <button id="download-pyrolysis" onclick="downloadCSVFile('pyrolysis-data.csv', 'pyrolysis-data.csv')">Download Pyrolysis Data</button>
-            <button id="delete-pyrolysis" ondblclick="clearPyrolysis()">Clear All Pyrolysis Data</button>
-        </div>
-        <div style="display: flex; flex-direction: column;">
-            <button id="download-bio" onclick="downloadCSVFile('bioreactor-data.csv', 'bioreactor-data.csv')">Download Bioreactor Data</button>
-            <button id="delete-bio" ondblclick="clearBioreactor()">Clear All Bioreactor Data</button>
-        </div>
-        <div style="display: flex; flex-direction: column;">
-            <button id="download-chem" onclick="downloadCSVFile('chemreactor-data.csv', 'chemreactor-data.csv')">Download Chemreactor Data</button>
-            <button id="delete-chem" ondblclick="clearChemreactor()">Clear All Chemreactor Data</button>
-        </div>
-        <button ondblclick="clearPyrolysis(); clearBioreactor(); clearChemreactor();">Clear All Data</button>
+    <head>
+        <link rel="stylesheet" type="text/css" href="style.css">
+        <script src="plotly.js"></script>
+    </head>
+    <body onload="loadData()">
+
+        <h1>BREAD Configuration and Controls</h1>
         <div style="display: flex">
-            <p style="margin: 0; margin-left: 50px; margin-right: 10px">Connection to ESP32: </p>
-            <div id="connection" style="height: 18px; width: 18px; background-color: red; border-radius: 50%"></div>
-        </div>
-    </div>
-    
-    <iframe name="target" style="display:none;"></iframe>
-    <hr>
-    <button class="tablink" onclick="openPage('pyrolysis', this, 'green')">Pyrolsis Reactor</button>
-    <button class="tablink" onclick="openPage('bioreactor', this, 'green')" id="defaultOpen">Bioreactor</button>
-    <button class="tablink" onclick="openPage('chemreactor', this, 'green')">Chemical Deconstruction Reactor</button>
-
-    <div id="pyrolysis" class="tabcontent">
-        <!-- <h2>Pyrolysis Reactor</h2> -->
-        <!-- Gauge area -->
-        <div style="display: grid; grid-template-columns: auto auto auto auto auto;">
-            <div>
-                <div id="pyrolysis-thermo-gauge1"></div>
-                <!-- <p>Status: ON/OFF (from slice) </p> -->
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="ps1" id="pyrolysis-thermo-gauge1-amount"><br>
-                    <button onclick="
-                        pyrolysisGaugeInfo['pyrolysis-thermo-gauge1'].setpoint = document.getElementById('pyrolysis-thermo-gauge1-amount').value;
-                        updatePyrolysisGauge('pyrolysis-thermo-gauge1');
-                    ">Push Data</button>
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="pp1" id="pyrolysis-thermo-gauge1-kp">
-                    <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="pi1" id="pyrolysis-thermo-gauge1-ki">
-                    <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="pd1" id="pyrolysis-thermo-gauge1-kd"><br>
-                    <button onclick="">Push Data</button>
-                </form>
-                <p>Thermocouple #: </p>
-                <p>Heater #: </p>
+            <button id="run" onclick="setRunning()">Start Logging Data</button>
+            <button id="estop" onclick="setESTOP()" style="color: white; background-color: red;">E-STOP OFF</button>
+            <div style="display: flex; flex-direction: column;">
+                <button id="download-pyrolysis" onclick="downloadCSVFile('pyrolysis-data.csv', 'pyrolysis-data.csv')">Download Pyrolysis Data</button>
+                <button id="delete-pyrolysis" ondblclick="clearPyrolysis()">Clear All Pyrolysis Data</button>
             </div>
-            <div>
-                <div id="pyrolysis-thermo-gauge2"></div>
-                <!-- <p>Status: ON/OFF (from slice) </p> -->
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="ps2" id="pyrolysis-thermo-gauge2-amount"><br>
-                    <button onclick="
-                        pyrolysisGaugeInfo['pyrolysis-thermo-gauge2'].setpoint = document.getElementById('pyrolysis-thermo-gauge2-amount').value;
-                        updatePyrolysisGauge('pyrolysis-thermo-gauge2');
-                    ">Push Data</button>                
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="pp2" id="pyrolysis-thermo-gauge2-kp">
-                    <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="pi2" id="pyrolysis-thermo-gauge2-ki">
-                    <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="pd2" id="pyrolysis-thermo-gauge2-kd"><br>
-                    <button onclick="">Push Data</button>
-                </form>
-                <p>Thermocouple #: </p>
-                <p>Heater #: </p>
+            <div style="display: flex; flex-direction: column;">
+                <button id="download-bio" onclick="downloadCSVFile('bioreactor-data.csv', 'bioreactor-data.csv')">Download Bioreactor Data</button>
+                <button id="delete-bio" ondblclick="clearBioreactor()">Clear All Bioreactor Data</button>
             </div>
-            <div>
-                <div id="pyrolysis-thermo-gauge3"></div>
-                <!-- <p>Status: ON/OFF (from slice) </p> -->
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="ps3" id="pyrolysis-thermo-gauge3-amount"><br>
-                    <button onclick="
-                        pyrolysisGaugeInfo['pyrolysis-thermo-gauge3'].setpoint = document.getElementById('pyrolysis-thermo-gauge3-amount').value;
-                        updatePyrolysisGauge('pyrolysis-thermo-gauge3');
-                    ">Push Data</button>    
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="pp3" id="pyrolysis-thermo-gauge3-kp">
-                    <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="pi3" id="pyrolysis-thermo-gauge3-ki">
-                    <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="pd3" id="pyrolysis-thermo-gauge3-kd"><br>
-                    <button onclick="">Push Data</button>
-                </form>
-                <p>Thermocouple #: </p>
-                <p>Heater #: </p>
+            <div style="display: flex; flex-direction: column;">
+                <button id="download-chem" onclick="downloadCSVFile('chemreactor-data.csv', 'chemreactor-data.csv')">Download Chemreactor Data</button>
+                <button id="delete-chem" ondblclick="clearChemreactor()">Clear All Chemreactor Data</button>
             </div>
-            <div>
-                <div id="pyrolysis-thermo-gauge4"></div>
-                <!-- <p>Status: ON/OFF (from slice) </p> -->
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="ps4" id="pyrolysis-thermo-gauge4-amount"><br>
-                    <button onclick="
-                        pyrolysisGaugeInfo['pyrolysis-thermo-gauge4'].setpoint = document.getElementById('pyrolysis-thermo-gauge4-amount').value;
-                        updatePyrolysisGauge('pyrolysis-thermo-gauge4');
-                    ">Push Data</button>    
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="pp4" id="pyrolysis-thermo-gauge4-kp">
-                    <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="pi4" id="pyrolysis-thermo-gauge4-ki">
-                    <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="pd4" id="pyrolysis-thermo-gauge4-kd"><br>
-                    <button onclick="">Push Data</button>
-                </form>
-                <p>Thermocouple #: </p>
-                <p>Heater #: </p>
+            <button ondblclick="clearPyrolysis(); clearBioreactor(); clearChemreactor();">Clear All Data</button>
+            <div style="display: flex">
+                <p style="margin: 0; margin-left: 50px; margin-right: 10px">Connection to ESP32: </p>
+                <div id="connection" style="height: 18px; width: 18px; background-color: red; border-radius: 50%"></div>
             </div>
-            <div>
-                <div id="pyrolysis-thermo-gauge5"></div>
-                <!-- <p>Status: ON/OFF (from slice) </p> -->
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="ps5" id="pyrolysis-thermo-gauge5-amount"><br>
-                    <button onclick="
-                        pyrolysisGaugeInfo['pyrolysis-thermo-gauge5'].setpoint = document.getElementById('pyrolysis-thermo-gauge5-amount').value;
-                        updatePyrolysisGauge('pyrolysis-thermo-gauge5');
-                    ">Push Data</button>    
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="pp5" id="pyrolysis-thermo-gauge5-kp">
+        </div>
+        
+        <iframe name="target" style="display:none;"></iframe>
+        <hr>
+        <button class="tablink" onclick="openPage('pyrolysis', this, 'green')">Pyrolsis Reactor</button>
+        <button class="tablink" onclick="openPage('bioreactor', this, 'green')" id="defaultOpen">Bioreactor</button>
+        <button class="tablink" onclick="openPage('chemreactor', this, 'green')">Chemical Deconstruction Reactor</button>
+
+        <div id="pyrolysis" class="tabcontent">
+            <!-- <h2>Pyrolysis Reactor</h2> -->
+            <!-- Gauge area -->
+            <div style="display: grid; grid-template-columns: auto auto auto auto auto;">
+                <div>
+                    <div id="pyrolysis-thermo-gauge1"></div>
+                    <!-- <p>Status: ON/OFF (from slice) </p> -->
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="ps1" id="pyrolysis-thermo-gauge1-amount"><br>
+                        <button onclick="
+                            pyrolysisGaugeInfo['pyrolysis-thermo-gauge1'].setpoint = document.getElementById('pyrolysis-thermo-gauge1-amount').value;
+                            updatePyrolysisGauge('pyrolysis-thermo-gauge1');
+                        ">Push Data</button>
+                    </form>
                     <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="pi5" id="pyrolysis-thermo-gauge5-ki">
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="pp1" id="pyrolysis-thermo-gauge1-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="pi1" id="pyrolysis-thermo-gauge1-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="pd1" id="pyrolysis-thermo-gauge1-kd"><br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                    <p>Thermocouple #: </p>
+                    <p>Heater #: </p>
+                </div>
+                <div>
+                    <div id="pyrolysis-thermo-gauge2"></div>
+                    <!-- <p>Status: ON/OFF (from slice) </p> -->
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="ps2" id="pyrolysis-thermo-gauge2-amount"><br>
+                        <button onclick="
+                            pyrolysisGaugeInfo['pyrolysis-thermo-gauge2'].setpoint = document.getElementById('pyrolysis-thermo-gauge2-amount').value;
+                            updatePyrolysisGauge('pyrolysis-thermo-gauge2');
+                        ">Push Data</button>                
+                    </form>
                     <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="pd5" id="pyrolysis-thermo-gauge5-kd"><br>
-                    <button onclick="">Push Data</button>
-                </form>
-                <p>Thermocouple #: </p>
-                <p>Heater #: </p>
-            </div>
-            <div>
-                <div id="pyrolysis-thermo-gauge6"></div>
-                <!-- <p>Status: ON/OFF (from slice) </p> -->
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="ps6" id="pyrolysis-thermo-gauge6-amount"><br>
-                    <button onclick="
-                        pyrolysisGaugeInfo['pyrolysis-thermo-gauge6'].setpoint = document.getElementById('pyrolysis-thermo-gauge6-amount').value;
-                        updatePyrolysisGauge('pyrolysis-thermo-gauge6');
-                    ">Push Data</button>   
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="pp6" id="pyrolysis-thermo-gauge6-kp">
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="pp2" id="pyrolysis-thermo-gauge2-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="pi2" id="pyrolysis-thermo-gauge2-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="pd2" id="pyrolysis-thermo-gauge2-kd"><br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                    <p>Thermocouple #: </p>
+                    <p>Heater #: </p>
+                </div>
+                <div>
+                    <div id="pyrolysis-thermo-gauge3"></div>
+                    <!-- <p>Status: ON/OFF (from slice) </p> -->
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="ps3" id="pyrolysis-thermo-gauge3-amount"><br>
+                        <button onclick="
+                            pyrolysisGaugeInfo['pyrolysis-thermo-gauge3'].setpoint = document.getElementById('pyrolysis-thermo-gauge3-amount').value;
+                            updatePyrolysisGauge('pyrolysis-thermo-gauge3');
+                        ">Push Data</button>    
+                    </form>
                     <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="pi6" id="pyrolysis-thermo-gauge6-ki">
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="pp3" id="pyrolysis-thermo-gauge3-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="pi3" id="pyrolysis-thermo-gauge3-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="pd3" id="pyrolysis-thermo-gauge3-kd"><br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                    <p>Thermocouple #: </p>
+                    <p>Heater #: </p>
+                </div>
+                <div>
+                    <div id="pyrolysis-thermo-gauge4"></div>
+                    <!-- <p>Status: ON/OFF (from slice) </p> -->
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="ps4" id="pyrolysis-thermo-gauge4-amount"><br>
+                        <button onclick="
+                            pyrolysisGaugeInfo['pyrolysis-thermo-gauge4'].setpoint = document.getElementById('pyrolysis-thermo-gauge4-amount').value;
+                            updatePyrolysisGauge('pyrolysis-thermo-gauge4');
+                        ">Push Data</button>    
+                    </form>
                     <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="pd6" id="pyrolysis-thermo-gauge6-kd"><br>
-                    <button onclick="">Push Data</button>
-                </form>
-                <p>Thermocouple #: </p>
-                <p>Heater #: </p>
-            </div>
-            <div>
-                <div id="pyrolysis-thermo-gauge7"></div>
-                <!-- <p>Status: ON/OFF (from slice) </p> -->
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="ps7" id="pyrolysis-thermo-gauge7-amount"><br>
-                    <button onclick="
-                        pyrolysisGaugeInfo['pyrolysis-thermo-gauge7'].setpoint = document.getElementById('pyrolysis-thermo-gauge7-amount').value;
-                        updatePyrolysisGauge('pyrolysis-thermo-gauge7');
-                    ">Push Data</button>
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="pp7" id="pyrolysis-thermo-gauge7-kp">
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="pp4" id="pyrolysis-thermo-gauge4-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="pi4" id="pyrolysis-thermo-gauge4-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="pd4" id="pyrolysis-thermo-gauge4-kd"><br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                    <p>Thermocouple #: </p>
+                    <p>Heater #: </p>
+                </div>
+                <div>
+                    <div id="pyrolysis-thermo-gauge5"></div>
+                    <!-- <p>Status: ON/OFF (from slice) </p> -->
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="ps5" id="pyrolysis-thermo-gauge5-amount"><br>
+                        <button onclick="
+                            pyrolysisGaugeInfo['pyrolysis-thermo-gauge5'].setpoint = document.getElementById('pyrolysis-thermo-gauge5-amount').value;
+                            updatePyrolysisGauge('pyrolysis-thermo-gauge5');
+                        ">Push Data</button>    
+                    </form>
                     <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="pi7" id="pyrolysis-thermo-gauge7-ki">
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="pp5" id="pyrolysis-thermo-gauge5-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="pi5" id="pyrolysis-thermo-gauge5-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="pd5" id="pyrolysis-thermo-gauge5-kd"><br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                    <p>Thermocouple #: </p>
+                    <p>Heater #: </p>
+                </div>
+                <div>
+                    <div id="pyrolysis-thermo-gauge6"></div>
+                    <!-- <p>Status: ON/OFF (from slice) </p> -->
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="ps6" id="pyrolysis-thermo-gauge6-amount"><br>
+                        <button onclick="
+                            pyrolysisGaugeInfo['pyrolysis-thermo-gauge6'].setpoint = document.getElementById('pyrolysis-thermo-gauge6-amount').value;
+                            updatePyrolysisGauge('pyrolysis-thermo-gauge6');
+                        ">Push Data</button>   
+                    </form>
                     <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="pd7" id="pyrolysis-thermo-gauge7-kd"><br>
-                    <button onclick="">Push Data</button>
-                </form>
-                <p>Thermocouple #: </p>
-                <p>Heater #: </p>
-            </div>
-            <div>
-                <div id="pyrolysis-thermo-gauge8"></div>
-                <!-- <p>Status: ON/OFF (from slice) </p> -->
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="ps8" id="pyrolysis-thermo-gauge8-amount"><br>
-                    <button onclick="
-                        pyrolysisGaugeInfo['pyrolysis-thermo-gauge8'].setpoint = document.getElementById('pyrolysis-thermo-gauge8-amount').value;
-                        updatePyrolysisGauge('pyrolysis-thermo-gauge8');
-                    ">Push Data</button>
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="pp8" id="pyrolysis-thermo-gauge8-kp">
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="pp6" id="pyrolysis-thermo-gauge6-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="pi6" id="pyrolysis-thermo-gauge6-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="pd6" id="pyrolysis-thermo-gauge6-kd"><br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                    <p>Thermocouple #: </p>
+                    <p>Heater #: </p>
+                </div>
+                <div>
+                    <div id="pyrolysis-thermo-gauge7"></div>
+                    <!-- <p>Status: ON/OFF (from slice) </p> -->
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="ps7" id="pyrolysis-thermo-gauge7-amount"><br>
+                        <button onclick="
+                            pyrolysisGaugeInfo['pyrolysis-thermo-gauge7'].setpoint = document.getElementById('pyrolysis-thermo-gauge7-amount').value;
+                            updatePyrolysisGauge('pyrolysis-thermo-gauge7');
+                        ">Push Data</button>
+                    </form>
                     <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="pi8" id="pyrolysis-thermo-gauge8-ki">
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="pp7" id="pyrolysis-thermo-gauge7-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="pi7" id="pyrolysis-thermo-gauge7-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="pd7" id="pyrolysis-thermo-gauge7-kd"><br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                    <p>Thermocouple #: </p>
+                    <p>Heater #: </p>
+                </div>
+                <div>
+                    <div id="pyrolysis-thermo-gauge8"></div>
+                    <!-- <p>Status: ON/OFF (from slice) </p> -->
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="ps8" id="pyrolysis-thermo-gauge8-amount"><br>
+                        <button onclick="
+                            pyrolysisGaugeInfo['pyrolysis-thermo-gauge8'].setpoint = document.getElementById('pyrolysis-thermo-gauge8-amount').value;
+                            updatePyrolysisGauge('pyrolysis-thermo-gauge8');
+                        ">Push Data</button>
+                    </form>
                     <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="pd8" id="pyrolysis-thermo-gauge8-kd"><br>
-                    <button onclick="">Push Data</button>
-                </form>
-                <p>Thermocouple #: </p>
-                <p>Heater #: </p>
-            </div>
-            <div>
-                <div id="pyrolysis-thermo-gauge9"></div>
-                <!-- <p>Status: ON/OFF (from slice) </p> -->
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="ps9" id="pyrolysis-thermo-gauge9-amount"><br>
-                    <button onclick="
-                        pyrolysisGaugeInfo['pyrolysis-thermo-gauge9'].setpoint = document.getElementById('pyrolysis-thermo-gauge9-amount').value;
-                        updatePyrolysisGauge('pyrolysis-thermo-gauge9');
-                    ">Push Data</button>
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="pp9" id="pyrolysis-thermo-gauge9-kp">
-                    <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="pi9" id="pyrolysis-thermo-gauge9-ki">
-                    <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="pd9" id="pyrolysis-thermo-gauge9-kd"><br>
-                    <button onclick="">Push Data</button>
-                </form>
-                <p>Thermocouple #: </p>
-                <p>Heater #: </p>
-            </div><div>
-                <div id="pyrolysis-thermo-gauge10"></div>
-                <!-- <p>Status: ON/OFF (from slice) </p> -->
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="ps10" id="pyrolysis-thermo-gauge10-amount"><br>
-                    <button onclick="
-                        pyrolysisGaugeInfo['pyrolysis-thermo-gauge10'].setpoint = document.getElementById('pyrolysis-thermo-gauge10-amount').value;
-                        updatePyrolysisGauge('pyrolysis-thermo-gauge10');
-                    ">Push Data</button>
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="pp10" id="pyrolysis-thermo-gauge10-kp">
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="pp8" id="pyrolysis-thermo-gauge8-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="pi8" id="pyrolysis-thermo-gauge8-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="pd8" id="pyrolysis-thermo-gauge8-kd"><br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                    <p>Thermocouple #: </p>
+                    <p>Heater #: </p>
+                </div>
+                <div>
+                    <div id="pyrolysis-thermo-gauge9"></div>
+                    <!-- <p>Status: ON/OFF (from slice) </p> -->
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="ps9" id="pyrolysis-thermo-gauge9-amount"><br>
+                        <button onclick="
+                            pyrolysisGaugeInfo['pyrolysis-thermo-gauge9'].setpoint = document.getElementById('pyrolysis-thermo-gauge9-amount').value;
+                            updatePyrolysisGauge('pyrolysis-thermo-gauge9');
+                        ">Push Data</button>
+                    </form>
                     <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="pi10" id="pyrolysis-thermo-gauge10-ki">
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="pp9" id="pyrolysis-thermo-gauge9-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="pi9" id="pyrolysis-thermo-gauge9-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="pd9" id="pyrolysis-thermo-gauge9-kd"><br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                    <p>Thermocouple #: </p>
+                    <p>Heater #: </p>
+                </div><div>
+                    <div id="pyrolysis-thermo-gauge10"></div>
+                    <!-- <p>Status: ON/OFF (from slice) </p> -->
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="ps10" id="pyrolysis-thermo-gauge10-amount"><br>
+                        <button onclick="
+                            pyrolysisGaugeInfo['pyrolysis-thermo-gauge10'].setpoint = document.getElementById('pyrolysis-thermo-gauge10-amount').value;
+                            updatePyrolysisGauge('pyrolysis-thermo-gauge10');
+                        ">Push Data</button>
+                    </form>
                     <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="pd10" id="pyrolysis-thermo-gauge10-kd"><br>
-                    <button onclick="">Push Data</button>
-                </form>
-                <p>Thermocouple #: </p>
-                <p>Heater #: </p>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="pp10" id="pyrolysis-thermo-gauge10-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="pi10" id="pyrolysis-thermo-gauge10-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="pd10" id="pyrolysis-thermo-gauge10-kd"><br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                    <p>Thermocouple #: </p>
+                    <p>Heater #: </p>
+                </div>
             </div>
-        </div>
 
-        <!-- Graph area -->
-        <div id='pyrolysis-thermo-graph'></div>
-        <label for="tracking-amount">Number of previous seconds to track: </label>
-        <input type="number" id="pyrolysis-tracking-amount" name="tracking-amount">
-        <button id="pyrolysis-tracking" onclick="setTracking('pyrolysis-tracking', 'pyrolysis-tracking-amount', 'pyrolysis-thermo-graph')">Track Data</button>
+            <!-- Graph area -->
+            <div id='pyrolysis-thermo-graph'></div>
+            <label for="tracking-amount">Number of previous seconds to track: </label>
+            <input type="number" id="pyrolysis-tracking-amount" name="tracking-amount">
+            <button id="pyrolysis-tracking" onclick="setTracking('pyrolysis-tracking', 'pyrolysis-tracking-amount', 'pyrolysis-thermo-graph')">Track Data</button>
 
-        <br><br><br><br>
-    </div>
+            <br><br><br><br>
+        </div>
 
-    <div id="bioreactor"class="tabcontent">
-        <!-- <h1>Bioreactor</h1> -->
-        <div id="bio-thermocouples" style="display: flex">
-            <div id="bio-thermo-gauge1"></div>
-            <div id="bio-thermo-gauge2"></div>
-            <div>
-                <div id="bio-thermo-graph" style="height: 350px; width: 1100px;"></div>
-                <label>Number of previous seconds to track: </label>
-                <input type="number" id="bio-thermo-tracking-amount">
-                <button id="bio-thermo-tracking" onclick="setTracking('bio-thermo-tracking', 'bio-thermo-tracking-amount', 'bio-thermo-graph')">Track Data</button>        
+        <div id="bioreactor"class="tabcontent">
+            <!-- <h1>Bioreactor</h1> -->
+            <div id="bio-thermocouples" style="display: flex">
+                <div id="bio-thermo-gauge1"></div>
+                <div id="bio-thermo-gauge2"></div>
+                <div>
+                    <div id="bio-thermo-graph" style="height: 350px; width: 1100px;"></div>
+                    <label>Number of previous seconds to track: </label>
+                    <input type="number" id="bio-thermo-tracking-amount">
+                    <button id="bio-thermo-tracking" onclick="setTracking('bio-thermo-tracking', 'bio-thermo-tracking-amount', 'bio-thermo-graph')">Track Data</button>        
+                </div>
             </div>
-        </div>
-       
-        <div id="bio-ph" style="display: flex">
-            <div>
-                <div id="bio-ph-gauge1"></div>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="bs1" id="bio-ph-gauge1-amount">
-                    <button onclick="
-                        bioGaugeInfo['bio-ph-gauge1'].setpoint = document.getElementById('bio-ph-gauge1-amount').value;
-                        updateBioPhGauge('bio-ph-gauge1')
-                    ">Push Data</button>    
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="bp1" id="bio-ph-gauge1-kp">
-                    <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="bi1" id="bio-ph-gauge1-ki">
+        
+            <div id="bio-ph" style="display: flex">
+                <div>
+                    <div id="bio-ph-gauge1"></div>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="bs1" id="bio-ph-gauge1-amount">
+                        <button onclick="
+                            bioGaugeInfo['bio-ph-gauge1'].setpoint = document.getElementById('bio-ph-gauge1-amount').value;
+                            updateBioPhGauge('bio-ph-gauge1')
+                        ">Push Data</button>    
+                    </form>
                     <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="bd1" id="bio-ph-gauge1-kd">
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="bp1" id="bio-ph-gauge1-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="bi1" id="bio-ph-gauge1-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="bd1" id="bio-ph-gauge1-kd">
+                        <br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                </div>
+                <div>
+                    <div id="bio-ph-gauge2"></div>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="bs2" id="bio-ph-gauge2-amount">
+                        <button onclick="
+                            bioGaugeInfo['bio-ph-gauge2'].setpoint = document.getElementById('bio-ph-gauge2-amount').value;
+                            updateBioPhGauge('bio-ph-gauge2')
+                        ">Push Data</button>    
+                    </form>
                     <br>
-                    <button onclick="">Push Data</button>
-                </form>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="bp2" id="bio-ph-gauge2-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="bi2" id="bio-ph-gauge2-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="bd2" id="bio-ph-gauge2-kd">
+                        <br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                </div>
+                <div>
+                    <div id="bio-ph-graph" style="height: 350px; width: 1100px;"></div>
+                    <label>Number of previous seconds to track: </label>
+                    <input type="number" id="bio-ph-tracking-amount">
+                    <button id="bio-ph-tracking" onclick="setTracking('bio-ph-tracking', 'bio-ph-tracking-amount', 'bio-ph-graph')">Track Data</button>        
+                </div>
             </div>
-            <div>
-                <div id="bio-ph-gauge2"></div>
+            <div id="bio-oxygen" style="display: flex">
+                <div id="bio-oxygen-gauge1"></div>
+                <div id="bio-oxygen-gauge2"></div>
+                <div>
+                    <div id="bio-oxygen-graph" style="height: 350px; width: 1100px;"></div>
+                    <label>Number of previous seconds to track: </label>
+                    <input type="number" id="bio-oxygen-tracking-amount">
+                    <button id="bio-oxygen-tracking" onclick="setTracking('bio-oxygen-tracking', 'bio-oxygen-tracking-amount', 'bio-oxygen-graph')">Track Data</button>        
+                </div>
+            </div>
+            <div id="bio-turbidity" style="display: flex">
                 <form action="/form-submit" method="POST" target="target">
-                    <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="bs2" id="bio-ph-gauge2-amount">
-                    <button onclick="
-                        bioGaugeInfo['bio-ph-gauge2'].setpoint = document.getElementById('bio-ph-gauge2-amount').value;
-                        updateBioPhGauge('bio-ph-gauge2')
-                    ">Push Data</button>    
+                    <div id="bio-turbidity-gauge1"></div>
+                    <label>Sample time (s):</label>
+                    
+                    <input type="number" step="0.01" name="bt1" id="bio-turbidity-gauge1-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-turbidity-gauge1-amount').value, 'bio-turbidity-gauge1')">Push Data</button>
                 </form>
-                <br>
                 <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="bp2" id="bio-ph-gauge2-kp">
-                    <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="bi2" id="bio-ph-gauge2-ki">
-                    <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="bd2" id="bio-ph-gauge2-kd">
-                    <br>
-                    <button onclick="">Push Data</button>
+                    <div id="bio-turbidity-gauge2"></div>
+                    <label>Sample time (s):</label>
+                    
+                    <input type="number" step="0.01" name="bt2" id="bio-turbidity-gauge2-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-turbidity-gauge2-amount').value, 'bio-turbidity-gauge2')">Push Data</button>
                 </form>
+                <div>
+                    <div id="bio-turbidity-graph" style="height: 350px; width: 1100px;"></div>
+                    <label>Number of previous seconds to track: </label>
+                    <input type="number" id="bio-turbidity-tracking-amount">
+                    <button id="bio-turbidity-tracking" onclick="setTracking('bio-turbidity-tracking', 'bio-turbidity-tracking-amount', 'bio-turbidity-graph')">Track Data</button>        
+                </div>
             </div>
-            <div>
-                <div id="bio-ph-graph" style="height: 350px; width: 1100px;"></div>
-                <label>Number of previous seconds to track: </label>
-                <input type="number" id="bio-ph-tracking-amount">
-                <button id="bio-ph-tracking" onclick="setTracking('bio-ph-tracking', 'bio-ph-tracking-amount', 'bio-ph-graph')">Track Data</button>        
-            </div>
-        </div>
-        <div id="bio-oxygen" style="display: flex">
-            <div id="bio-oxygen-gauge1"></div>
-            <div id="bio-oxygen-gauge2"></div>
-            <div>
-                <div id="bio-oxygen-graph" style="height: 350px; width: 1100px;"></div>
-                <label>Number of previous seconds to track: </label>
-                <input type="number" id="bio-oxygen-tracking-amount">
-                <button id="bio-oxygen-tracking" onclick="setTracking('bio-oxygen-tracking', 'bio-oxygen-tracking-amount', 'bio-oxygen-graph')">Track Data</button>        
-            </div>
-        </div>
-        <div id="bio-turbidity" style="display: flex">
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-turbidity-gauge1"></div>
-                <label>Sample time (s):</label>
-                
-                <input type="number" step="0.01" name="bt1" id="bio-turbidity-gauge1-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-turbidity-gauge1-amount').value, 'bio-turbidity-gauge1')">Push Data</button>
-            </form>
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-turbidity-gauge2"></div>
-                <label>Sample time (s):</label>
-                
-                <input type="number" step="0.01" name="bt2" id="bio-turbidity-gauge2-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-turbidity-gauge2-amount').value, 'bio-turbidity-gauge2')">Push Data</button>
-            </form>
-            <div>
-                <div id="bio-turbidity-graph" style="height: 350px; width: 1100px;"></div>
-                <label>Number of previous seconds to track: </label>
-                <input type="number" id="bio-turbidity-tracking-amount">
-                <button id="bio-turbidity-tracking" onclick="setTracking('bio-turbidity-tracking', 'bio-turbidity-tracking-amount', 'bio-turbidity-graph')">Track Data</button>        
-            </div>
-        </div>
 
-        <div id="bio-motors-1" style="display: grid; grid-template-columns: auto auto auto auto auto;">
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-stirring-gauge1"></div>
-                <label>Setpoint:</label>
-                <input type="number" step="0.01" name="bm1" id="bio-stirring-gauge1-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-stirring-gauge1-amount').value, 'bio-stirring-gauge1')">Push Data</button>
-            </form>
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-pump1-gauge1"></div>
-                <label>Setpoint:</label>
-                <input type="number" step="0.01" name="bm2" id="bio-pump1-gauge1-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-pump1-gauge1-amount').value, 'bio-pump1-gauge1')">Push Data</button>
-            </form>
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-pump2-gauge1"></div>
-                <label>Setpoint:</label>
-                <input type="number" step="0.01" name="bm3" id="bio-pump2-gauge1-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-pump2-gauge1-amount').value, 'bio-pump2-gauge1')">Push Data</button>
-            </form>
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-pump3-gauge1"></div>
-                <label>Setpoint:</label>
-                <input type="number" step="0.01" name="bm4" id="bio-pump3-gauge1-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-pump3-gauge1-amount').value, 'bio-pump3-gauge1')">Push Data</button>
-            </form>
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-pump4-gauge1"></div>
-                <label>Setpoint:</label>
-                <input type="number" step="0.01" name="bm5" id="bio-pump4-gauge1-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-pump4-gauge1-amount').value, 'bio-pump4-gauge1')">Push Data</button>
-            </form>
-        </div>
-        <div id="bio-motors-2" style="display: grid; grid-template-columns: auto auto auto auto auto;">
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-stirring-gauge2"></div>
-                <label>Setpoint:</label>
-                <input type="number" step="0.01" name="bm6" id="bio-stirring-gauge2-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-stirring-gauge2-amount').value, 'bio-stirring-gauge2')">Push Data</button>
-            </form>
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-pump1-gauge2"></div>
-                <label>Setpoint:</label>
-                <input type="number" step="0.01" name="bm7" id="bio-pump1-gauge2-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-pump1-gauge2-amount').value, 'bio-pump1-gauge2')">Push Data</button>
-            </form>
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-pump2-gauge2"></div>
-                <label>Setpoint:</label>
-                <input type="number" step="0.01" name="bm8" id="bio-pump2-gauge2-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-pump2-gauge2-amount').value, 'bio-pump2-gauge2')">Push Data</button>
-            </form>
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-pump3-gauge2"></div>
-                <label>Setpoint:</label>
-                <input type="number" step="0.01" name="bm9" id="bio-pump3-gauge2-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-pump3-gauge2-amount').value, 'bio-pump3-gauge2')">Push Data</button>
-            </form>
-            <form action="/form-submit" method="POST" target="target">
-                <div id="bio-pump4-gauge2"></div>
-                <label>Setpoint:</label>
-                <input type="number" step="0.01" name="bm10" id="bio-pump4-gauge2-amount"><br>
-                <button onclick="setGaugeValue(document.getElementById('bio-pump4-gauge2-amount').value, 'bio-pump4-gauge2')">Push Data</button>
-            </form>
-        </div>
-
-        <h2>Post Processing</h2>
-        <div id="bio-pro" style="display: flex">
-            <div>
-                <div id="bio-pro-gauge1"></div>
+            <div id="bio-motors-1" style="display: grid; grid-template-columns: auto auto auto auto auto;">
                 <form action="/form-submit" method="POST" target="target">
+                    <div id="bio-stirring-gauge1"></div>
                     <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="Ps1" id="bio-pro-gauge1-amount"><br>
-                    <button onclick="
-                        bioGaugeInfo['bio-pro-gauge1'].setpoint = document.getElementById('bio-pro-gauge1-amount').value;
-                        updateBioProGauge('bio-pro-gauge1')
-                    ">Push Data</button>    
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="Pp1" id="bio-pro-gauge1-kp">
-                    <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="Pi1" id="bio-pro-gauge1-ki">
-                    <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="Pd1" id="bio-pro-gauge1-kd">
-                    <br>
-                    <button onclick="">Push Data</button>
+                    <input type="number" step="0.01" name="bm1" id="bio-stirring-gauge1-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-stirring-gauge1-amount').value, 'bio-stirring-gauge1')">Push Data</button>
                 </form>
-            </div>
-            <div>
-                <div id="bio-pro-gauge2"></div>
                 <form action="/form-submit" method="POST" target="target">
+                    <div id="bio-pump1-gauge1"></div>
                     <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="Ps2" id="bio-pro-gauge2-amount">
-                    <button onclick="
-                        bioGaugeInfo['bio-pro-gauge2'].setpoint = document.getElementById('bio-pro-gauge2-amount').value;
-                        updateBioProGauge('bio-pro-gauge2')
-                    ">Push Data</button>    
+                    <input type="number" step="0.01" name="bm2" id="bio-pump1-gauge1-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-pump1-gauge1-amount').value, 'bio-pump1-gauge1')">Push Data</button>
                 </form>
-                <br>
                 <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="Pp2" id="bio-pro-gauge2-kp">
-                    <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="Pi2" id="bio-pro-gauge2-ki">
-                    <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="Pd2" id="bio-pro-gauge2-kd">
-                    <br>
-                    <button onclick="">Push Data</button>
+                    <div id="bio-pump2-gauge1"></div>
+                    <label>Setpoint:</label>
+                    <input type="number" step="0.01" name="bm3" id="bio-pump2-gauge1-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-pump2-gauge1-amount').value, 'bio-pump2-gauge1')">Push Data</button>
                 </form>
-            </div>
-            <div>
-                <div id="bio-pro-graph" style="height: 350px; width: 1100px;"></div>
-                <label>Number of previous seconds to track: </label>
-                <input type="number" id="bio-pro-tracking-amount">
-                <button id="bio-pro-tracking" onclick="setTracking('bio-pro-tracking', 'bio-pro-tracking-amount', 'bio-pro-graph')">Track Data</button>        
-            </div>
-        </div>
-    </div>
-
-    <div id="chemreactor">
-        <!-- <h1>Chemical Deconstruction Reactor</h1> -->
-        <div style="display: grid; grid-template-columns: auto auto auto auto auto auto;">
-            <div>
-                <div id="chem-thermo-gauge1"></div>
                 <form action="/form-submit" method="POST" target="target">
+                    <div id="bio-pump3-gauge1"></div>
                     <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="cs1" id="chem-thermo-gauge1-amount">
-                    <button onclick="
-                       chemGaugeInfo['chem-thermo-gauge1'].setpoint = document.getElementById('chem-thermo-gauge1-amount').value
-                       updateChemGauge('chem-thermo-gauge1')
-                    ">Push Data</button>   
+                    <input type="number" step="0.01" name="bm4" id="bio-pump3-gauge1-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-pump3-gauge1-amount').value, 'bio-pump3-gauge1')">Push Data</button>
                 </form>
-                <br>
                 <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="cp1" id="chem-thermo-gauge1-kp">
-                    <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="ci1" id="chem-thermo-gauge1-ki">
-                    <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="cd1" id="chem-thermo-gauge1-kd">
-                    <button onclick="">Push Data</button>
+                    <div id="bio-pump4-gauge1"></div>
+                    <label>Setpoint:</label>
+                    <input type="number" step="0.01" name="bm5" id="bio-pump4-gauge1-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-pump4-gauge1-amount').value, 'bio-pump4-gauge1')">Push Data</button>
                 </form>
             </div>
-            <div>
-                <div id="chem-thermo-gauge2"></div>
+            <div id="bio-motors-2" style="display: grid; grid-template-columns: auto auto auto auto auto;">
                 <form action="/form-submit" method="POST" target="target">
+                    <div id="bio-stirring-gauge2"></div>
                     <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="cs2" id="chem-thermo-gauge2-amount">
-                    <button onclick="
-                       chemGaugeInfo['chem-thermo-gauge2'].setpoint = document.getElementById('chem-thermo-gauge2-amount').value
-                       updateChemGauge('chem-thermo-gauge2')
-                    ">Push Data</button>   
-                </form>
-                <br>
-                <form action="/form-submit" method="POST" target="target">
-                    <label>Kp:</label>
-                    <input type="number" step="0.01" name="cp2" id="chem-thermo-gauge2-kp">
-                    <br>
-                    <label>Ki:</label>
-                    <input type="number" step="0.01" name="ci2" id="chem-thermo-gauge2-ki">
-                    <br>
-                    <label>Kd:</label>
-                    <input type="number" step="0.01" name="cd2" id="chem-thermo-gauge2-kd">
-                    <button onclick="">Push Data</button>
+                    <input type="number" step="0.01" name="bm6" id="bio-stirring-gauge2-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-stirring-gauge2-amount').value, 'bio-stirring-gauge2')">Push Data</button>
                 </form>
-            </div>
-            <div>
                 <form action="/form-submit" method="POST" target="target">
-                    <div id="chem-pump1-gauge1"></div>
+                    <div id="bio-pump1-gauge2"></div>
                     <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="cm1" id="chem-pump1-gauge1-amount">
-                    <button onclick="setGaugeValue(document.getElementById('chem-pump1-gauge1-amount').value, 'chem-pump1-gauge1')">Push Data</button>
+                    <input type="number" step="0.01" name="bm7" id="bio-pump1-gauge2-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-pump1-gauge2-amount').value, 'bio-pump1-gauge2')">Push Data</button>
                 </form>
-            </div>
-            <div>
                 <form action="/form-submit" method="POST" target="target">
-                    <div id="chem-pump2-gauge1"></div>
+                    <div id="bio-pump2-gauge2"></div>
                     <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="cm2" id="chem-pump2-gauge1-amount">
-                    <button onclick="setGaugeValue(document.getElementById('chem-pump2-gauge1-amount').value, 'chem-pump2-gauge1')">Push Data</button>
+                    <input type="number" step="0.01" name="bm8" id="bio-pump2-gauge2-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-pump2-gauge2-amount').value, 'bio-pump2-gauge2')">Push Data</button>
                 </form>
-            </div>
-            <div>
                 <form action="/form-submit" method="POST" target="target">
-                    <div id="chem-pump3-gauge1"></div>
+                    <div id="bio-pump3-gauge2"></div>
                     <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="cm3" id="chem-pump3-gauge1-amount">
-                    <button onclick="setGaugeValue(document.getElementById('chem-pump3-gauge1-amount').value, 'chem-pump3-gauge1')">Push Data</button>
+                    <input type="number" step="0.01" name="bm9" id="bio-pump3-gauge2-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-pump3-gauge2-amount').value, 'bio-pump3-gauge2')">Push Data</button>
                 </form>
-            </div>
-            <div>
                 <form action="/form-submit" method="POST" target="target">
-                    <div id="chem-pump4-gauge1"></div>
+                    <div id="bio-pump4-gauge2"></div>
                     <label>Setpoint:</label>
-                    <input type="number" step="0.01" name="cm4" id="chem-pump4-gauge1-amount">
-                    <button onclick="setGaugeValue(document.getElementById('chem-pump1-gauge4-amount').value, 'chem-pump4-gauge1')">Push Data</button>
+                    <input type="number" step="0.01" name="bm10" id="bio-pump4-gauge2-amount"><br>
+                    <button onclick="setGaugeValue(document.getElementById('bio-pump4-gauge2-amount').value, 'bio-pump4-gauge2')">Push Data</button>
                 </form>
             </div>
+
+            <h2>Post Processing</h2>
+            <div id="bio-pro" style="display: flex">
+                <div>
+                    <div id="bio-pro-gauge1"></div>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="Ps1" id="bio-pro-gauge1-amount"><br>
+                        <button onclick="
+                            bioGaugeInfo['bio-pro-gauge1'].setpoint = document.getElementById('bio-pro-gauge1-amount').value;
+                            updateBioProGauge('bio-pro-gauge1')
+                        ">Push Data</button>    
+                    </form>
+                    <br>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="Pp1" id="bio-pro-gauge1-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="Pi1" id="bio-pro-gauge1-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="Pd1" id="bio-pro-gauge1-kd">
+                        <br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                </div>
+                <div>
+                    <div id="bio-pro-gauge2"></div>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="Ps2" id="bio-pro-gauge2-amount">
+                        <button onclick="
+                            bioGaugeInfo['bio-pro-gauge2'].setpoint = document.getElementById('bio-pro-gauge2-amount').value;
+                            updateBioProGauge('bio-pro-gauge2')
+                        ">Push Data</button>    
+                    </form>
+                    <br>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="Pp2" id="bio-pro-gauge2-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="Pi2" id="bio-pro-gauge2-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="Pd2" id="bio-pro-gauge2-kd">
+                        <br>
+                        <button onclick="">Push Data</button>
+                    </form>
+                </div>
+                <div>
+                    <div id="bio-pro-graph" style="height: 350px; width: 1100px;"></div>
+                    <label>Number of previous seconds to track: </label>
+                    <input type="number" id="bio-pro-tracking-amount">
+                    <button id="bio-pro-tracking" onclick="setTracking('bio-pro-tracking', 'bio-pro-tracking-amount', 'bio-pro-graph')">Track Data</button>        
+                </div>
+            </div>
         </div>
-        <div>
-            <div id="chem-thermo-graph" style="height: 350px; width: 1100px;"></div>
-            <label>Number of previous seconds to track: </label>
-            <input type="number" id="chem-thermo-tracking-amount">
-            <button id="chem-thermo-tracking" onclick="setTracking('chem-thermo-tracking', 'chem-thermo-tracking-amount', 'chem-thermo-graph')">Track Data</button>        
+
+        <div id="chemreactor">
+            <!-- <h1>Chemical Deconstruction Reactor</h1> -->
+            <div style="display: grid; grid-template-columns: auto auto auto auto auto auto;">
+                <div>
+                    <div id="chem-thermo-gauge1"></div>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="cs1" id="chem-thermo-gauge1-amount">
+                        <button onclick="
+                        chemGaugeInfo['chem-thermo-gauge1'].setpoint = document.getElementById('chem-thermo-gauge1-amount').value
+                        updateChemGauge('chem-thermo-gauge1')
+                        ">Push Data</button>   
+                    </form>
+                    <br>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="cp1" id="chem-thermo-gauge1-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="ci1" id="chem-thermo-gauge1-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="cd1" id="chem-thermo-gauge1-kd">
+                        <button onclick="">Push Data</button>
+                    </form>
+                </div>
+                <div>
+                    <div id="chem-thermo-gauge2"></div>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="cs2" id="chem-thermo-gauge2-amount">
+                        <button onclick="
+                        chemGaugeInfo['chem-thermo-gauge2'].setpoint = document.getElementById('chem-thermo-gauge2-amount').value
+                        updateChemGauge('chem-thermo-gauge2')
+                        ">Push Data</button>   
+                    </form>
+                    <br>
+                    <form action="/form-submit" method="POST" target="target">
+                        <label>Kp:</label>
+                        <input type="number" step="0.01" name="cp2" id="chem-thermo-gauge2-kp">
+                        <br>
+                        <label>Ki:</label>
+                        <input type="number" step="0.01" name="ci2" id="chem-thermo-gauge2-ki">
+                        <br>
+                        <label>Kd:</label>
+                        <input type="number" step="0.01" name="cd2" id="chem-thermo-gauge2-kd">
+                        <button onclick="">Push Data</button>
+                    </form>
+                </div>
+                <div>
+                    <form action="/form-submit" method="POST" target="target">
+                        <div id="chem-pump1-gauge1"></div>
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="cm1" id="chem-pump1-gauge1-amount">
+                        <button onclick="setGaugeValue(document.getElementById('chem-pump1-gauge1-amount').value, 'chem-pump1-gauge1')">Push Data</button>
+                    </form>
+                </div>
+                <div>
+                    <form action="/form-submit" method="POST" target="target">
+                        <div id="chem-pump2-gauge1"></div>
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="cm2" id="chem-pump2-gauge1-amount">
+                        <button onclick="setGaugeValue(document.getElementById('chem-pump2-gauge1-amount').value, 'chem-pump2-gauge1')">Push Data</button>
+                    </form>
+                </div>
+                <div>
+                    <form action="/form-submit" method="POST" target="target">
+                        <div id="chem-pump3-gauge1"></div>
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="cm3" id="chem-pump3-gauge1-amount">
+                        <button onclick="setGaugeValue(document.getElementById('chem-pump3-gauge1-amount').value, 'chem-pump3-gauge1')">Push Data</button>
+                    </form>
+                </div>
+                <div>
+                    <form action="/form-submit" method="POST" target="target">
+                        <div id="chem-pump4-gauge1"></div>
+                        <label>Setpoint:</label>
+                        <input type="number" step="0.01" name="cm4" id="chem-pump4-gauge1-amount">
+                        <button onclick="setGaugeValue(document.getElementById('chem-pump1-gauge4-amount').value, 'chem-pump4-gauge1')">Push Data</button>
+                    </form>
+                </div>
+            </div>
+            <div>
+                <div id="chem-thermo-graph" style="height: 350px; width: 1100px;"></div>
+                <label>Number of previous seconds to track: </label>
+                <input type="number" id="chem-thermo-tracking-amount">
+                <button id="chem-thermo-tracking" onclick="setTracking('chem-thermo-tracking', 'chem-thermo-tracking-amount', 'chem-thermo-graph')">Track Data</button>        
+            </div>
         </div>
-    </div>
-
-<script>
-
-//----------------Pyrolysis thermocouple traces-----------------------//  
-var pyrolysis_traces = [
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Dissolution Tank"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Dissolution Heating Tape"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Valve"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Char Chamber"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Secondary Reactor"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Knockout Drum"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Condenser 0"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Condenser 1"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Condenser 2"
-    },
-]
-
-//----------------Bioreactor thermocouple traces-----------------------//
-var bio_thermo_traces = [
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Thermocouple 1"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Thermocouple 2"
-    }
-]
-
-//----------------Bioreactor pH traces-----------------------//
-var bio_ph_traces = [
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "pH Sensor 1"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "pH Sensor 2"
-    }
-]
-
-//----------------Bioreactor dissolved oxygen traces-----------------------//
-var bio_oxygen_traces = [
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Dissolved O2 1"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Dissolved O2 2"
-    }
-]
-
-//----------------Bioreactor turbidity traces-----------------------//
-var bio_turbidity_traces = [
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Turbidity 1"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Turbidity 2"
-    }
-]
-
-//----------------Bioreactor Post Processing traces-----------------------//
-var bio_pro_traces = [
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Pasteurization"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Dryer"
-    }
-]
-
-//----------------Chemreactor thermocouple traces-----------------------//
-var chem_thermo_traces = [
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Reactor 1"
-    },
-    {
-        y: [],
-        x: [],
-        type: 'scatter',
-        mode: "lines",
-        name: "Reactor 2"
-    }
-]
-
-//----------------Thermocouple graph layout-----------------------//
-var thermocouple_layout = {
-    title: 'Temperature Data',
-    xaxis: {
-        title: 'Time',
-        autorange: true,
-        rangeselector: {buttons: [
-            {
-            count: 1,
-            label: '1h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 6,
-            label: '6h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 12,
-            label: '12h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 24,
-            label: '24h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {step: 'all'}
-        ]},
-        type: 'date'
-    },
-    yaxis: {
-        title: 'Degrees Celsius'
-    },
-    showlegend: true
-};
-
-var bio_thermo_layout = {
-    title: 'Temperature Data',
-    xaxis: {
-        title: 'Time',
-        autorange: true,
-        rangeselector: {buttons: [
-            {
-            count: 1,
-            label: '1h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 6,
-            label: '6h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 12,
-            label: '12h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 24,
-            label: '24h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {step: 'all'}
-        ]},
-        type: 'date'
-    },
-    yaxis: {
-        title: 'Degrees Celsius'
-    },
-    showlegend: true
-};
-
-var chem_thermo_layout = {
-    title: 'Temperature Data',
-    xaxis: {
-        title: 'Time',
-        autorange: true,
-        rangeselector: {buttons: [
-            {
-            count: 1,
-            label: '1h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 6,
-            label: '6h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 12,
-            label: '12h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 24,
-            label: '24h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {step: 'all'}
-        ]},
-        type: 'date'
-    },
-    yaxis: {
-        title: 'Degrees Celsius'
-    },
-    showlegend: true
-};
-
-//----------------pH graph layout-----------------------//
-var pH_layout = {
-    title: 'pH Data',
-    xaxis: {
-        title: 'Time',
-        autorange: true,
-        rangeselector: {buttons: [
-            {
-            count: 1,
-            label: '1h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 6,
-            label: '6h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 12,
-            label: '12h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 24,
-            label: '24h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {step: 'all'}
-        ]},
-        type: 'date'
-    },
-    yaxis: {
-        title: 'pH'
-    },
-    showlegend: true
-};
-
-//----------------Dissolved oxygen graph layout-----------------------//
-var oxygen_layout = {
-    title: 'Dissolved Oxygen Data',
-    xaxis: {
-        title: 'Time',
-        autorange: true,
-        rangeselector: {buttons: [
-            {
-            count: 1,
-            label: '1h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 6,
-            label: '6h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 12,
-            label: '12h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 24,
-            label: '24h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {step: 'all'}
-        ]},
-        type: 'date'
-    },
-    yaxis: {
-        title: 'Dissolved Oxygen (mL)'
-    },
-    showlegend: true
-};
-
-//----------------Turbidity graph layout-----------------------//
-var turbidity_layout = {
-    title: 'Turbidity Data',
-    xaxis: {
-        title: 'Time',
-        autorange: true,
-        rangeselector: {buttons: [
-            {
-            count: 1,
-            label: '1h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 6,
-            label: '6h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 12,
-            label: '12h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 24,
-            label: '24h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {step: 'all'}
-        ]},
-        type: 'date'
-    },
-    yaxis: {
-        title: 'Turbidity (NTU)'
-    },
-    showlegend: true
-};
-
-//----------------Post Processing graph layout-----------------------//
-var pro_layout = {
-    title: 'Post Processing Data',
-    xaxis: {
-        title: 'Time',
-        autorange: true,
-        rangeselector: {buttons: [
-            {
-            count: 1,
-            label: '1h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 6,
-            label: '6h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 12,
-            label: '12h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {
-            count: 24,
-            label: '24h',
-            step: 'hour',
-            stepmode: 'backward'
-            },
-            {step: 'all'}
-        ]},
-        type: 'date'
-    },
-    yaxis: {
-        title: 'Degrees Celsius'
-    },
-    showlegend: true
-};
-
-//----------------Standard Gauge Layout-----------------------//
-var gaugeLayout = { width: 270, height: 220, margin: { t: 0, b: 0, l: 40, r: 40} };
-
-//----------------Thermocouple Gauge-----------------------//
-var thermo_gauge = [{
-    domain: { x: [0, 1], y: [0, 1] },
-    value: 0,
-    title: { text: "" },
-    type: "indicator",
-    mode: "gauge+number",
-    delta: { reference: 200 },
-    number: {'valueformat':'.1f'},
-    gauge: {
-        axis: { range: [null, 400] },
-        bar: { color: "blue" },
-        steps: [
-            { range: [0, 400], color: "#dddddd" },
-            { range: [145, 155], color: "yellow" },
-            { range: [195, 205], color: "green" },
-            { range: [245, 255], color: "red" }
-        ],
-    }
-}];
-
-var thermo_bio_gauge = [{
-    domain: { x: [0, 1], y: [0, 1] },
-    value: 0,
-    title: { text: "" },
-    type: "indicator",
-    mode: "gauge+number",
-    delta: { reference: 200 },
-    number: {'valueformat':'.1f'},
-    gauge: {
-        axis: { range: [null, 400] },
-        bar: { color: "blue" },
-        steps: [
-            { range: [0, 400], color: "#dddddd" },
-        ],
-    }
-}];
-
-//----------------pH Gauge-----------------------//
-var pH_gauge = [{
-    domain: { x: [0, 1], y: [0, 1] },
-    value: 0,
-    title: { text: "" },
-    type: "indicator",
-    mode: "gauge+number",
-    delta: { reference: 7},
-    number: {'valueformat':'.2f'},
-    gauge: {
-        axis: { range: [null, 14] },
-        bar: { color: "green" },
-        steps: [
-            { range: [0, 14], color: "#dddddd" },
-        ],
-        threshold: {
-            line: { color: "red", width: 4 },
-            thickness: 0.75,
-            value: 7
+    <script>
+
+    //----------------Pyrolysis thermocouple traces-----------------------//  
+    var pyrolysis_traces = [
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Dissolution Tank"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Dissolution Heating Tape"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Valve"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Char Chamber"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Secondary Reactor"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Knockout Drum"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Condenser 0"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Condenser 1"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Condenser 2"
+        },
+    ]
+
+    //----------------Bioreactor thermocouple traces-----------------------//
+    var bio_thermo_traces = [
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Thermocouple 1"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Thermocouple 2"
         }
-    }
-}];
-
-//----------------Dissolved Oxygen Gauge-----------------------//
-var oxygen_gauge = [{
-    domain: { x: [0, 1], y: [0, 1] },
-    value: 0,
-    title: { text: "" },
-    type: "indicator",
-    mode: "gauge+number",
-    delta: { reference: 50 },
-    number: {'valueformat':'.2f'},
-    gauge: {
-        axis: { range: [null, 100] },
-        bar: { color: "green" },
-        steps: [
-            { range: [0, 100], color: "#dddddd" },
-        ],
-    }
-}];
-
-//----------------Turbidity Gauge-----------------------//
-var turbidity_gauge = [{
-    domain: { x: [0, 1], y: [0, 1] },
-    value: 0,
-    title: { text: "" },
-    type: "indicator",
-    mode: "gauge+number",
-    delta: { reference: 1 },
-    number: {'valueformat':'.2f'},
-    gauge: {
-        axis: { range: [null, 6] },
-        bar: { color: "green" },
-        steps: [
-            { range: [0, 6], color: "#dddddd" },
-        ],
-    }
-}];
-
-//----------------Motor Gauge-----------------------//
-var motor_gauge = [{
-    domain: { x: [0, 1], y: [0, 1] },
-    value: 0,
-    title: { text: "" },
-    type: "indicator",
-    mode: "gauge+number",
-    delta: { reference: 50 },
-    gauge: {
-        axis: { range: [null, 100] },
-        bar: { color: "green" },
-        steps: [
-            { range: [0, 100], color: "#dddddd" },
-        ],
-    }
-}];
+    ]
+
+    //----------------Bioreactor pH traces-----------------------//
+    var bio_ph_traces = [
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "pH Sensor 1"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "pH Sensor 2"
+        }
+    ]
+
+    //----------------Bioreactor dissolved oxygen traces-----------------------//
+    var bio_oxygen_traces = [
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Dissolved O2 1"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Dissolved O2 2"
+        }
+    ]
+
+    //----------------Bioreactor turbidity traces-----------------------//
+    var bio_turbidity_traces = [
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Turbidity 1"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Turbidity 2"
+        }
+    ]
+
+    //----------------Bioreactor Post Processing traces-----------------------//
+    var bio_pro_traces = [
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Pasteurization"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Dryer"
+        }
+    ]
+
+    //----------------Chemreactor thermocouple traces-----------------------//
+    var chem_thermo_traces = [
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Reactor 1"
+        },
+        {
+            y: [],
+            x: [],
+            type: 'scatter',
+            mode: "lines",
+            name: "Reactor 2"
+        }
+    ]
+
+    //----------------Thermocouple graph layout-----------------------//
+    var thermocouple_layout = {
+        title: 'Temperature Data',
+        xaxis: {
+            title: 'Time',
+            autorange: true,
+            rangeselector: {buttons: [
+                {
+                count: 1,
+                label: '1h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 6,
+                label: '6h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 12,
+                label: '12h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 24,
+                label: '24h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {step: 'all'}
+            ]},
+            type: 'date'
+        },
+        yaxis: {
+            title: 'Degrees Celsius'
+        },
+        showlegend: true
+    };
 
-//----------------Pyrolysis Gauges-----------------------//
-var pyrolysisGaugeInfo = {
-    "pyrolysis-thermo-gauge1": {
-        title: "Dissolution Tank",
-        setpoint: 200,
-        value: 0,
-    },
-    "pyrolysis-thermo-gauge2": {
-        title: "Valve",
-        setpoint: 200,
-        value: 0,
-    },
-    "pyrolysis-thermo-gauge3": {
-        title: "Char Chamber",
-        setpoint: 200,
-        value: 0,
-    },
-    "pyrolysis-thermo-gauge4": {
-        title: "Secondary Reactor",
-        setpoint: 200,
-        value: 0,
-    },
-    "pyrolysis-thermo-gauge5": {
-        title: "Knockout Drum",
-        setpoint: 200,
-        value: 0,
-    },
-    "pyrolysis-thermo-gauge6": {
-        title: "Condenser 0 Heater",
-        setpoint: 200,
-        value: 0,
-    },
-    "pyrolysis-thermo-gauge7": {
-        title: "Condenser 0 Fan",
-        setpoint: 200,
-        value: 0,
-    },
-    "pyrolysis-thermo-gauge8": {
-        title: "Condenser 1 Heater",
-        setpoint: 200,
-        value: 0,
-    },
-    "pyrolysis-thermo-gauge9": {
-        title: "Condenser 1 Fan",
-        setpoint: 200,
-        value: 0,
-    },
-    "pyrolysis-thermo-gauge10": {
-        title: "Condenser 2 Fan",
-        setpoint: 200,
-        value: 0,
-    },
-}
-function openPage(pageName, elmnt, color) {
-  // Hide all elements with class="tabcontent" by default */
-  var i, tabcontent, tablinks;
-  tabcontent = document.getElementsByClassName("tabcontent");
-  for (i = 0; i < tabcontent.length; i++) {
-    tabcontent[i].style.display = "none";
-  }
-
-  // Remove the background color of all tablinks/buttons
-  tablinks = document.getElementsByClassName("tablink");
-  for (i = 0; i < tablinks.length; i++) {
-    tablinks[i].style.backgroundColor = "";
-  }
-
-  // Show the specific tab content
-  document.getElementById(pageName).style.display = "block";
-
-  // Add the specific color to the button used to open the tab content
-  elmnt.style.backgroundColor = color;
-}
-
-// Get the element with id="defaultOpen" and click on it
-document.getElementById("defaultOpen").click();
-
-//create new gauge plots
-Plotly.newPlot('pyrolysis-thermo-gauge1', thermo_gauge, gaugeLayout);
-Plotly.newPlot('pyrolysis-thermo-gauge2', thermo_gauge, gaugeLayout);
-Plotly.newPlot('pyrolysis-thermo-gauge3', thermo_gauge, gaugeLayout);
-Plotly.newPlot('pyrolysis-thermo-gauge4', thermo_gauge, gaugeLayout);
-Plotly.newPlot('pyrolysis-thermo-gauge5', thermo_gauge, gaugeLayout);
-Plotly.newPlot('pyrolysis-thermo-gauge6', thermo_gauge, gaugeLayout);
-Plotly.newPlot('pyrolysis-thermo-gauge7', thermo_gauge, gaugeLayout);
-Plotly.newPlot('pyrolysis-thermo-gauge8', thermo_gauge, gaugeLayout);
-Plotly.newPlot('pyrolysis-thermo-gauge9', thermo_gauge, gaugeLayout);
-Plotly.newPlot('pyrolysis-thermo-gauge10', thermo_gauge, gaugeLayout);
-
-//adjust titles
-Plotly.restyle('pyrolysis-thermo-gauge1', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge1'].title})
-Plotly.restyle('pyrolysis-thermo-gauge2', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge2'].title})
-Plotly.restyle('pyrolysis-thermo-gauge3', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge3'].title})
-Plotly.restyle('pyrolysis-thermo-gauge4', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge4'].title})
-Plotly.restyle('pyrolysis-thermo-gauge5', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge5'].title})
-Plotly.restyle('pyrolysis-thermo-gauge6', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge6'].title})
-Plotly.restyle('pyrolysis-thermo-gauge7', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge7'].title})
-Plotly.restyle('pyrolysis-thermo-gauge8', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge8'].title})
-Plotly.restyle('pyrolysis-thermo-gauge9', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge9'].title})
-Plotly.restyle('pyrolysis-thermo-gauge10', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge10'].title})
-
-//----------------Bioreactor Gauges-----------------------//
-var bioGaugeInfo = {
-    "bio-thermo-gauge1": {
-        title: "Thermocouple 1",
-        value: 0,
-    },
-    "bio-ph-gauge1": {
-        title: "pH Sensor 1",
-        value: 0,
-        setpoint: 0,
-    },
-    "bio-oxygen-gauge1": {
-        title: "Dissolved Oxygen 1",
-        value: 0,
-    },
-    "bio-turbidity-gauge1": {
-        title: "Turbidity 1",
-        value: 0,
-    },
-    "bio-thermo-gauge2": {
-        title: "Thermocouple 2",
-        value: 0,
-    },
-    "bio-ph-gauge2": {
-        title: "pH Sensor 2",
-        value: 0,
-        setpoint: 0,
-    },
-    "bio-oxygen-gauge2": {
-        title: "Dissolved Oxygen 2",
-        value: 0,
-    },
-    "bio-turbidity-gauge2": {
-        title: "Turbidity 2",
-        value: 0,
-    },
-    "bio-pro-gauge1": {
-        title: "Pasteurization",
-        value: 0,
-    },
-    "bio-pro-gauge2": {
-        title: "Dryer",
-        value: 0,
-    },
-}
-var motorGaugeInfo = {
-    "bio-stirring-gauge1": {
-        title: "Stirring Motor 1",
-    },
-    "bio-pump1-gauge1": {
-        title: "Base Pump 1",
-    },
-    "bio-pump2-gauge1": {
-        title: "Acid Pump 1",
-    },
-    "bio-pump3-gauge1": {
-        title: "Water Pump",
-    },
-    "bio-pump4-gauge1": {
-        title: "Spent Media Pump",
-    },
-    "bio-stirring-gauge2": {
-        title: "Stirring Motor 2",
-    },
-    "bio-pump1-gauge2": {
-        title: "Base Pump 2",
-    },
-    "bio-pump2-gauge2": {
-        title: "Acid Pump 2",
-    },
-    "bio-pump3-gauge2": {
-        title: "Harvest Pump",
-    },
-    "bio-pump4-gauge2": {
-        title: "TFF Pump",
-    },
-    "chem-pump1-gauge1": {
-        title: "Ammon. Hydrox. Loading"
-    },
-    "chem-pump2-gauge1": {
-        title: "Liquid Transfer"
-    },
-    "chem-pump3-gauge1": {
-        title: "Water Dilute"
-    },
-    "chem-pump4-gauge1": {
-        title: "Reactor Wash"
-    }
-}
-//create new gauge plots
-Plotly.newPlot('bio-thermo-gauge1', thermo_bio_gauge, gaugeLayout);
-Plotly.newPlot('bio-thermo-gauge2', thermo_bio_gauge, gaugeLayout);
-
-Plotly.newPlot('bio-ph-gauge1', pH_gauge, gaugeLayout);
-Plotly.newPlot('bio-ph-gauge2', pH_gauge, gaugeLayout);
-
-Plotly.newPlot('bio-oxygen-gauge1', oxygen_gauge, gaugeLayout);
-Plotly.newPlot('bio-oxygen-gauge2', oxygen_gauge, gaugeLayout);
-
-Plotly.newPlot('bio-turbidity-gauge1', turbidity_gauge, gaugeLayout);
-Plotly.newPlot('bio-turbidity-gauge2', turbidity_gauge, gaugeLayout);
-
-Plotly.newPlot("bio-stirring-gauge1", motor_gauge, gaugeLayout);
-Plotly.newPlot("bio-stirring-gauge2", motor_gauge, gaugeLayout);
-
-Plotly.newPlot("bio-pump1-gauge1", motor_gauge, gaugeLayout);
-Plotly.newPlot("bio-pump2-gauge1", motor_gauge, gaugeLayout);
-Plotly.newPlot("bio-pump3-gauge1", motor_gauge, gaugeLayout);
-Plotly.newPlot("bio-pump4-gauge1", motor_gauge, gaugeLayout);
-Plotly.newPlot("bio-pump1-gauge2", motor_gauge, gaugeLayout);
-Plotly.newPlot("bio-pump2-gauge2", motor_gauge, gaugeLayout);
-Plotly.newPlot("bio-pump3-gauge2", motor_gauge, gaugeLayout);
-Plotly.newPlot("bio-pump4-gauge2", motor_gauge, gaugeLayout);
-
-Plotly.newPlot('bio-pro-gauge1', thermo_gauge, gaugeLayout);
-Plotly.newPlot('bio-pro-gauge2', thermo_gauge, gaugeLayout);
-
-//restyle
-Plotly.restyle('bio-thermo-gauge1', {title: bioGaugeInfo["bio-thermo-gauge1"].title})
-Plotly.restyle('bio-thermo-gauge2', {title: bioGaugeInfo["bio-thermo-gauge2"].title})
-Plotly.restyle('bio-ph-gauge1', {title: bioGaugeInfo["bio-ph-gauge1"].title})
-Plotly.restyle('bio-ph-gauge2', {title: bioGaugeInfo["bio-ph-gauge2"].title})
-Plotly.restyle('bio-oxygen-gauge1', {title: bioGaugeInfo["bio-oxygen-gauge1"].title})
-Plotly.restyle('bio-oxygen-gauge2', {title: bioGaugeInfo["bio-oxygen-gauge2"].title})
-Plotly.restyle('bio-turbidity-gauge1', {title: bioGaugeInfo["bio-turbidity-gauge1"].title})
-Plotly.restyle('bio-turbidity-gauge2', {title: bioGaugeInfo["bio-turbidity-gauge2"].title})
-
-Plotly.restyle("bio-stirring-gauge1", {title: motorGaugeInfo["bio-stirring-gauge1"].title})
-Plotly.restyle("bio-stirring-gauge2", {title: motorGaugeInfo["bio-stirring-gauge2"].title})
-
-Plotly.restyle("bio-pump1-gauge1", {title: motorGaugeInfo["bio-pump1-gauge1"].title})
-Plotly.restyle("bio-pump2-gauge1", {title: motorGaugeInfo["bio-pump2-gauge1"].title})
-Plotly.restyle("bio-pump3-gauge1", {title: motorGaugeInfo["bio-pump3-gauge1"].title})
-Plotly.restyle("bio-pump4-gauge1", {title: motorGaugeInfo["bio-pump4-gauge1"].title})
-
-Plotly.restyle("bio-pump1-gauge2", {title: motorGaugeInfo["bio-pump1-gauge2"].title})
-Plotly.restyle("bio-pump2-gauge2", {title: motorGaugeInfo["bio-pump2-gauge2"].title})
-Plotly.restyle("bio-pump3-gauge2", {title: motorGaugeInfo["bio-pump3-gauge2"].title})
-Plotly.restyle("bio-pump4-gauge2", {title: motorGaugeInfo["bio-pump4-gauge2"].title})
-
-Plotly.restyle('bio-pro-gauge1', {title: bioGaugeInfo["bio-pro-gauge1"].title})
-Plotly.restyle('bio-pro-gauge2', {title: bioGaugeInfo["bio-pro-gauge2"].title})
-
-//----------------Chemreactor Gauges-----------------------//
-var chemGaugeInfo = {
-    "chem-thermo-gauge1": {
-        title: "Reactor 1",
-        value: 0,
-        setpoint: 0
-    },
-    "chem-thermo-gauge2": {
-        title: "Reactor 2",
+    var bio_thermo_layout = {
+        title: 'Temperature Data',
+        xaxis: {
+            title: 'Time',
+            autorange: true,
+            rangeselector: {buttons: [
+                {
+                count: 1,
+                label: '1h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 6,
+                label: '6h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 12,
+                label: '12h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 24,
+                label: '24h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {step: 'all'}
+            ]},
+            type: 'date'
+        },
+        yaxis: {
+            title: 'Degrees Celsius'
+        },
+        showlegend: true
+    };
+
+    var chem_thermo_layout = {
+        title: 'Temperature Data',
+        xaxis: {
+            title: 'Time',
+            autorange: true,
+            rangeselector: {buttons: [
+                {
+                count: 1,
+                label: '1h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 6,
+                label: '6h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 12,
+                label: '12h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 24,
+                label: '24h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {step: 'all'}
+            ]},
+            type: 'date'
+        },
+        yaxis: {
+            title: 'Degrees Celsius'
+        },
+        showlegend: true
+    };
+
+    //----------------pH graph layout-----------------------//
+    var pH_layout = {
+        title: 'pH Data',
+        xaxis: {
+            title: 'Time',
+            autorange: true,
+            rangeselector: {buttons: [
+                {
+                count: 1,
+                label: '1h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 6,
+                label: '6h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 12,
+                label: '12h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 24,
+                label: '24h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {step: 'all'}
+            ]},
+            type: 'date'
+        },
+        yaxis: {
+            title: 'pH'
+        },
+        showlegend: true
+    };
+
+    //----------------Dissolved oxygen graph layout-----------------------//
+    var oxygen_layout = {
+        title: 'Dissolved Oxygen Data',
+        xaxis: {
+            title: 'Time',
+            autorange: true,
+            rangeselector: {buttons: [
+                {
+                count: 1,
+                label: '1h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 6,
+                label: '6h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 12,
+                label: '12h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 24,
+                label: '24h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {step: 'all'}
+            ]},
+            type: 'date'
+        },
+        yaxis: {
+            title: 'Dissolved Oxygen (mL)'
+        },
+        showlegend: true
+    };
+
+    //----------------Turbidity graph layout-----------------------//
+    var turbidity_layout = {
+        title: 'Turbidity Data',
+        xaxis: {
+            title: 'Time',
+            autorange: true,
+            rangeselector: {buttons: [
+                {
+                count: 1,
+                label: '1h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 6,
+                label: '6h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 12,
+                label: '12h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 24,
+                label: '24h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {step: 'all'}
+            ]},
+            type: 'date'
+        },
+        yaxis: {
+            title: 'Turbidity (NTU)'
+        },
+        showlegend: true
+    };
+
+    //----------------Post Processing graph layout-----------------------//
+    var pro_layout = {
+        title: 'Post Processing Data',
+        xaxis: {
+            title: 'Time',
+            autorange: true,
+            rangeselector: {buttons: [
+                {
+                count: 1,
+                label: '1h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 6,
+                label: '6h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 12,
+                label: '12h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {
+                count: 24,
+                label: '24h',
+                step: 'hour',
+                stepmode: 'backward'
+                },
+                {step: 'all'}
+            ]},
+            type: 'date'
+        },
+        yaxis: {
+            title: 'Degrees Celsius'
+        },
+        showlegend: true
+    };
+
+    //----------------Standard Gauge Layout-----------------------//
+    var gaugeLayout = { width: 270, height: 220, margin: { t: 0, b: 0, l: 40, r: 40} };
+
+    //----------------Thermocouple Gauge-----------------------//
+    var thermo_gauge = [{
+        domain: { x: [0, 1], y: [0, 1] },
         value: 0,
-        setpoint: 0
-    }
-}
-Plotly.newPlot("chem-thermo-gauge1", thermo_gauge, gaugeLayout);
-Plotly.newPlot("chem-thermo-gauge2", thermo_gauge, gaugeLayout);
-
-Plotly.newPlot("chem-pump1-gauge1", motor_gauge, gaugeLayout);
-Plotly.newPlot("chem-pump2-gauge1", motor_gauge, gaugeLayout);
-Plotly.newPlot("chem-pump3-gauge1", motor_gauge, gaugeLayout);
-Plotly.newPlot("chem-pump4-gauge1", motor_gauge, gaugeLayout);
-
-Plotly.restyle('chem-thermo-gauge1', {title: chemGaugeInfo["chem-thermo-gauge1"].title})
-Plotly.restyle('chem-thermo-gauge2', {title: chemGaugeInfo["chem-thermo-gauge2"].title})
-
-Plotly.restyle('chem-pump1-gauge1', {title: motorGaugeInfo["chem-pump1-gauge1"].title})
-Plotly.restyle('chem-pump2-gauge1', {title: motorGaugeInfo["chem-pump2-gauge1"].title})
-Plotly.restyle('chem-pump3-gauge1', {title: motorGaugeInfo["chem-pump3-gauge1"].title})
-Plotly.restyle('chem-pump4-gauge1', {title: motorGaugeInfo["chem-pump4-gauge1"].title})
-
-//--------------------------------------------------------------------------//
-
-function loadData() {
-    //Get Data	
-    fetch('pyrolysis-data.csv')
-    .then(response => response.text())
-    .then(text => {
-        let row = text.split("\r\n") //split entries by row
-
-        for(let n = 1; n < row.length; n++) {
-            let data = row[n].split(',')
-            for(let x = 0; x < pyrolysis_traces.length; x++) {
-                pyrolysis_traces[x].x.push(data[0])     //data[0] pushes time to the x axis
-                pyrolysis_traces[x].y.push(data[x+1])   //data[x+1] to avoid pushing the date and time
-            }
+        title: { text: "" },
+        type: "indicator",
+        mode: "gauge+number",
+        delta: { reference: 200 },
+        number: {'valueformat':'.1f'},
+        gauge: {
+            axis: { range: [null, 400] },
+            bar: { color: "blue" },
+            steps: [
+                { range: [0, 400], color: "#dddddd" },
+                { range: [145, 155], color: "yellow" },
+                { range: [195, 205], color: "green" },
+                { range: [245, 255], color: "red" }
+            ],
         }
+    }];
 
-        //Plot data
-        Plotly.newPlot('pyrolysis-thermo-graph', pyrolysis_traces, thermocouple_layout, {scrollZoom: true});                                
-    })
-
-    //load bioreactor data
-    fetch('bioreactor-data.csv')
-    .then(response => response.text())
-    .then(text => {
-        let row = text.split("\r\n") //split entries by row
-
-        for(let n = 1; n < row.length; n++) {
-            let data = row[n].split(',')
-            for(let x = 0; x < 2; x++) {
-                bio_thermo_traces[x].x.push(data[0])    //data[0] pushes time to the x axis
-                bio_ph_traces[x].x.push(data[0])        
-                bio_oxygen_traces[x].x.push(data[0])
-                bio_turbidity_traces[x].x.push(data[0])
-                bio_pro_traces[x].x.push(data[0])
-                
-                bio_thermo_traces[x].y.push(data[x*4+1]) 
-                bio_ph_traces[x].y.push(data[x*4+2])    
-                bio_oxygen_traces[x].y.push(data[x*4+3]) 
-                bio_turbidity_traces[x].y.push(data[x*4+4]) 
-                bio_pro_traces[x].y.push(data[x+9]) 
-            }
+    var thermo_bio_gauge = [{
+        domain: { x: [0, 1], y: [0, 1] },
+        value: 0,
+        title: { text: "" },
+        type: "indicator",
+        mode: "gauge+number",
+        delta: { reference: 200 },
+        number: {'valueformat':'.1f'},
+        gauge: {
+            axis: { range: [null, 400] },
+            bar: { color: "blue" },
+            steps: [
+                { range: [0, 400], color: "#dddddd" },
+            ],
         }
+    }];
 
-        //Plot data
-        Plotly.newPlot('bio-thermo-graph', bio_thermo_traces, bio_thermo_layout, {scrollZoom: true});                    
-        Plotly.newPlot('bio-ph-graph', bio_ph_traces, pH_layout, {scrollZoom: true});
-        Plotly.newPlot('bio-oxygen-graph', bio_oxygen_traces, oxygen_layout, {scrollZoom: true});
-        Plotly.newPlot('bio-turbidity-graph', bio_turbidity_traces, turbidity_layout, {scrollZoom: true});
-        Plotly.newPlot('bio-pro-graph', bio_pro_traces, pro_layout, {scrollZoom: true});
-    })
-
-    //load chemreactor data
-    fetch('chemreactor-data.csv')
-    .then(response => response.text())
-    .then(text => {
-        let row = text.split("\r\n") //split entries by row
-        for(let n = 1; n < row.length; n++) {
-            let data = row[n].split(',')
-            for(let x = 0; x < 2; x++) {
-                chem_thermo_traces[x].x.push(data[0])
-                chem_thermo_traces[x].y.push(data[x+1])
+    //----------------pH Gauge-----------------------//
+    var pH_gauge = [{
+        domain: { x: [0, 1], y: [0, 1] },
+        value: 0,
+        title: { text: "" },
+        type: "indicator",
+        mode: "gauge+number",
+        delta: { reference: 7},
+        number: {'valueformat':'.2f'},
+        gauge: {
+            axis: { range: [null, 14] },
+            bar: { color: "green" },
+            steps: [
+                { range: [0, 14], color: "#dddddd" },
+            ],
+            threshold: {
+                line: { color: "red", width: 4 },
+                thickness: 0.75,
+                value: 7
             }
         }
-        Plotly.newPlot('chem-thermo-graph', chem_thermo_traces, chem_thermo_layout, {scrollZoom: true});
-    })
-
-
-    //send time to ESP32
-    var now = new Date();
-    var rtcTime = now.toLocaleTimeString('en-US', {hour12: false}).split(":")
-    rtcTime[2] = parseInt(rtcTime[2])
-    var rtcDate = now.toLocaleDateString().split("/")
-    fetch(window.location.href + "get-variables", {
-        method: "POST",
-        headers: {
-        'Content-Type': 'text/plain',
-        },
-        body: rtcTime[2]+","+rtcTime[1]+","+rtcTime[0]+","+rtcDate[1]+","+rtcDate[0]+","+rtcDate[2],
-    })
-    .then(response => response.text()) // Get the response as text
-    .then(textData => {
-        let sections = textData.split('-')
-        if(sections[0] == "logging") {
-            logging = true;
-            document.getElementById("run").textContent = "Logging Data..."
-        } else if(sections[0] == "not logging") {
-            logging = false;
-            document.getElementById("run").textContent = "Start Logging Data"
-        }
+    }];
 
-        // load previous control parameters
-        console.log('Control Parameters: ', sections)
-
-        let pyrolysis = sections[1].split(',')
-        for(let x = 0; x < pyrolysis.length; x++) {
-            //p[0] setpoint, p[1] Kp, p[2] Ki, p[3] Kd
-            let p = pyrolysis[x].split('|')
-            let id = "pyrolysis-thermo-gauge" + (x+1)
-            document.getElementById(id + "-amount").value = p[0]
-            pyrolysisGaugeInfo[id].setpoint = p[0]
-            document.getElementById(id + "-kp").value = p[1]
-            document.getElementById(id + "-ki").value = p[2]
-            document.getElementById(id + "-kd").value = p[3]
-            updatePyrolysisGauge(id)
+    //----------------Dissolved Oxygen Gauge-----------------------//
+    var oxygen_gauge = [{
+        domain: { x: [0, 1], y: [0, 1] },
+        value: 0,
+        title: { text: "" },
+        type: "indicator",
+        mode: "gauge+number",
+        delta: { reference: 50 },
+        number: {'valueformat':'.2f'},
+        gauge: {
+            axis: { range: [null, 100] },
+            bar: { color: "green" },
+            steps: [
+                { range: [0, 100], color: "#dddddd" },
+            ],
         }
+    }];
 
-        let bioPh = sections[2].split(',')
-        for(let x = 0; x < bioPh.length; x++) {
-            let b = bioPh[x].split('|')
-            let id = "bio-ph-gauge" + (x+1)
-            document.getElementById(id + "-amount").value = b[0]
-            bioGaugeInfo[id].setpoint = b[0]
-            document.getElementById(id + "-kp").value = b[1]
-            document.getElementById(id + "-ki").value = b[2]
-            document.getElementById(id + "-kd").value = b[3]
-            updateBioPhGauge(id)
+    //----------------Turbidity Gauge-----------------------//
+    var turbidity_gauge = [{
+        domain: { x: [0, 1], y: [0, 1] },
+        value: 0,
+        title: { text: "" },
+        type: "indicator",
+        mode: "gauge+number",
+        delta: { reference: 1 },
+        number: {'valueformat':'.2f'},
+        gauge: {
+            axis: { range: [null, 6] },
+            bar: { color: "green" },
+            steps: [
+                { range: [0, 6], color: "#dddddd" },
+            ],
         }
+    }];
 
-        let turb = sections[3].split(',')
-        document.getElementById("bio-turbidity-gauge1-amount").value = turb[0]
-        document.getElementById("bio-turbidity-gauge2-amount").value = turb[1]
-        Plotly.restyle('bio-turbidity-gauge1', {title: bioGaugeInfo["bio-turbidity-gauge1"].title, value: turb[0]})
-        Plotly.restyle('bio-turbidity-gauge2', {title: bioGaugeInfo["bio-turbidity-gauge2"].title, value: turb[1]})
-
-        let bioPro = sections[4].split(',')
-        for(let x = 0; x < bioPro.length; x++) {
-            let b = bioPro[x].split('|')
-            let id = "bio-pro-gauge" + (x+1)
-            document.getElementById(id + "-amount").value = b[0]
-            bioGaugeInfo[id].setpoint = b[0]
-            document.getElementById(id + "-kp").value = b[1]
-            document.getElementById(id + "-ki").value = b[2]
-            document.getElementById(id + "-kd").value = b[3]
-            updateBioProGauge(id)
+    //----------------Motor Gauge-----------------------//
+    var motor_gauge = [{
+        domain: { x: [0, 1], y: [0, 1] },
+        value: 0,
+        title: { text: "" },
+        type: "indicator",
+        mode: "gauge+number",
+        delta: { reference: 50 },
+        gauge: {
+            axis: { range: [null, 100] },
+            bar: { color: "green" },
+            steps: [
+                { range: [0, 100], color: "#dddddd" },
+            ],
         }
+    }];
+
+    //----------------Pyrolysis Gauges-----------------------//
+    var pyrolysisGaugeInfo = {
+        "pyrolysis-thermo-gauge1": {
+            title: "Dissolution Tank",
+            setpoint: 200,
+            value: 0,
+        },
+        "pyrolysis-thermo-gauge2": {
+            title: "Valve",
+            setpoint: 200,
+            value: 0,
+        },
+        "pyrolysis-thermo-gauge3": {
+            title: "Char Chamber",
+            setpoint: 200,
+            value: 0,
+        },
+        "pyrolysis-thermo-gauge4": {
+            title: "Secondary Reactor",
+            setpoint: 200,
+            value: 0,
+        },
+        "pyrolysis-thermo-gauge5": {
+            title: "Knockout Drum",
+            setpoint: 200,
+            value: 0,
+        },
+        "pyrolysis-thermo-gauge6": {
+            title: "Condenser 0 Heater",
+            setpoint: 200,
+            value: 0,
+        },
+        "pyrolysis-thermo-gauge7": {
+            title: "Condenser 0 Fan",
+            setpoint: 200,
+            value: 0,
+        },
+        "pyrolysis-thermo-gauge8": {
+            title: "Condenser 1 Heater",
+            setpoint: 200,
+            value: 0,
+        },
+        "pyrolysis-thermo-gauge9": {
+            title: "Condenser 1 Fan",
+            setpoint: 200,
+            value: 0,
+        },
+        "pyrolysis-thermo-gauge10": {
+            title: "Condenser 2 Fan",
+            setpoint: 200,
+            value: 0,
+        },
+    }
+    function openPage(pageName, elmnt, color) {
+    // Hide all elements with class="tabcontent" by default */
+    var i, tabcontent, tablinks;
+    tabcontent = document.getElementsByClassName("tabcontent");
+    for (i = 0; i < tabcontent.length; i++) {
+        tabcontent[i].style.display = "none";
+    }
+
+    // Remove the background color of all tablinks/buttons
+    tablinks = document.getElementsByClassName("tablink");
+    for (i = 0; i < tablinks.length; i++) {
+        tablinks[i].style.backgroundColor = "";
+    }
+
+    // Show the specific tab content
+    document.getElementById(pageName).style.display = "block";
+
+    // Add the specific color to the button used to open the tab content
+    elmnt.style.backgroundColor = color;
+    }
 
-        let bio = sections[5].split(',')
-        document.getElementById("bio-stirring-gauge1-amount").value = bio[0]
-        document.getElementById("bio-stirring-gauge2-amount").value = bio[6]
-        Plotly.restyle('bio-stirring-gauge1', {title: motorGaugeInfo["bio-stirring-gauge1"].title, value: bio[0]})
-        Plotly.restyle('bio-stirring-gauge2', {title: motorGaugeInfo["bio-stirring-gauge2"].title, value: bio[6]})
-        for(let x = 0; x < 4; x++) {
-            let id = "bio-pump" + (x+1) + "-gauge1" 
-            document.getElementById(id + "-amount").value = bio[x+1]
-            Plotly.restyle(id, {title: motorGaugeInfo[id].title, value: bio[x+1]})
+    // Get the element with id="defaultOpen" and click on it
+    document.getElementById("defaultOpen").click();
+
+    //create new gauge plots
+    Plotly.newPlot('pyrolysis-thermo-gauge1', thermo_gauge, gaugeLayout);
+    Plotly.newPlot('pyrolysis-thermo-gauge2', thermo_gauge, gaugeLayout);
+    Plotly.newPlot('pyrolysis-thermo-gauge3', thermo_gauge, gaugeLayout);
+    Plotly.newPlot('pyrolysis-thermo-gauge4', thermo_gauge, gaugeLayout);
+    Plotly.newPlot('pyrolysis-thermo-gauge5', thermo_gauge, gaugeLayout);
+    Plotly.newPlot('pyrolysis-thermo-gauge6', thermo_gauge, gaugeLayout);
+    Plotly.newPlot('pyrolysis-thermo-gauge7', thermo_gauge, gaugeLayout);
+    Plotly.newPlot('pyrolysis-thermo-gauge8', thermo_gauge, gaugeLayout);
+    Plotly.newPlot('pyrolysis-thermo-gauge9', thermo_gauge, gaugeLayout);
+    Plotly.newPlot('pyrolysis-thermo-gauge10', thermo_gauge, gaugeLayout);
+
+    //adjust titles
+    Plotly.restyle('pyrolysis-thermo-gauge1', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge1'].title})
+    Plotly.restyle('pyrolysis-thermo-gauge2', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge2'].title})
+    Plotly.restyle('pyrolysis-thermo-gauge3', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge3'].title})
+    Plotly.restyle('pyrolysis-thermo-gauge4', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge4'].title})
+    Plotly.restyle('pyrolysis-thermo-gauge5', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge5'].title})
+    Plotly.restyle('pyrolysis-thermo-gauge6', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge6'].title})
+    Plotly.restyle('pyrolysis-thermo-gauge7', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge7'].title})
+    Plotly.restyle('pyrolysis-thermo-gauge8', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge8'].title})
+    Plotly.restyle('pyrolysis-thermo-gauge9', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge9'].title})
+    Plotly.restyle('pyrolysis-thermo-gauge10', {title: pyrolysisGaugeInfo['pyrolysis-thermo-gauge10'].title})
+
+    //----------------Bioreactor Gauges-----------------------//
+    var bioGaugeInfo = {
+        "bio-thermo-gauge1": {
+            title: "Thermocouple 1",
+            value: 0,
+        },
+        "bio-ph-gauge1": {
+            title: "pH Sensor 1",
+            value: 0,
+            setpoint: 0,
+        },
+        "bio-oxygen-gauge1": {
+            title: "Dissolved Oxygen 1",
+            value: 0,
+        },
+        "bio-turbidity-gauge1": {
+            title: "Turbidity 1",
+            value: 0,
+        },
+        "bio-thermo-gauge2": {
+            title: "Thermocouple 2",
+            value: 0,
+        },
+        "bio-ph-gauge2": {
+            title: "pH Sensor 2",
+            value: 0,
+            setpoint: 0,
+        },
+        "bio-oxygen-gauge2": {
+            title: "Dissolved Oxygen 2",
+            value: 0,
+        },
+        "bio-turbidity-gauge2": {
+            title: "Turbidity 2",
+            value: 0,
+        },
+        "bio-pro-gauge1": {
+            title: "Pasteurization",
+            value: 0,
+        },
+        "bio-pro-gauge2": {
+            title: "Dryer",
+            value: 0,
+        },
+    }
+    var motorGaugeInfo = {
+        "bio-stirring-gauge1": {
+            title: "Stirring Motor 1",
+        },
+        "bio-pump1-gauge1": {
+            title: "Base Pump 1",
+        },
+        "bio-pump2-gauge1": {
+            title: "Acid Pump 1",
+        },
+        "bio-pump3-gauge1": {
+            title: "Water Pump",
+        },
+        "bio-pump4-gauge1": {
+            title: "Spent Media Pump",
+        },
+        "bio-stirring-gauge2": {
+            title: "Stirring Motor 2",
+        },
+        "bio-pump1-gauge2": {
+            title: "Base Pump 2",
+        },
+        "bio-pump2-gauge2": {
+            title: "Acid Pump 2",
+        },
+        "bio-pump3-gauge2": {
+            title: "Harvest Pump",
+        },
+        "bio-pump4-gauge2": {
+            title: "TFF Pump",
+        },
+        "chem-pump1-gauge1": {
+            title: "Ammon. Hydrox. Loading"
+        },
+        "chem-pump2-gauge1": {
+            title: "Liquid Transfer"
+        },
+        "chem-pump3-gauge1": {
+            title: "Water Dilute"
+        },
+        "chem-pump4-gauge1": {
+            title: "Reactor Wash"
         }
-        for(let x = 0; x < 4; x++) {
-            let id = "bio-pump" + (x+1) + "-gauge2"
-            document.getElementById(id + "-amount").value = bio[x+5]
-            Plotly.restyle(id, {title: motorGaugeInfo[id].title, value: bio[x+7]})
+    }
+    //create new gauge plots
+    Plotly.newPlot('bio-thermo-gauge1', thermo_bio_gauge, gaugeLayout);
+    Plotly.newPlot('bio-thermo-gauge2', thermo_bio_gauge, gaugeLayout);
+
+    Plotly.newPlot('bio-ph-gauge1', pH_gauge, gaugeLayout);
+    Plotly.newPlot('bio-ph-gauge2', pH_gauge, gaugeLayout);
+
+    Plotly.newPlot('bio-oxygen-gauge1', oxygen_gauge, gaugeLayout);
+    Plotly.newPlot('bio-oxygen-gauge2', oxygen_gauge, gaugeLayout);
+
+    Plotly.newPlot('bio-turbidity-gauge1', turbidity_gauge, gaugeLayout);
+    Plotly.newPlot('bio-turbidity-gauge2', turbidity_gauge, gaugeLayout);
+
+    Plotly.newPlot("bio-stirring-gauge1", motor_gauge, gaugeLayout);
+    Plotly.newPlot("bio-stirring-gauge2", motor_gauge, gaugeLayout);
+
+    Plotly.newPlot("bio-pump1-gauge1", motor_gauge, gaugeLayout);
+    Plotly.newPlot("bio-pump2-gauge1", motor_gauge, gaugeLayout);
+    Plotly.newPlot("bio-pump3-gauge1", motor_gauge, gaugeLayout);
+    Plotly.newPlot("bio-pump4-gauge1", motor_gauge, gaugeLayout);
+    Plotly.newPlot("bio-pump1-gauge2", motor_gauge, gaugeLayout);
+    Plotly.newPlot("bio-pump2-gauge2", motor_gauge, gaugeLayout);
+    Plotly.newPlot("bio-pump3-gauge2", motor_gauge, gaugeLayout);
+    Plotly.newPlot("bio-pump4-gauge2", motor_gauge, gaugeLayout);
+
+    Plotly.newPlot('bio-pro-gauge1', thermo_gauge, gaugeLayout);
+    Plotly.newPlot('bio-pro-gauge2', thermo_gauge, gaugeLayout);
+
+    //restyle
+    Plotly.restyle('bio-thermo-gauge1', {title: bioGaugeInfo["bio-thermo-gauge1"].title})
+    Plotly.restyle('bio-thermo-gauge2', {title: bioGaugeInfo["bio-thermo-gauge2"].title})
+    Plotly.restyle('bio-ph-gauge1', {title: bioGaugeInfo["bio-ph-gauge1"].title})
+    Plotly.restyle('bio-ph-gauge2', {title: bioGaugeInfo["bio-ph-gauge2"].title})
+    Plotly.restyle('bio-oxygen-gauge1', {title: bioGaugeInfo["bio-oxygen-gauge1"].title})
+    Plotly.restyle('bio-oxygen-gauge2', {title: bioGaugeInfo["bio-oxygen-gauge2"].title})
+    Plotly.restyle('bio-turbidity-gauge1', {title: bioGaugeInfo["bio-turbidity-gauge1"].title})
+    Plotly.restyle('bio-turbidity-gauge2', {title: bioGaugeInfo["bio-turbidity-gauge2"].title})
+
+    Plotly.restyle("bio-stirring-gauge1", {title: motorGaugeInfo["bio-stirring-gauge1"].title})
+    Plotly.restyle("bio-stirring-gauge2", {title: motorGaugeInfo["bio-stirring-gauge2"].title})
+
+    Plotly.restyle("bio-pump1-gauge1", {title: motorGaugeInfo["bio-pump1-gauge1"].title})
+    Plotly.restyle("bio-pump2-gauge1", {title: motorGaugeInfo["bio-pump2-gauge1"].title})
+    Plotly.restyle("bio-pump3-gauge1", {title: motorGaugeInfo["bio-pump3-gauge1"].title})
+    Plotly.restyle("bio-pump4-gauge1", {title: motorGaugeInfo["bio-pump4-gauge1"].title})
+
+    Plotly.restyle("bio-pump1-gauge2", {title: motorGaugeInfo["bio-pump1-gauge2"].title})
+    Plotly.restyle("bio-pump2-gauge2", {title: motorGaugeInfo["bio-pump2-gauge2"].title})
+    Plotly.restyle("bio-pump3-gauge2", {title: motorGaugeInfo["bio-pump3-gauge2"].title})
+    Plotly.restyle("bio-pump4-gauge2", {title: motorGaugeInfo["bio-pump4-gauge2"].title})
+
+    Plotly.restyle('bio-pro-gauge1', {title: bioGaugeInfo["bio-pro-gauge1"].title})
+    Plotly.restyle('bio-pro-gauge2', {title: bioGaugeInfo["bio-pro-gauge2"].title})
+
+    //----------------Chemreactor Gauges-----------------------//
+    var chemGaugeInfo = {
+        "chem-thermo-gauge1": {
+            title: "Reactor 1",
+            value: 0,
+            setpoint: 0
+        },
+        "chem-thermo-gauge2": {
+            title: "Reactor 2",
+            value: 0,
+            setpoint: 0
         }
+    }
+    Plotly.newPlot("chem-thermo-gauge1", thermo_gauge, gaugeLayout);
+    Plotly.newPlot("chem-thermo-gauge2", thermo_gauge, gaugeLayout);
+
+    Plotly.newPlot("chem-pump1-gauge1", motor_gauge, gaugeLayout);
+    Plotly.newPlot("chem-pump2-gauge1", motor_gauge, gaugeLayout);
+    Plotly.newPlot("chem-pump3-gauge1", motor_gauge, gaugeLayout);
+    Plotly.newPlot("chem-pump4-gauge1", motor_gauge, gaugeLayout);
+
+    Plotly.restyle('chem-thermo-gauge1', {title: chemGaugeInfo["chem-thermo-gauge1"].title})
+    Plotly.restyle('chem-thermo-gauge2', {title: chemGaugeInfo["chem-thermo-gauge2"].title})
+
+    Plotly.restyle('chem-pump1-gauge1', {title: motorGaugeInfo["chem-pump1-gauge1"].title})
+    Plotly.restyle('chem-pump2-gauge1', {title: motorGaugeInfo["chem-pump2-gauge1"].title})
+    Plotly.restyle('chem-pump3-gauge1', {title: motorGaugeInfo["chem-pump3-gauge1"].title})
+    Plotly.restyle('chem-pump4-gauge1', {title: motorGaugeInfo["chem-pump4-gauge1"].title})
+
+    //--------------------------------------------------------------------------//
+
+    function loadData() {
+        //Get Data	
+        fetch('pyrolysis-data.csv')
+        .then(response => response.text())
+        .then(text => {
+            let row = text.split("\r\n") //split entries by row
+
+            for(let n = 1; n < row.length; n++) {
+                let data = row[n].split(',')
+                for(let x = 0; x < pyrolysis_traces.length; x++) {
+                    pyrolysis_traces[x].x.push(data[0])     //data[0] pushes time to the x axis
+                    pyrolysis_traces[x].y.push(data[x+1])   //data[x+1] to avoid pushing the date and time
+                }
+            }
 
-        let chem = sections[6].split(',')
-        document.getElementById("chem-pump1-gauge1-amount").value = parseInt(chem[0])
-        document.getElementById("chem-pump2-gauge1-amount").value = parseInt(chem[1])
-        document.getElementById("chem-pump3-gauge1-amount").value = parseInt(chem[2])
-        document.getElementById("chem-pump4-gauge1-amount").value = parseInt(chem[3])
-
-        Plotly.restyle('chem-pump1-gauge1', {title: motorGaugeInfo["chem-pump1-gauge1"].title, value: parseInt(chem[0])})
-        Plotly.restyle('chem-pump2-gauge1', {title: motorGaugeInfo["chem-pump2-gauge1"].title, value: parseInt(chem[1])})
-        Plotly.restyle('chem-pump3-gauge1', {title: motorGaugeInfo["chem-pump3-gauge1"].title, value: parseInt(chem[2])})
-        Plotly.restyle('chem-pump4-gauge1', {title: motorGaugeInfo["chem-pump4-gauge1"].title, value: parseInt(chem[3])})
-
-        let chemThermo = sections[7].split(',')
-        for(let x = 0; x < chemThermo.length; x++) {
-            let c = chemThermo[x].split('|')
-            let id = "chem-thermo-gauge" + (x+1)
-            document.getElementById(id + "-amount").value = c[0]
-            chemGaugeInfo[id].setpoint = c[0]
-            document.getElementById(id + "-kp").value = c[1]
-            document.getElementById(id + "-ki").value = c[2]
-            document.getElementById(id + "-kd").value = c[3]
-            updateChemGauge(id)
-        }
-        
-    })
-}
+            //Plot data
+            Plotly.newPlot('pyrolysis-thermo-graph', pyrolysis_traces, thermocouple_layout, {scrollZoom: true});                                
+        })
+
+        //load bioreactor data
+        fetch('bioreactor-data.csv')
+        .then(response => response.text())
+        .then(text => {
+            let row = text.split("\r\n") //split entries by row
+
+            for(let n = 1; n < row.length; n++) {
+                let data = row[n].split(',')
+                for(let x = 0; x < 2; x++) {
+                    bio_thermo_traces[x].x.push(data[0])    //data[0] pushes time to the x axis
+                    bio_ph_traces[x].x.push(data[0])        
+                    bio_oxygen_traces[x].x.push(data[0])
+                    bio_turbidity_traces[x].x.push(data[0])
+                    bio_pro_traces[x].x.push(data[0])
+                    
+                    bio_thermo_traces[x].y.push(data[x*4+1]) 
+                    bio_ph_traces[x].y.push(data[x*4+2])    
+                    bio_oxygen_traces[x].y.push(data[x*4+3]) 
+                    bio_turbidity_traces[x].y.push(data[x*4+4]) 
+                    bio_pro_traces[x].y.push(data[x+9]) 
+                }
+            }
 
-var pUpdateCounter = 2;
-var bUpdateCounter = 2;
-var cUpdateCounter = 2;
+            //Plot data
+            Plotly.newPlot('bio-thermo-graph', bio_thermo_traces, bio_thermo_layout, {scrollZoom: true});                    
+            Plotly.newPlot('bio-ph-graph', bio_ph_traces, pH_layout, {scrollZoom: true});
+            Plotly.newPlot('bio-oxygen-graph', bio_oxygen_traces, oxygen_layout, {scrollZoom: true});
+            Plotly.newPlot('bio-turbidity-graph', bio_turbidity_traces, turbidity_layout, {scrollZoom: true});
+            Plotly.newPlot('bio-pro-graph', bio_pro_traces, pro_layout, {scrollZoom: true});
+        })
 
-if (!!window.EventSource) {
-    var source = new EventSource('/events');
+        //load chemreactor data
+        fetch('chemreactor-data.csv')
+        .then(response => response.text())
+        .then(text => {
+            let row = text.split("\r\n") //split entries by row
+            for(let n = 1; n < row.length; n++) {
+                let data = row[n].split(',')
+                for(let x = 0; x < 2; x++) {
+                    chem_thermo_traces[x].x.push(data[0])
+                    chem_thermo_traces[x].y.push(data[x+1])
+                }
+            }
+            Plotly.newPlot('chem-thermo-graph', chem_thermo_traces, chem_thermo_layout, {scrollZoom: true});
+        })
 
-    source.addEventListener('open', function(e) {
-        console.log("Events Connected");
-        document.getElementById("connection").style.backgroundColor = "green"; // Change this to the desired color when connected
-    }, false);
 
-    source.addEventListener('error', function(e) {
-        if (e.target.readyState != EventSource.OPEN) {
-            console.log("Events Disconnected");
-            document.getElementById("connection").style.backgroundColor = "red"; // Change this to the desired color when disconnected
-        }
-    }, false);
-
-    source.addEventListener('pyrolysis-readings', function(e) {
-        var pyrolysisVals = e.data.split(',')
-
-        pyrolysisGaugeInfo["pyrolysis-thermo-gauge1"].value = pyrolysisVals[1];   //DT
-        pyrolysisGaugeInfo["pyrolysis-thermo-gauge2"].value = pyrolysisVals[3];   // V
-        pyrolysisGaugeInfo["pyrolysis-thermo-gauge3"].value = pyrolysisVals[4];   // CC
-        pyrolysisGaugeInfo["pyrolysis-thermo-gauge4"].value = pyrolysisVals[5];   // SR
-        pyrolysisGaugeInfo["pyrolysis-thermo-gauge5"].value = pyrolysisVals[6];   // KD
-        pyrolysisGaugeInfo["pyrolysis-thermo-gauge6"].value = pyrolysisVals[7];   // C0H
-        pyrolysisGaugeInfo["pyrolysis-thermo-gauge7"].value = pyrolysisVals[7];   // C0F
-        pyrolysisGaugeInfo["pyrolysis-thermo-gauge8"].value = pyrolysisVals[8];   // C1H
-        pyrolysisGaugeInfo["pyrolysis-thermo-gauge9"].value = pyrolysisVals[8];   // C1F
-        pyrolysisGaugeInfo["pyrolysis-thermo-gauge10"].value = pyrolysisVals[9];  // C2F
-        
-        let ids = Object.keys(pyrolysisGaugeInfo)
-        ids.forEach((id) => {
-            updatePyrolysisGauge(id)
+        //send time to ESP32
+        var now = new Date();
+        var rtcTime = now.toLocaleTimeString('en-US', {hour12: false}).split(":")
+        rtcTime[2] = parseInt(rtcTime[2])
+        var rtcDate = now.toLocaleDateString().split("/")
+        fetch(window.location.href + "get-variables", {
+            method: "POST",
+            headers: {
+            'Content-Type': 'text/plain',
+            },
+            body: rtcTime[2]+","+rtcTime[1]+","+rtcTime[0]+","+rtcDate[1]+","+rtcDate[0]+","+rtcDate[2],
         })
-        
-        //plot values
-        if(logging) {
-            pUpdateCounter += 1
-            //could use a for loop but I only want to call extendTraces once
-            if(pUpdateCounter >= 2) {
-                pUpdateCounter = 0
-                Plotly.extendTraces('pyrolysis-thermo-graph', {
-                    x: [[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]]],
-                    y: [[pyrolysisVals[1]],[pyrolysisVals[2]],[pyrolysisVals[3]],[pyrolysisVals[4]],[pyrolysisVals[5]],[pyrolysisVals[6]],[pyrolysisVals[7]],[pyrolysisVals[8]],[pyrolysisVals[9]]]
-                }, [0, 1, 2, 3, 4, 5, 6, 7, 8])
+        .then(response => response.text()) // Get the response as text
+        .then(textData => {
+            let sections = textData.split('-')
+            if(sections[0] == "logging") {
+                logging = true;
+                document.getElementById("run").textContent = "Logging Data..."
+            } else if(sections[0] == "not logging") {
+                logging = false;
+                document.getElementById("run").textContent = "Start Logging Data"
             }
 
-            if(document.getElementById('pyrolysis-tracking').textContent == 'Tracking Data...') {
-                trackData(document.getElementById('pyrolysis-tracking-amount').value, 'pyrolysis-thermo-graph')
+            // load previous control parameters
+            console.log('Control Parameters: ', sections)
+
+            let pyrolysis = sections[1].split(',')
+            for(let x = 0; x < pyrolysis.length; x++) {
+                //p[0] setpoint, p[1] Kp, p[2] Ki, p[3] Kd
+                let p = pyrolysis[x].split('|')
+                let id = "pyrolysis-thermo-gauge" + (x+1)
+                document.getElementById(id + "-amount").value = p[0]
+                pyrolysisGaugeInfo[id].setpoint = p[0]
+                document.getElementById(id + "-kp").value = p[1]
+                document.getElementById(id + "-ki").value = p[2]
+                document.getElementById(id + "-kd").value = p[3]
+                updatePyrolysisGauge(id)
             }
-            if(document.getElementById('bio-thermo-tracking').textContent == 'Tracking Data...') {
-                trackData(document.getElementById('bio-thermo-tracking-amount').value, 'bio-thermo-graph')
+
+            let bioPh = sections[2].split(',')
+            for(let x = 0; x < bioPh.length; x++) {
+                let b = bioPh[x].split('|')
+                let id = "bio-ph-gauge" + (x+1)
+                document.getElementById(id + "-amount").value = b[0]
+                bioGaugeInfo[id].setpoint = b[0]
+                document.getElementById(id + "-kp").value = b[1]
+                document.getElementById(id + "-ki").value = b[2]
+                document.getElementById(id + "-kd").value = b[3]
+                updateBioPhGauge(id)
             }
-            if(document.getElementById('bio-ph-tracking').textContent == 'Tracking Data...') {
-                trackData(document.getElementById('bio-ph-tracking-amount').value, 'bio-ph-graph')
+
+            let turb = sections[3].split(',')
+            document.getElementById("bio-turbidity-gauge1-amount").value = turb[0]
+            document.getElementById("bio-turbidity-gauge2-amount").value = turb[1]
+            Plotly.restyle('bio-turbidity-gauge1', {title: bioGaugeInfo["bio-turbidity-gauge1"].title, value: turb[0]})
+            Plotly.restyle('bio-turbidity-gauge2', {title: bioGaugeInfo["bio-turbidity-gauge2"].title, value: turb[1]})
+
+            let bioPro = sections[4].split(',')
+            for(let x = 0; x < bioPro.length; x++) {
+                let b = bioPro[x].split('|')
+                let id = "bio-pro-gauge" + (x+1)
+                document.getElementById(id + "-amount").value = b[0]
+                bioGaugeInfo[id].setpoint = b[0]
+                document.getElementById(id + "-kp").value = b[1]
+                document.getElementById(id + "-ki").value = b[2]
+                document.getElementById(id + "-kd").value = b[3]
+                updateBioProGauge(id)
             }
-            if(document.getElementById('bio-oxygen-tracking').textContent == 'Tracking Data...') {
-                trackData(document.getElementById('bio-oxygen-tracking-amount').value, 'bio-oxygen-graph')
+
+            let bio = sections[5].split(',')
+            document.getElementById("bio-stirring-gauge1-amount").value = bio[0]
+            document.getElementById("bio-stirring-gauge2-amount").value = bio[6]
+            Plotly.restyle('bio-stirring-gauge1', {title: motorGaugeInfo["bio-stirring-gauge1"].title, value: bio[0]})
+            Plotly.restyle('bio-stirring-gauge2', {title: motorGaugeInfo["bio-stirring-gauge2"].title, value: bio[6]})
+            for(let x = 0; x < 4; x++) {
+                let id = "bio-pump" + (x+1) + "-gauge1" 
+                document.getElementById(id + "-amount").value = bio[x+1]
+                Plotly.restyle(id, {title: motorGaugeInfo[id].title, value: bio[x+1]})
             }
-            if(document.getElementById('bio-turbidity-tracking').textContent == 'Tracking Data...') {
-                trackData(document.getElementById('bio-turbidity-tracking-amount').value, 'bio-turbidity-graph')
+            for(let x = 0; x < 4; x++) {
+                let id = "bio-pump" + (x+1) + "-gauge2"
+                document.getElementById(id + "-amount").value = bio[x+5]
+                Plotly.restyle(id, {title: motorGaugeInfo[id].title, value: bio[x+7]})
             }
-            if(document.getElementById('chem-thermo-tracking').textContent == 'Tracking Data...') {
-                trackData(document.getElementById('chem-thermo-tracking-amount').value, 'chem-thermo-graph')
+
+            let chem = sections[6].split(',')
+            document.getElementById("chem-pump1-gauge1-amount").value = parseInt(chem[0])
+            document.getElementById("chem-pump2-gauge1-amount").value = parseInt(chem[1])
+            document.getElementById("chem-pump3-gauge1-amount").value = parseInt(chem[2])
+            document.getElementById("chem-pump4-gauge1-amount").value = parseInt(chem[3])
+
+            Plotly.restyle('chem-pump1-gauge1', {title: motorGaugeInfo["chem-pump1-gauge1"].title, value: parseInt(chem[0])})
+            Plotly.restyle('chem-pump2-gauge1', {title: motorGaugeInfo["chem-pump2-gauge1"].title, value: parseInt(chem[1])})
+            Plotly.restyle('chem-pump3-gauge1', {title: motorGaugeInfo["chem-pump3-gauge1"].title, value: parseInt(chem[2])})
+            Plotly.restyle('chem-pump4-gauge1', {title: motorGaugeInfo["chem-pump4-gauge1"].title, value: parseInt(chem[3])})
+
+            let chemThermo = sections[7].split(',')
+            for(let x = 0; x < chemThermo.length; x++) {
+                let c = chemThermo[x].split('|')
+                let id = "chem-thermo-gauge" + (x+1)
+                document.getElementById(id + "-amount").value = c[0]
+                chemGaugeInfo[id].setpoint = c[0]
+                document.getElementById(id + "-kp").value = c[1]
+                document.getElementById(id + "-ki").value = c[2]
+                document.getElementById(id + "-kd").value = c[3]
+                updateChemGauge(id)
             }
-        }
-    }, false);
-
-    source.addEventListener('bioreactor-readings', function(e) {
-        var bioVals = e.data.split(',')
-
-        bioGaugeInfo["bio-thermo-gauge1"].value = bioVals[1]
-        bioGaugeInfo["bio-ph-gauge1"].value = bioVals[2]
-        bioGaugeInfo["bio-oxygen-gauge1"].value = bioVals[3]
-        bioGaugeInfo["bio-turbidity-gauge1"].value = bioVals[4]
-        bioGaugeInfo["bio-thermo-gauge2"].value = bioVals[5]
-        bioGaugeInfo["bio-ph-gauge2"].value = bioVals[6]
-        bioGaugeInfo["bio-oxygen-gauge2"].value = bioVals[7]
-        bioGaugeInfo["bio-turbidity-gauge2"].value = bioVals[8]
-        bioGaugeInfo["bio-pro-gauge1"].value = bioVals[9]
-        bioGaugeInfo["bio-pro-gauge2"].value = bioVals[10]
-
-        updateBioPhGauge("bio-ph-gauge1")
-        updateBioPhGauge("bio-ph-gauge2")
-        updateBioProGauge("bio-pro-gauge1")
-        updateBioProGauge("bio-pro-gauge2")
-
-        let ids = Object.keys(bioGaugeInfo)
-        ids.forEach((id) => {
-            Plotly.update(id, {
-                value: bioVals[ids.indexOf(id)+1], 
-                title: bioGaugeInfo[id].title, 
-                'gauge.bar.color': "blue",
-            })
+            
         })
+    }
 
-        //plot values
-        if(logging) {
-            bUpdateCounter += 1
-            if(bUpdateCounter >= 2) {
-                bUpdateCounter = 0
-                Plotly.extendTraces('bio-thermo-graph', {
-                    x: [[bioVals[0]],[bioVals[0]]],
-                    y: [[bioVals[1]],[bioVals[5]]]
-                }, [0, 1])
-                Plotly.extendTraces('bio-ph-graph', {
-                    x: [[bioVals[0]],[bioVals[0]]],
-                    y: [[bioVals[2]],[bioVals[6]]]
-                }, [0, 1])
-                Plotly.extendTraces('bio-oxygen-graph', {
-                    x: [[bioVals[0]],[bioVals[0]]],
-                    y: [[bioVals[3]],[bioVals[7]]]
-                }, [0, 1])
-                Plotly.extendTraces('bio-turbidity-graph', {
-                    x: [[bioVals[0]],[bioVals[0]]],
-                    y: [[bioVals[4]],[bioVals[8]]]
-                }, [0, 1])
-                Plotly.extendTraces('bio-pro-graph', {
-                    x: [[bioVals[0]],[bioVals[0]]],
-                    y: [[bioVals[9]],[bioVals[10]]]
-                }, [0, 1])
+    var pUpdateCounter = 2;
+    var bUpdateCounter = 2;
+    var cUpdateCounter = 2;
+
+    if (!!window.EventSource) {
+        var source = new EventSource('/events');
+
+        source.addEventListener('open', function(e) {
+            console.log("Events Connected");
+            document.getElementById("connection").style.backgroundColor = "green"; // Change this to the desired color when connected
+        }, false);
+
+        source.addEventListener('error', function(e) {
+            if (e.target.readyState != EventSource.OPEN) {
+                console.log("Events Disconnected");
+                document.getElementById("connection").style.backgroundColor = "red"; // Change this to the desired color when disconnected
             }
-        }
-    }, false)
+        }, false);
+
+        source.addEventListener('pyrolysis-readings', function(e) {
+            var pyrolysisVals = e.data.split(',')
+
+            pyrolysisGaugeInfo["pyrolysis-thermo-gauge1"].value = pyrolysisVals[1];   //DT
+            pyrolysisGaugeInfo["pyrolysis-thermo-gauge2"].value = pyrolysisVals[3];   // V
+            pyrolysisGaugeInfo["pyrolysis-thermo-gauge3"].value = pyrolysisVals[4];   // CC
+            pyrolysisGaugeInfo["pyrolysis-thermo-gauge4"].value = pyrolysisVals[5];   // SR
+            pyrolysisGaugeInfo["pyrolysis-thermo-gauge5"].value = pyrolysisVals[6];   // KD
+            pyrolysisGaugeInfo["pyrolysis-thermo-gauge6"].value = pyrolysisVals[7];   // C0H
+            pyrolysisGaugeInfo["pyrolysis-thermo-gauge7"].value = pyrolysisVals[7];   // C0F
+            pyrolysisGaugeInfo["pyrolysis-thermo-gauge8"].value = pyrolysisVals[8];   // C1H
+            pyrolysisGaugeInfo["pyrolysis-thermo-gauge9"].value = pyrolysisVals[8];   // C1F
+            pyrolysisGaugeInfo["pyrolysis-thermo-gauge10"].value = pyrolysisVals[9];  // C2F
+            
+            let ids = Object.keys(pyrolysisGaugeInfo)
+            ids.forEach((id) => {
+                updatePyrolysisGauge(id)
+            })
+            
+            //plot values
+            if(logging) {
+                pUpdateCounter += 1
+                //could use a for loop but I only want to call extendTraces once
+                if(pUpdateCounter >= 2) {
+                    pUpdateCounter = 0
+                    Plotly.extendTraces('pyrolysis-thermo-graph', {
+                        x: [[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]],[pyrolysisVals[0]]],
+                        y: [[pyrolysisVals[1]],[pyrolysisVals[2]],[pyrolysisVals[3]],[pyrolysisVals[4]],[pyrolysisVals[5]],[pyrolysisVals[6]],[pyrolysisVals[7]],[pyrolysisVals[8]],[pyrolysisVals[9]]]
+                    }, [0, 1, 2, 3, 4, 5, 6, 7, 8])
+                }
+
+                if(document.getElementById('pyrolysis-tracking').textContent == 'Tracking Data...') {
+                    trackData(document.getElementById('pyrolysis-tracking-amount').value, 'pyrolysis-thermo-graph')
+                }
+                if(document.getElementById('bio-thermo-tracking').textContent == 'Tracking Data...') {
+                    trackData(document.getElementById('bio-thermo-tracking-amount').value, 'bio-thermo-graph')
+                }
+                if(document.getElementById('bio-ph-tracking').textContent == 'Tracking Data...') {
+                    trackData(document.getElementById('bio-ph-tracking-amount').value, 'bio-ph-graph')
+                }
+                if(document.getElementById('bio-oxygen-tracking').textContent == 'Tracking Data...') {
+                    trackData(document.getElementById('bio-oxygen-tracking-amount').value, 'bio-oxygen-graph')
+                }
+                if(document.getElementById('bio-turbidity-tracking').textContent == 'Tracking Data...') {
+                    trackData(document.getElementById('bio-turbidity-tracking-amount').value, 'bio-turbidity-graph')
+                }
+                if(document.getElementById('chem-thermo-tracking').textContent == 'Tracking Data...') {
+                    trackData(document.getElementById('chem-thermo-tracking-amount').value, 'chem-thermo-graph')
+                }
+            }
+        }, false);
+
+        source.addEventListener('bioreactor-readings', function(e) {
+            var bioVals = e.data.split(',')
+
+            bioGaugeInfo["bio-thermo-gauge1"].value = bioVals[1]
+            bioGaugeInfo["bio-ph-gauge1"].value = bioVals[2]
+            bioGaugeInfo["bio-oxygen-gauge1"].value = bioVals[3]
+            bioGaugeInfo["bio-turbidity-gauge1"].value = bioVals[4]
+            bioGaugeInfo["bio-thermo-gauge2"].value = bioVals[5]
+            bioGaugeInfo["bio-ph-gauge2"].value = bioVals[6]
+            bioGaugeInfo["bio-oxygen-gauge2"].value = bioVals[7]
+            bioGaugeInfo["bio-turbidity-gauge2"].value = bioVals[8]
+            bioGaugeInfo["bio-pro-gauge1"].value = bioVals[9]
+            bioGaugeInfo["bio-pro-gauge2"].value = bioVals[10]
+
+            updateBioPhGauge("bio-ph-gauge1")
+            updateBioPhGauge("bio-ph-gauge2")
+            updateBioProGauge("bio-pro-gauge1")
+            updateBioProGauge("bio-pro-gauge2")
+
+            let ids = Object.keys(bioGaugeInfo)
+            ids.forEach((id) => {
+                Plotly.update(id, {
+                    value: bioVals[ids.indexOf(id)+1], 
+                    title: bioGaugeInfo[id].title, 
+                    'gauge.bar.color': "blue",
+                })
+            })
 
-    source.addEventListener('chemreactor-readings', function(e) {
-        var chemVals = e.data.split(',')
+            //plot values
+            if(logging) {
+                bUpdateCounter += 1
+                if(bUpdateCounter >= 2) {
+                    bUpdateCounter = 0
+                    Plotly.extendTraces('bio-thermo-graph', {
+                        x: [[bioVals[0]],[bioVals[0]]],
+                        y: [[bioVals[1]],[bioVals[5]]]
+                    }, [0, 1])
+                    Plotly.extendTraces('bio-ph-graph', {
+                        x: [[bioVals[0]],[bioVals[0]]],
+                        y: [[bioVals[2]],[bioVals[6]]]
+                    }, [0, 1])
+                    Plotly.extendTraces('bio-oxygen-graph', {
+                        x: [[bioVals[0]],[bioVals[0]]],
+                        y: [[bioVals[3]],[bioVals[7]]]
+                    }, [0, 1])
+                    Plotly.extendTraces('bio-turbidity-graph', {
+                        x: [[bioVals[0]],[bioVals[0]]],
+                        y: [[bioVals[4]],[bioVals[8]]]
+                    }, [0, 1])
+                    Plotly.extendTraces('bio-pro-graph', {
+                        x: [[bioVals[0]],[bioVals[0]]],
+                        y: [[bioVals[9]],[bioVals[10]]]
+                    }, [0, 1])
+                }
+            }
+        }, false)
 
-        chemGaugeInfo["chem-thermo-gauge1"].value = chemVals[1]
-        chemGaugeInfo["chem-thermo-gauge2"].value = chemVals[2]
+        source.addEventListener('chemreactor-readings', function(e) {
+            var chemVals = e.data.split(',')
 
-        let ids = Object.keys(chemGaugeInfo)
-        ids.forEach((id) => {
-            chemGaugeInfo[id].value = chemVals[ids.indexOf(id)+1]
-            updateChemGauge(id)
-        })
-        //Plotly.restyle('chem-thermo-gauge1', {value: chemVals[1], title: 'Thermocouple 1', 'gauge.bar.color': "blue"})
+            chemGaugeInfo["chem-thermo-gauge1"].value = chemVals[1]
+            chemGaugeInfo["chem-thermo-gauge2"].value = chemVals[2]
 
-        if(logging) {
-            cUpdateCounter += 1
-            if(cUpdateCounter >= 2) {
-                cUpdateCounter = 0
-                Plotly.extendTraces('chem-thermo-graph', {
-                    x: [[chemVals[0]],[chemVals[0]]],
-                    y: [[chemVals[1]], [chemVals[2]]]
-                }, [0, 1])
+            let ids = Object.keys(chemGaugeInfo)
+            ids.forEach((id) => {
+                chemGaugeInfo[id].value = chemVals[ids.indexOf(id)+1]
+                updateChemGauge(id)
+            })
+            //Plotly.restyle('chem-thermo-gauge1', {value: chemVals[1], title: 'Thermocouple 1', 'gauge.bar.color': "blue"})
+
+            if(logging) {
+                cUpdateCounter += 1
+                if(cUpdateCounter >= 2) {
+                    cUpdateCounter = 0
+                    Plotly.extendTraces('chem-thermo-graph', {
+                        x: [[chemVals[0]],[chemVals[0]]],
+                        y: [[chemVals[1]], [chemVals[2]]]
+                    }, [0, 1])
+                }
             }
+        }, false)
+    }
+
+    var logging = false;
+    function setRunning() {
+        logging = !logging
+        if(logging) {
+            document.getElementById("run").textContent = "Logging Data..."
+            sendPOST("logging", "logging")
+        } else {
+            document.getElementById("run").textContent = "Start Logging Data"
+            sendPOST("not logging", "not-logging")
         }
-    }, false)
-}
-
-var logging = false;
-function setRunning() {
-    logging = !logging
-    if(logging) {
-        document.getElementById("run").textContent = "Logging Data..."
-        sendPOST("logging", "logging")
-    } else {
-        document.getElementById("run").textContent = "Start Logging Data"
-        sendPOST("not logging", "not-logging")
     }
-}
-
-function setESTOP() {
-    if(document.getElementById("estop").textContent == 'E-STOP OFF') {
-        document.getElementById("estop").textContent = 'E-STOP ON'
-        sendPOST("estop on", "estop-on")
-    } else {
-        document.getElementById("estop").textContent = 'E-STOP OFF'
-        sendPOST("estop off", "estop-off")
+
+    function setESTOP() {
+        if(document.getElementById("estop").textContent == 'E-STOP OFF') {
+            document.getElementById("estop").textContent = 'E-STOP ON'
+            sendPOST("estop on", "estop-on")
+        } else {
+            document.getElementById("estop").textContent = 'E-STOP OFF'
+            sendPOST("estop off", "estop-off")
+        }
     }
-}
-
-function sendPOST(data, action) {
-    var url = window.location.href + action;
-    fetch(url, {
-        method: "POST",
-        headers: {
-        'Content-Type': 'text/plain',
-        },
-        body: String(data),
-    })
-    .then(response => response.text()) // Get the response as text
-    .then(textData => {
-        // Handle the data from the response
-        //console.log('Response Data:', textData);
-    })
-}
-
-function setTracking(buttonID, inputID, graphID) {
-    if(document.getElementById(buttonID).textContent == 'Track Data') {
-        document.getElementById(buttonID).textContent = 'Tracking Data...'
-        trackData(document.getElementById(inputID).value, graphID)
-    } else {
-        document.getElementById(buttonID).textContent = 'Track Data'
+
+    function sendPOST(data, action) {
+        var url = window.location.href + action;
+        fetch(url, {
+            method: "POST",
+            headers: {
+            'Content-Type': 'text/plain',
+            },
+            body: String(data),
+        })
+        .then(response => response.text()) // Get the response as text
+        .then(textData => {
+            // Handle the data from the response
+            //console.log('Response Data:', textData);
+        })
     }
-}
-function trackData(amount, graphID) {
-    let lastIndex = pyrolysis_traces[0].x.length-1
-    let currentDate = new Date(pyrolysis_traces[0].x[lastIndex])
-    Plotly.relayout(graphID, {"xaxis.range": [currentDate - amount*1000, currentDate]})
-}
-
-function setGaugeValue(amount, gaugeID) {
-    Plotly.update(gaugeID, {value: amount > 100 ? 100 : amount, title: motorGaugeInfo[gaugeID].title})
-}
-
-function updatePyrolysisGauge(gaugeID) {
-    let setpoint = parseFloat(pyrolysisGaugeInfo[gaugeID].setpoint)
-    let value = parseFloat(pyrolysisGaugeInfo[gaugeID].value)
-    function pickColor() {
-        if      (value < setpoint-50)   {return "yellow"}
-        else if (value > setpoint+50)   {return "red"}
-        else                            {return "green"}
+
+    function setTracking(buttonID, inputID, graphID) {
+        if(document.getElementById(buttonID).textContent == 'Track Data') {
+            document.getElementById(buttonID).textContent = 'Tracking Data...'
+            trackData(document.getElementById(inputID).value, graphID)
+        } else {
+            document.getElementById(buttonID).textContent = 'Track Data'
+        }
     }
-    let new_thermo_gauge = {
-        domain: { x: [0, 1], y: [0, 1] },
-        value: value,
-        title: { text: pyrolysisGaugeInfo[gaugeID].title },
-        type: "indicator",
-        mode: "gauge+number",
-        gauge: {
-            axis: { range: [0, setpoint*2] },
-            bar: { color: pickColor() },
-            steps: [
-                { range: [0, setpoint*2], color: "#dddddd" },
-                { range: [setpoint*(1-0.275), setpoint*(1-0.225)], color: "yellow" },
-                { range: [setpoint-(setpoint/40), setpoint+(setpoint/40)], color: "green" },
-                { range: [setpoint*(1+0.275), setpoint*(1+0.225)], color: "red" }
-            ],
+    function trackData(amount, graphID) {
+        let lastIndex = pyrolysis_traces[0].x.length-1
+        let currentDate = new Date(pyrolysis_traces[0].x[lastIndex])
+        Plotly.relayout(graphID, {"xaxis.range": [currentDate - amount*1000, currentDate]})
+    }
+
+    function setGaugeValue(amount, gaugeID) {
+        Plotly.update(gaugeID, {value: amount > 100 ? 100 : amount, title: motorGaugeInfo[gaugeID].title})
+    }
+
+    function updatePyrolysisGauge(gaugeID) {
+        let setpoint = parseFloat(pyrolysisGaugeInfo[gaugeID].setpoint)
+        let value = parseFloat(pyrolysisGaugeInfo[gaugeID].value)
+        function pickColor() {
+            if      (value < setpoint-50)   {return "yellow"}
+            else if (value > setpoint+50)   {return "red"}
+            else                            {return "green"}
         }
-    };
-    Plotly.restyle(gaugeID, new_thermo_gauge)
-}
-
-function updateChemGauge(gaugeID) {
-    let setpoint = parseFloat(chemGaugeInfo[gaugeID].setpoint)
-    let value = parseFloat(chemGaugeInfo[gaugeID].value)
-    function pickColor() {
-        if      (value < setpoint-50)   {return "yellow"}
-        else if (value > setpoint+50)   {return "red"}
-        else                            {return "green"}
+        let new_thermo_gauge = {
+            domain: { x: [0, 1], y: [0, 1] },
+            value: value,
+            title: { text: pyrolysisGaugeInfo[gaugeID].title },
+            type: "indicator",
+            mode: "gauge+number",
+            gauge: {
+                axis: { range: [0, setpoint*2] },
+                bar: { color: pickColor() },
+                steps: [
+                    { range: [0, setpoint*2], color: "#dddddd" },
+                    { range: [setpoint*(1-0.275), setpoint*(1-0.225)], color: "yellow" },
+                    { range: [setpoint-(setpoint/40), setpoint+(setpoint/40)], color: "green" },
+                    { range: [setpoint*(1+0.275), setpoint*(1+0.225)], color: "red" }
+                ],
+            }
+        };
+        Plotly.restyle(gaugeID, new_thermo_gauge)
     }
-    let new_thermo_gauge = {
-        domain: { x: [0, 1], y: [0, 1] },
-        value: value,
-        title: { text: chemGaugeInfo[gaugeID].title },
-        type: "indicator",
-        mode: "gauge+number",
-        gauge: {
-            axis: { range: [0, setpoint*2] },
-            bar: { color: pickColor() },
-            steps: [
-                { range: [0, setpoint*2], color: "#dddddd" },
-                { range: [setpoint*(1-0.275), setpoint*(1-0.225)], color: "yellow" },
-                { range: [setpoint-(setpoint/40), setpoint+(setpoint/40)], color: "green" },
-                { range: [setpoint*(1+0.275), setpoint*(1+0.225)], color: "red" }
-            ],
+
+    function updateChemGauge(gaugeID) {
+        let setpoint = parseFloat(chemGaugeInfo[gaugeID].setpoint)
+        let value = parseFloat(chemGaugeInfo[gaugeID].value)
+        function pickColor() {
+            if      (value < setpoint-50)   {return "yellow"}
+            else if (value > setpoint+50)   {return "red"}
+            else                            {return "green"}
         }
-    };
-    Plotly.restyle(gaugeID, new_thermo_gauge)
-}
+        let new_thermo_gauge = {
+            domain: { x: [0, 1], y: [0, 1] },
+            value: value,
+            title: { text: chemGaugeInfo[gaugeID].title },
+            type: "indicator",
+            mode: "gauge+number",
+            gauge: {
+                axis: { range: [0, setpoint*2] },
+                bar: { color: pickColor() },
+                steps: [
+                    { range: [0, setpoint*2], color: "#dddddd" },
+                    { range: [setpoint*(1-0.275), setpoint*(1-0.225)], color: "yellow" },
+                    { range: [setpoint-(setpoint/40), setpoint+(setpoint/40)], color: "green" },
+                    { range: [setpoint*(1+0.275), setpoint*(1+0.225)], color: "red" }
+                ],
+            }
+        };
+        Plotly.restyle(gaugeID, new_thermo_gauge)
+    }
 
-function updateBioPhGauge(gaugeID) {
-    let setpoint = parseFloat(bioGaugeInfo[gaugeID].setpoint)
-    let value = parseFloat(bioGaugeInfo[gaugeID].value)
-    
-    let new_ph_gauge = {
-        domain: { x: [0, 1], y: [0, 1] },
-        value: value,
-        title: { text: bioGaugeInfo[gaugeID].title },
-        type: "indicator",
-        mode: "gauge+number",
-        gauge: {
-            axis: { range: [null, 14] },
-            bar: { color: "blue" },
-            steps: [
-                { range: [0, 14], color: "#dddddd" },
-            ],
-            threshold: {
-                line: { color: "red", width: 4 },
-                thickness: 0.75,
-                value: setpoint,
+    function updateBioPhGauge(gaugeID) {
+        let setpoint = parseFloat(bioGaugeInfo[gaugeID].setpoint)
+        let value = parseFloat(bioGaugeInfo[gaugeID].value)
+        
+        let new_ph_gauge = {
+            domain: { x: [0, 1], y: [0, 1] },
+            value: value,
+            title: { text: bioGaugeInfo[gaugeID].title },
+            type: "indicator",
+            mode: "gauge+number",
+            gauge: {
+                axis: { range: [null, 14] },
+                bar: { color: "blue" },
+                steps: [
+                    { range: [0, 14], color: "#dddddd" },
+                ],
+                threshold: {
+                    line: { color: "red", width: 4 },
+                    thickness: 0.75,
+                    value: setpoint,
+                }
             }
         }
+        Plotly.restyle(gaugeID, new_ph_gauge)
     }
-    Plotly.restyle(gaugeID, new_ph_gauge)
-}
 
-function updateBioProGauge(gaugeID) {
-    let setpoint = parseFloat(bioGaugeInfo[gaugeID].setpoint)
-    let value = parseFloat(bioGaugeInfo[gaugeID].value)
+    function updateBioProGauge(gaugeID) {
+        let setpoint = parseFloat(bioGaugeInfo[gaugeID].setpoint)
+        let value = parseFloat(bioGaugeInfo[gaugeID].value)
 
-    function pickColor() {
-        if      (value < setpoint-50)   {return "yellow"}
-        else if (value > setpoint+50)   {return "red"}
-        else                            {return "green"}
-    }
-    
-    let new_thermo_gauge = {
-        domain: { x: [0, 1], y: [0, 1] },
-        value: value,
-        title: { text: bioGaugeInfo[gaugeID].title },
-        type: "indicator",
-        mode: "gauge+number",
-        gauge: {
-            axis: { range: [0, setpoint*2] },
-            bar: { color: pickColor() },
-            steps: [
-                { range: [0, setpoint*2], color: "#dddddd" },
-                { range: [setpoint*(1-0.275), setpoint*(1-0.225)], color: "yellow" },
-                { range: [setpoint-(setpoint/40), setpoint+(setpoint/40)], color: "green" },
-                { range: [setpoint*(1+0.275), setpoint*(1+0.225)], color: "red" }
-            ],
+        function pickColor() {
+            if      (value < setpoint-50)   {return "yellow"}
+            else if (value > setpoint+50)   {return "red"}
+            else                            {return "green"}
+        }
+        
+        let new_thermo_gauge = {
+            domain: { x: [0, 1], y: [0, 1] },
+            value: value,
+            title: { text: bioGaugeInfo[gaugeID].title },
+            type: "indicator",
+            mode: "gauge+number",
+            gauge: {
+                axis: { range: [0, setpoint*2] },
+                bar: { color: pickColor() },
+                steps: [
+                    { range: [0, setpoint*2], color: "#dddddd" },
+                    { range: [setpoint*(1-0.275), setpoint*(1-0.225)], color: "yellow" },
+                    { range: [setpoint-(setpoint/40), setpoint+(setpoint/40)], color: "green" },
+                    { range: [setpoint*(1+0.275), setpoint*(1+0.225)], color: "red" }
+                ],
+            }
         }
+        Plotly.restyle(gaugeID, new_thermo_gauge)
     }
-    Plotly.restyle(gaugeID, new_thermo_gauge)
-}
 
-function downloadCSVFile(url, filename) {
-    // Create a hidden anchor element
-    const anchor = document.createElement('a');
-    anchor.style.display = 'none';
-    document.body.appendChild(anchor);
+    function downloadCSVFile(url, filename) {
+        // Create a hidden anchor element
+        const anchor = document.createElement('a');
+        anchor.style.display = 'none';
+        document.body.appendChild(anchor);
 
-    // Set the href attribute of the anchor element to the CSV file URL
-    anchor.href = url;
+        // Set the href attribute of the anchor element to the CSV file URL
+        anchor.href = url;
 
-    // Set the download attribute to specify the filename
-    anchor.setAttribute('download', filename);
+        // Set the download attribute to specify the filename
+        anchor.setAttribute('download', filename);
 
-    // Trigger a click event on the anchor element to start the download
-    anchor.click();
+        // Trigger a click event on the anchor element to start the download
+        anchor.click();
 
-    // Clean up by removing the anchor element
-    document.body.removeChild(anchor);
-}
+        // Clean up by removing the anchor element
+        document.body.removeChild(anchor);
+    }
 
-function clearPyrolysis() {
-    sendPOST('delete-pyrolysis', 'delete-pyrolysis')
+    function clearPyrolysis() {
+        sendPOST('delete-pyrolysis', 'delete-pyrolysis')
 
-    for(let x = 0; x < pyrolysis_traces.length; x++) {
-        pyrolysis_traces[x].x = []    //data[0] pushes time to the x axis
-        pyrolysis_traces[x].y = []   //data[x+1] to avoid pushing the date and time
-    }
-    Plotly.newPlot('pyrolysis-thermo-graph', pyrolysis_traces, thermocouple_layout, {scrollZoom: true});
-}
-
-function clearBioreactor() {
-    sendPOST('delete-bioreactor', 'delete-bioreactor')
-
-    for(let x = 0; x < 2; x++) {
-        bio_thermo_traces[x].x = []
-        bio_ph_traces[x].x = []  
-        bio_oxygen_traces[x].x = []
-        bio_turbidity_traces[x].x = []
-        bio_pro_traces[x].x = []
-
-        bio_thermo_traces[x].y = []
-        bio_ph_traces[x].y = []
-        bio_oxygen_traces[x].y = []
-        bio_turbidity_traces[x].y = []
-        bio_pro_traces[x].y = []
+        for(let x = 0; x < pyrolysis_traces.length; x++) {
+            pyrolysis_traces[x].x = []    //data[0] pushes time to the x axis
+            pyrolysis_traces[x].y = []   //data[x+1] to avoid pushing the date and time
+        }
+        Plotly.newPlot('pyrolysis-thermo-graph', pyrolysis_traces, thermocouple_layout, {scrollZoom: true});
     }
-    Plotly.newPlot('bio-thermo-graph', bio_thermo_traces, bio_thermo_layout, {scrollZoom: true});                    
-    Plotly.newPlot('bio-ph-graph', bio_ph_traces, pH_layout, {scrollZoom: true});
-    Plotly.newPlot('bio-oxygen-graph', bio_oxygen_traces, oxygen_layout, {scrollZoom: true});
-    Plotly.newPlot('bio-turbidity-graph', bio_turbidity_traces, turbidity_layout, {scrollZoom: true});
-    Plotly.newPlot('bio-pro-graph', bio_pro_traces, pro_layout, {scrollZoom: true});
-}
-
-function clearChemreactor() {
-    sendPOST('delete-chemreactor', 'delete-chemreactor')
-    for(let x = 0; x < 2; x++) {
-        chem_thermo_traces[x].x = []
-        chem_thermo_traces[x].y = []
+
+    function clearBioreactor() {
+        sendPOST('delete-bioreactor', 'delete-bioreactor')
+
+        for(let x = 0; x < 2; x++) {
+            bio_thermo_traces[x].x = []
+            bio_ph_traces[x].x = []  
+            bio_oxygen_traces[x].x = []
+            bio_turbidity_traces[x].x = []
+            bio_pro_traces[x].x = []
+
+            bio_thermo_traces[x].y = []
+            bio_ph_traces[x].y = []
+            bio_oxygen_traces[x].y = []
+            bio_turbidity_traces[x].y = []
+            bio_pro_traces[x].y = []
+        }
+        Plotly.newPlot('bio-thermo-graph', bio_thermo_traces, bio_thermo_layout, {scrollZoom: true});                    
+        Plotly.newPlot('bio-ph-graph', bio_ph_traces, pH_layout, {scrollZoom: true});
+        Plotly.newPlot('bio-oxygen-graph', bio_oxygen_traces, oxygen_layout, {scrollZoom: true});
+        Plotly.newPlot('bio-turbidity-graph', bio_turbidity_traces, turbidity_layout, {scrollZoom: true});
+        Plotly.newPlot('bio-pro-graph', bio_pro_traces, pro_layout, {scrollZoom: true});
     }
-    Plotly.newPlot('chem-thermo-graph', chem_thermo_traces, chem_thermo_layout, {scrollZoom: true});
-}
 
-</script>
+    function clearChemreactor() {
+        sendPOST('delete-chemreactor', 'delete-chemreactor')
+        for(let x = 0; x < 2; x++) {
+            chem_thermo_traces[x].x = []
+            chem_thermo_traces[x].y = []
+        }
+        Plotly.newPlot('chem-thermo-graph', chem_thermo_traces, chem_thermo_layout, {scrollZoom: true});
+    }
 
-</body>
-<footer>
-    <script src="plotly.js"></script>
-</footer>
+    </script>
+    
+    </body>
 </html>
\ No newline at end of file

From 0cab4eb98150508d28a1d7ecc013c30effc0b602 Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Sat, 22 Mar 2025 17:37:15 -0400
Subject: [PATCH 08/18] Load plotly after sending the HTML to help with
 loading. Future goal is to make this more modular

---
 Website Code on SD Card/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Website Code on SD Card/index.html b/Website Code on SD Card/index.html
index a7974b8..d6e1aaf 100644
--- a/Website Code on SD Card/index.html	
+++ b/Website Code on SD Card/index.html	
@@ -2,7 +2,6 @@
 <html>
     <head>
         <link rel="stylesheet" type="text/css" href="style.css">
-        <script src="plotly.js"></script>
     </head>
     <body onload="loadData()">
 
@@ -624,6 +623,7 @@ <h2>Post Processing</h2>
                 <button id="chem-thermo-tracking" onclick="setTracking('chem-thermo-tracking', 'chem-thermo-tracking-amount', 'chem-thermo-graph')">Track Data</button>        
             </div>
         </div>
+    <script src="plotly.js"></script>
     <script>
 
     //----------------Pyrolysis thermocouple traces-----------------------//  

From 6899513db9175b654fa31d106deb00b337606af1 Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Tue, 25 Mar 2025 19:44:07 -0400
Subject: [PATCH 09/18] Move stuff around

---
 .gitignore                                    |   5 ++
 .vscode/extensions.json                       |  10 ++++
 BREAD-Local-Software.code-workspace           |  10 ++++
 Website Code on SD Card/favicon.ico           | Bin 0 -> 372 bytes
 Website Code on SD Card/index.html            |  39 +++++-----------
 Website Code on SD Card/style.css             |  43 +++++++++++++++++-
 Website Code on SD Card/tabbing.js            |  20 ++++++++
 platformio.ini                                |  26 +++++++++++
 .../BREAD-DARPA-Controls.ino                  |   0
 9 files changed, 123 insertions(+), 30 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 .vscode/extensions.json
 create mode 100644 BREAD-Local-Software.code-workspace
 create mode 100644 Website Code on SD Card/favicon.ico
 create mode 100644 Website Code on SD Card/tabbing.js
 create mode 100644 platformio.ini
 rename {Arduino Code/BREAD-DARPA-Controls => src}/BREAD-DARPA-Controls.ino (100%)

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..89cc49c
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,5 @@
+.pio
+.vscode/.browse.c_cpp.db*
+.vscode/c_cpp_properties.json
+.vscode/launch.json
+.vscode/ipch
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
new file mode 100644
index 0000000..080e70d
--- /dev/null
+++ b/.vscode/extensions.json
@@ -0,0 +1,10 @@
+{
+    // See http://go.microsoft.com/fwlink/?LinkId=827846
+    // for the documentation about the extensions.json format
+    "recommendations": [
+        "platformio.platformio-ide"
+    ],
+    "unwantedRecommendations": [
+        "ms-vscode.cpptools-extension-pack"
+    ]
+}
diff --git a/BREAD-Local-Software.code-workspace b/BREAD-Local-Software.code-workspace
new file mode 100644
index 0000000..139ddfe
--- /dev/null
+++ b/BREAD-Local-Software.code-workspace
@@ -0,0 +1,10 @@
+{
+	"folders": [
+		{
+			"path": "."
+		}
+	],
+	"settings": {
+		"liveServer.settings.multiRootWorkspaceName": "BREAD-Local-Software"
+	}
+}
\ No newline at end of file
diff --git a/Website Code on SD Card/favicon.ico b/Website Code on SD Card/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..45bd8931f977de900a22c8c3a1dcc9aa984b8af0
GIT binary patch
literal 372
zcmV-)0gL{LP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv0003yNkl<ZNQvc@
z+i`<H3`I`~l&~dG0v&`Bwgb~i+(GCd?!f5)cffXFIv^jBg1px9NdA&L!wjRnd-X)X
ze?SD@fB~508N~MT8{rlhjcDl^g?k8RBana&sLgpTwq$s(KN0VC@H@jlZ;@L=t~a<A
zwYj%iuEhSxb7&@Gi4a+8o+AM7a(R^Zuo9q~MUNkS0PZ|b&)spNS@fQR8-DFCV*e1q
zAn&uBS!gc?&w)mkV-mZKHc+m2NvC+A_R4Xv#(zSRgC?_UiLNXqy5g6pp*$$xLSB=#
zOc%qOIN0P!xvn|@(eS)RCc|@~1e=9U#$;@ok)1e=K9$7baaA;8)7@nEOm1t;z0J+q
z8}f<eBg?m`erzYh@3+J~Co^9?$Z^X!yTuhP>rIO+H9!2r$%QJ%UKJewF?<4fRhlB}
SYH_Ck0000<MNUMnLSTXcd#A|&

literal 0
HcmV?d00001

diff --git a/Website Code on SD Card/index.html b/Website Code on SD Card/index.html
index d6e1aaf..d64629c 100644
--- a/Website Code on SD Card/index.html	
+++ b/Website Code on SD Card/index.html	
@@ -28,12 +28,14 @@ <h1>BREAD Configuration and Controls</h1>
             </div>
         </div>
         
-        <iframe name="target" style="display:none;"></iframe>
+        <!-- <iframe name="target" style="display:none;"></iframe> -->
         <hr>
-        <button class="tablink" onclick="openPage('pyrolysis', this, 'green')">Pyrolsis Reactor</button>
-        <button class="tablink" onclick="openPage('bioreactor', this, 'green')" id="defaultOpen">Bioreactor</button>
-        <button class="tablink" onclick="openPage('chemreactor', this, 'green')">Chemical Deconstruction Reactor</button>
-
+        <nav class="tabnav">
+            <button class="tablink" onclick="openPage('pyrolysis', this, 'green')" id="defaultOpen">Pyrolsis Reactor</button>
+            <button class="tablink" onclick="openPage('bioreactor', this, 'green')">Bioreactor</button>
+            <button class="tablink" onclick="openPage('chemreactor', this, 'green')">Chemical Deconstruction Reactor</button>
+            <!-- <button class="tablink" onclick="openPage('post-process', this, 'green')">post-processing</button> -->
+        </nav>
         <div id="pyrolysis" class="tabcontent">
             <!-- <h2>Pyrolysis Reactor</h2> -->
             <!-- Gauge area -->
@@ -314,7 +316,7 @@ <h1>BREAD Configuration and Controls</h1>
                 <div id="bio-thermo-gauge1"></div>
                 <div id="bio-thermo-gauge2"></div>
                 <div>
-                    <div id="bio-thermo-graph" style="height: 350px; width: 1100px;"></div>
+                    <div id="bio-thermo-graph" class="tabcontent"></div>
                     <label>Number of previous seconds to track: </label>
                     <input type="number" id="bio-thermo-tracking-amount">
                     <button id="bio-thermo-tracking" onclick="setTracking('bio-thermo-tracking', 'bio-thermo-tracking-amount', 'bio-thermo-graph')">Track Data</button>        
@@ -624,6 +626,7 @@ <h2>Post Processing</h2>
             </div>
         </div>
     <script src="plotly.js"></script>
+    <script src="tabbing.js"></script>
     <script>
 
     //----------------Pyrolysis thermocouple traces-----------------------//  
@@ -1256,26 +1259,6 @@ <h2>Post Processing</h2>
             value: 0,
         },
     }
-    function openPage(pageName, elmnt, color) {
-    // Hide all elements with class="tabcontent" by default */
-    var i, tabcontent, tablinks;
-    tabcontent = document.getElementsByClassName("tabcontent");
-    for (i = 0; i < tabcontent.length; i++) {
-        tabcontent[i].style.display = "none";
-    }
-
-    // Remove the background color of all tablinks/buttons
-    tablinks = document.getElementsByClassName("tablink");
-    for (i = 0; i < tablinks.length; i++) {
-        tablinks[i].style.backgroundColor = "";
-    }
-
-    // Show the specific tab content
-    document.getElementById(pageName).style.display = "block";
-
-    // Add the specific color to the button used to open the tab content
-    elmnt.style.backgroundColor = color;
-    }
 
     // Get the element with id="defaultOpen" and click on it
     document.getElementById("defaultOpen").click();
@@ -1458,7 +1441,7 @@ <h2>Post Processing</h2>
             title: "Reactor 2",
             value: 0,
             setpoint: 0
-        }
+        } 
     }
     Plotly.newPlot("chem-thermo-gauge1", thermo_gauge, gaugeLayout);
     Plotly.newPlot("chem-thermo-gauge2", thermo_gauge, gaugeLayout);
@@ -1480,7 +1463,7 @@ <h2>Post Processing</h2>
 
     function loadData() {
         //Get Data	
-        fetch('pyrolysis-data.csv')
+        fetch('pyrolysis-data.csv') 
         .then(response => response.text())
         .then(text => {
             let row = text.split("\r\n") //split entries by row
diff --git a/Website Code on SD Card/style.css b/Website Code on SD Card/style.css
index 9c59bd1..522f7c0 100644
--- a/Website Code on SD Card/style.css	
+++ b/Website Code on SD Card/style.css	
@@ -9,7 +9,7 @@ body, html {
   .tablink {
     background-color: #555;
     color: white;
-    /* float: left; */
+    float: left;
     border: none;
     outline: none;
     cursor: pointer;
@@ -17,6 +17,9 @@ body, html {
     font-size: 17px;
     width: 25%;
   }
+  .tabnav {
+    width: 100%;
+  }
   
   .tablink:hover {
     background-color: #777;
@@ -28,4 +31,40 @@ body, html {
     display: none;
     padding: 100px 20px;
     height: 100%;
-  }
\ No newline at end of file
+  }
+
+ /* Ensure grid containers have explicit sizes */
+ .grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: 10px;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+/* Set heights to prevent overlap */
+.graph-container, .gauge-container {
+  height: 350px;
+  position: relative;
+}
+
+/* Prevent graph overlap */
+.graph-container {
+  z-index: 1;
+}
+
+/* Ensure gauges are on top */
+.gauge-container {
+  z-index: 2;
+}
+
+/* Tab content visibility */
+.tabcontent {
+  display: none;
+  padding: 20px;
+}
+
+.tabcontent.active {
+  display: block;
+}
\ No newline at end of file
diff --git a/Website Code on SD Card/tabbing.js b/Website Code on SD Card/tabbing.js
new file mode 100644
index 0000000..7377a3d
--- /dev/null
+++ b/Website Code on SD Card/tabbing.js	
@@ -0,0 +1,20 @@
+function openPage(pageName, elmnt, color) {
+    // Hide all elements with class="tabcontent" by default */
+    var i, tabcontent, tablinks;
+    tabcontent = document.getElementsByClassName("tabcontent");
+    for (i = 0; i < tabcontent.length; i++) {
+        tabcontent[i].style.display = "none";
+    }
+
+    // Remove the background color of all tablinks/buttons
+    tablinks = document.getElementsByClassName("tablink");
+    for (i = 0; i < tablinks.length; i++) {
+        tablinks[i].style.backgroundColor = "";
+    }
+
+    // Show the specific tab content
+    document.getElementById(pageName).style.display = "block";
+
+    // Add the specific color to the button used to open the tab content
+    elmnt.style.backgroundColor = color;
+}
\ No newline at end of file
diff --git a/platformio.ini b/platformio.ini
new file mode 100644
index 0000000..0f4b0ed
--- /dev/null
+++ b/platformio.ini
@@ -0,0 +1,26 @@
+; PlatformIO Project Configuration File
+;
+;   Build options: build flags, source filter
+;   Upload options: custom upload port, speed and extra flags
+;   Library options: dependencies, extra library storages
+;   Advanced options: extra scripting
+;
+; Please visit documentation for the other options and examples
+; https://docs.platformio.org/page/projectconf.html
+
+[env]
+board = esp32doit-devkit-v1
+monitor_speed = 115200
+
+[env:sparkfun_esp32s2_thing_plus_c]
+platform = espressif32
+board = sparkfun_esp32s2_thing_plus_c
+framework = arduino
+; upload_speed = 921600
+
+
+lib_deps = 
+    esphome/AsyncTCP-esphome@^2.1.4
+	bblanchon/ArduinoJson@^7.2.0
+	fbiego/ESP32Time@^2.0.6
+	esphome/ESPAsyncWebServer-esphome@^3.2.2
\ No newline at end of file
diff --git a/Arduino Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino b/src/BREAD-DARPA-Controls.ino
similarity index 100%
rename from Arduino Code/BREAD-DARPA-Controls/BREAD-DARPA-Controls.ino
rename to src/BREAD-DARPA-Controls.ino

From 25d214063217be12ce55fa7ef77695c544d40f5f Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Tue, 25 Mar 2025 19:57:59 -0400
Subject: [PATCH 10/18] Tabbing is working properly

---
 Website Code on SD Card/style.css  | 8 +++++---
 Website Code on SD Card/tabbing.js | 2 +-
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/Website Code on SD Card/style.css b/Website Code on SD Card/style.css
index 522f7c0..c830531 100644
--- a/Website Code on SD Card/style.css	
+++ b/Website Code on SD Card/style.css	
@@ -1,6 +1,6 @@
 /* Set height of body and the document to 100% to enable "full page tabs" */
 body, html {
-    height: 100%;
+    /* height: 100%; */
     margin: 0;
     font-family: Arial;
   }
@@ -19,6 +19,8 @@ body, html {
   }
   .tabnav {
     width: 100%;
+    background-color: #777;
+    display: flex;
   }
   
   .tablink:hover {
@@ -27,8 +29,8 @@ body, html {
   
   /* Style the tab content (and add height:100% for full page content) */
   .tabcontent {
-    color: white;
-    display: none;
+    color: black;
+    display: grid;
     padding: 100px 20px;
     height: 100%;
   }
diff --git a/Website Code on SD Card/tabbing.js b/Website Code on SD Card/tabbing.js
index 7377a3d..3bd9126 100644
--- a/Website Code on SD Card/tabbing.js	
+++ b/Website Code on SD Card/tabbing.js	
@@ -13,7 +13,7 @@ function openPage(pageName, elmnt, color) {
     }
 
     // Show the specific tab content
-    document.getElementById(pageName).style.display = "block";
+    document.getElementById(pageName).style.display = "grid";
 
     // Add the specific color to the button used to open the tab content
     elmnt.style.backgroundColor = color;

From b53e8b465ccce3525ac50d47c7ce60a1aba174e3 Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Tue, 25 Mar 2025 19:58:17 -0400
Subject: [PATCH 11/18] Add Caching

---
 src/BREAD-DARPA-Controls.ino | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/BREAD-DARPA-Controls.ino b/src/BREAD-DARPA-Controls.ino
index 5f94204..60ffd3a 100644
--- a/src/BREAD-DARPA-Controls.ino
+++ b/src/BREAD-DARPA-Controls.ino
@@ -549,7 +549,7 @@ Chem Decon Commands:
   });
   server.addHandler(&events);
 
-  server.serveStatic("/", SD, "/");
+  server.serveStatic("/", SD, "/").setDefaultFile("index.htm");
   server.begin();
 
   lastPOST = millis();

From f0edee6b40b5ed5e71d0584ff2dc6b72ab2c860f Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Tue, 25 Mar 2025 20:43:23 -0400
Subject: [PATCH 12/18] Add Caching

---
 Website Code on SD Card/{ => css}/style.css | 0
 Website Code on SD Card/index.html          | 8 ++++----
 Website Code on SD Card/{ => js}/plotly.js  | 0
 Website Code on SD Card/{ => js}/tabbing.js | 0
 src/BREAD-DARPA-Controls.ino                | 4 ++--
 5 files changed, 6 insertions(+), 6 deletions(-)
 rename Website Code on SD Card/{ => css}/style.css (100%)
 rename Website Code on SD Card/{ => js}/plotly.js (100%)
 rename Website Code on SD Card/{ => js}/tabbing.js (100%)

diff --git a/Website Code on SD Card/style.css b/Website Code on SD Card/css/style.css
similarity index 100%
rename from Website Code on SD Card/style.css
rename to Website Code on SD Card/css/style.css
diff --git a/Website Code on SD Card/index.html b/Website Code on SD Card/index.html
index d64629c..756a41d 100644
--- a/Website Code on SD Card/index.html	
+++ b/Website Code on SD Card/index.html	
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
     <head>
-        <link rel="stylesheet" type="text/css" href="style.css">
+        <link rel="stylesheet" type="text/css" href="css/style.css">
     </head>
     <body onload="loadData()">
 
@@ -28,7 +28,7 @@ <h1>BREAD Configuration and Controls</h1>
             </div>
         </div>
         
-        <!-- <iframe name="target" style="display:none;"></iframe> -->
+        <iframe name="target" style="display:none;"></iframe>
         <hr>
         <nav class="tabnav">
             <button class="tablink" onclick="openPage('pyrolysis', this, 'green')" id="defaultOpen">Pyrolsis Reactor</button>
@@ -625,8 +625,8 @@ <h2>Post Processing</h2>
                 <button id="chem-thermo-tracking" onclick="setTracking('chem-thermo-tracking', 'chem-thermo-tracking-amount', 'chem-thermo-graph')">Track Data</button>        
             </div>
         </div>
-    <script src="plotly.js"></script>
-    <script src="tabbing.js"></script>
+    <script src="js/plotly.js"></script>
+    <script src="js/tabbing.js"></script>
     <script>
 
     //----------------Pyrolysis thermocouple traces-----------------------//  
diff --git a/Website Code on SD Card/plotly.js b/Website Code on SD Card/js/plotly.js
similarity index 100%
rename from Website Code on SD Card/plotly.js
rename to Website Code on SD Card/js/plotly.js
diff --git a/Website Code on SD Card/tabbing.js b/Website Code on SD Card/js/tabbing.js
similarity index 100%
rename from Website Code on SD Card/tabbing.js
rename to Website Code on SD Card/js/tabbing.js
diff --git a/src/BREAD-DARPA-Controls.ino b/src/BREAD-DARPA-Controls.ino
index 60ffd3a..cdfeac0 100644
--- a/src/BREAD-DARPA-Controls.ino
+++ b/src/BREAD-DARPA-Controls.ino
@@ -548,8 +548,8 @@ Chem Decon Commands:
     client->send("hello!", NULL, millis(), 10000);
   });
   server.addHandler(&events);
-
-  server.serveStatic("/", SD, "/").setDefaultFile("index.htm");
+  server.serveStatic("/js", SD, "/js").setCacheControl("max-age=31536000");
+  server.serveStatic("/", SD, "/").setCacheControl("max-age=31536000");
   server.begin();
 
   lastPOST = millis();

From 4016650f82b1e1fb992a1b3ad9bec7a48e114834 Mon Sep 17 00:00:00 2001
From: Chris Kolhoff <chris@chrispro.net>
Date: Thu, 27 Mar 2025 16:11:01 -0400
Subject: [PATCH 13/18] Manual Merge: Added auto tune function to the Arduino
 code // added new functuion to the dryer for autotuning

From: bimbo226 fork commit 45a10fc
---
 Website Code on SD Card/index.html |  11 ++-
 src/BREAD-DARPA-Controls.ino       | 104 +++++++++++++++++++++++++++++
 2 files changed, 114 insertions(+), 1 deletion(-)

diff --git a/Website Code on SD Card/index.html b/Website Code on SD Card/index.html
index 756a41d..d7cc3ae 100644
--- a/Website Code on SD Card/index.html	
+++ b/Website Code on SD Card/index.html	
@@ -511,7 +511,16 @@ <h2>Post Processing</h2>
                         <button onclick="
                             bioGaugeInfo['bio-pro-gauge2'].setpoint = document.getElementById('bio-pro-gauge2-amount').value;
                             updateBioProGauge('bio-pro-gauge2')
-                        ">Push Data</button>    
+                        ">Push Data</button>
+                    </form>
+                    <br>
+                    <form action="/form-submit" method="POST" target="target">
+                        <!-- This needs some work. 
+                         1: The ID for the input field needs to be unique so it wont get confusted with the other values.
+                         2: `onclick` might need to have some javascript code so it will actually do the thing we want it to do. See above (as of 3/27/25, lines 508-514) for an example -->
+                        <label>Autotune Initial Kp:</label>
+                        <input type="number" step="0.01" name="Pa2" id="bio-pro-gauge2-amount">
+                        <button onclick="">Push Data</button>
                     </form>
                     <br>
                     <form action="/form-submit" method="POST" target="target">
diff --git a/src/BREAD-DARPA-Controls.ino b/src/BREAD-DARPA-Controls.ino
index cdfeac0..c460cdf 100644
--- a/src/BREAD-DARPA-Controls.ino
+++ b/src/BREAD-DARPA-Controls.ino
@@ -131,6 +131,14 @@ int bio_post_heaters[2][4] = {    // bioreactor post processing heaters {address
 float bio_post_heater_pid[2][4];  // {setpoint, Kp, Ki, Kd}
 float bio_thermo_val[4] = {0,0,0,0};
 
+// Automatic Heater PID Vars
+uint8_t autoCheck = 0;
+uint8_t checkOsc = 0;
+uint8_t peak = 0;
+hw_timer_t *timer = NULL;
+float bio_post_heater_auto[5] = {0,0,0,0,0}; // {maxTemp, prevTemp, prevTime, Peak1, prevDeriv}
+
+
 int bio_ph[2][2] = {      // bioreactor pH layout {PHDO address, DCMT address}
   {98, 20},
   {100, 21}
@@ -404,6 +412,14 @@ Chem Decon Commands:
       }else if(postName.charAt(0) == 'P') {   // bioreactor post processing
         uint8_t index = postName.substring(2).toInt() - 1;
         switch(postName.charAt(1)) {
+          //new case for autotune 3-6-2024
+          case 'a':
+            autoCheck = 1;
+            //Send initial Kp value
+            bio_post_heater_pid[index][1] = postValue.toFloat();
+            timer = timerBegin(0, 80, true);
+            RLHTCommandPID(bio_post_heaters[index][0], bio_post_heaters[index][1], bio_post_heater_pid[index][1], 0, 0);
+            break;
           case 's': //setpoint
             bio_post_heater_pid[index][0] = postValue.toFloat();
             RLHTCommandSetpoint(bio_post_heaters[index][0], bio_post_heaters[index][1], bio_post_heater_pid[index][0], bio_post_heaters[index][2], bio_post_heaters[index][3]);
@@ -598,6 +614,22 @@ void loop() {
     }
     for(int i=0;i<2;i++){
       float temp;
+      //if thermocouple 1?
+      if(bio_post_heaters[i][2] == 1) {
+        RLHTRequestThermo(bio_post_heaters[i][0], &(bio_thermo_val[i+2]), &(temp));
+        
+      } 
+      if(bio_post_heaters[i][2] == 2) {
+        RLHTRequestThermo(bio_post_heaters[i][0], &(temp), &(bio_thermo_val[i+2]));
+        //(int address, byte heater, float Ku,float setpoint, float temp, float time)
+        
+        RLHTCommandPIDAuto(bio_post_heaters[i][0], bio_post_heaters[i][1],bio_post_heater_pid[i][1],bio_post_heater_pid[i][0],bio_thermo_val[4],timerReadSeconds(timer));
+        //if not oscillating...
+        if (checkOsc == 0) {
+          timerRestart(timer);
+        }
+        //RLHTCommandSetpoint(bio_post_heaters[index][0], bio_post_heaters[index][1], bio_post_heater_pid[index][0], bio_post_heaters[index][2], bio_post_heaters[index][3]);
+      }
       if(bio_post_heaters[i][2] == 1)
         RLHTRequestThermo(bio_post_heaters[i][0], &(bio_thermo_val[i+2]), &(temp));
       if(bio_post_heaters[i][2] == 2)
@@ -714,6 +746,77 @@ void RLHTCommandSetpoint(int address, byte heater, float heatSetpoint, byte ther
   Serial.println(enableReverse);
 }
 
+
+ /*
+ * Automatically tunes heater gains (Ki, Kd, Kp)
+ * 
+ * int address - address of heater slice
+ * byte heater - 
+ * float Ku - ultimate gain
+ * float setpoint
+ */
+void RLHTCommandPIDAuto(int address, byte heater, float Ku,float setpoint, float temp, double time)
+{
+
+
+//we could just increase the gain super slowly
+  if (autoCheck == 1)
+  {
+    //((current T - previous T) / (current time - previous timee))
+    double driv = (temp - bio_post_heater_auto[1])/(time - bio_post_heater_auto[2]);
+    //if T is less than 2% of Setpoint and the derivative is decreasing and it isn't oscillating...
+    if ((temp < setpoint - (setpoint * 0.02)) && driv - bio_post_heater_auto[4] < 0 && checkOsc == 0)
+    {
+        //double Ku and send new gains
+        Ku = Ku * 2;
+        RLHTCommandPID(address, heater, Ku, 0, 0);
+      
+    }
+    else
+    {
+      //check for oscillations
+      checkOsc = 1;
+      //If MaxTemp is less than current temp, set new peak 1 max and continue
+      if(bio_post_heater_auto[0] < temp)
+      {
+        bio_post_heater_auto[0] = temp;
+      }
+      //If previous T is smaller than current, set new maximum T
+      else if(bio_post_heater_auto[1] < temp){
+        //increasing to peak 2
+        bio_post_heater_auto[0] = temp;
+      }
+      //If max observed T is larger than new and we have not found the first peak, set it as the first peak
+      if(bio_post_heater_auto[0] > temp && peak == 0){
+        bio_post_heater_auto[3] = bio_post_heater_auto[0];
+        peak = 1;
+        timerRestart(timer);
+      }
+      //If max observed T is larger than new and we have found the first peak...
+      else if (bio_post_heater_auto[0] > temp && peak == 1){
+        //Find the delta between the secondpeak-firstpeak
+        float delp = bio_post_heater_auto[0]-bio_post_heater_auto[3];
+        //If the delta is greater than 0, change Ku
+        if(delp > 0){
+          Ku = (Ku / 1.5); //or Ku - (Ku/2)
+        }
+        else{
+          float time = timerReadSeconds(timer);
+          RLHTCommandPID(address, heater, 0.6*Ku, (1.2*Ku)/time, 0.075*Ku*time);
+          checkOsc = 0;
+          autoCheck = 0;
+          timerStop(timer);
+        }
+      }
+    }
+    //saving old time, temp, and dericative
+    bio_post_heater_auto[1] = temp;
+    bio_post_heater_auto[2] = time;
+    bio_post_heater_auto[4] = driv;
+  }
+}
+
+
 void RLHTCommandPID(int address, byte heater, float Kp_set, float Ki_set, float Kd_set)
 {
   FLOATUNION_t Kp;
@@ -820,6 +923,7 @@ void DCMTCommandPH(int address, float pHSetpoint_set, float currentPH_set)
 
 void DCMTCommandPHPID(int address, float Kp_set, float Ki_set, float Kd_set)
 {
+  //autotune code here
   FLOATUNION_t Kp, Ki, Kd;
   Kp.number = Kp_set;
   Ki.number = Ki_set;

From c46973b07e18eb943ebd81e03425c238cc997e04 Mon Sep 17 00:00:00 2001
From: jmklapko <jmklapko@mtu.edu>
Date: Tue, 25 Mar 2025 20:11:06 -0400
Subject: [PATCH 14/18] Added temperature offsets for calibrating thermocouples

---
 RLHT_R2/RLHT_R2.ino | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/RLHT_R2/RLHT_R2.ino b/RLHT_R2/RLHT_R2.ino
index c45c821..e34529a 100644
--- a/RLHT_R2/RLHT_R2.ino
+++ b/RLHT_R2/RLHT_R2.ino
@@ -20,6 +20,10 @@
 long lastThermoRead = 0;
 long lastSerialPrint = 0;
 
+//Edit these offsets to calibrate thermocouples as needed
+double thermo1_offset = 4.0;
+double thermo2_offset = 4.0;
+
 bool E_STOP = false;
 
 CRGB led;
@@ -224,8 +228,8 @@ void measureThermocouples()
 {
   if(millis() - lastThermoRead >= THERMO_UPDATE_TIME_MS)
   {
-    RLHT.thermo1 = CH1.readCelsius();
-    RLHT.thermo2 = CH2.readCelsius();
+    RLHT.thermo1 = CH1.readCelsius() + thermo1_offset;
+    RLHT.thermo2 = CH2.readCelsius() + thermo2_offset;
     lastThermoRead = millis();
   }
 }
@@ -357,4 +361,4 @@ void setParametersRLHT(char *in_data)
       }
       break;
   }
-}
\ No newline at end of file
+}

From b1b1fd3a770b5f68df544279f1ef42ba355d6637 Mon Sep 17 00:00:00 2001
From: jmklapko <jmklapko@mtu.edu>
Date: Thu, 27 Mar 2025 20:32:55 -0400
Subject: [PATCH 15/18] Add calculateTurbidity to execution path

Calculate turbidity in NTU instead of reporting a voltage.
---
 DCMT_R1/DCMT_R1.ino | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/DCMT_R1/DCMT_R1.ino b/DCMT_R1/DCMT_R1.ino
index fd519e5..197add4 100644
--- a/DCMT_R1/DCMT_R1.ino
+++ b/DCMT_R1/DCMT_R1.ino
@@ -207,6 +207,7 @@ void loop() {
     }
     else if(DCMT.turbPump1 || DCMT.turbPump2){   // run as turbidity pump
       measureTurbidity();
+      calculateTurbidity();
     }else{      // run as continuous motor/pump
       actuateMotors();
     }
@@ -292,15 +293,20 @@ void measureTurbidity()
   }
 }
 
+//Maybe needs to change to: Output Voltage (V)= -0.0008× (Turbidity of Water (NTU)) + 3.9994
+//Needs testing and calibration with known NTU values
 // need to change once biomass is calibrated
 void calculateTurbidity(){
-  float x;
-  if(DCMT.turbVoltage[1] >= 2.5){
-    x = DCMT.turbVoltage[1];
-  }else{
-    x = 2.5;
+  for(int i = 0; i < 2; i++){
+    float x;
+    if(DCMT.turbVoltage[i] >= 2.5){
+      x = DCMT.turbVoltage[i];
+    }else{
+      x = 2.5;
+    }
+    DCMT.currentTurbidity[i] = (5742.3 - 1120.4*x) * x - 4352.9 - TURBIDITY_OFFSET;
+    //DCMT.currentTurbidity[i] = (x-3.9994)/(-0.0008); //Potential equation replacement
   }
-  DCMT.currentTurbidity[1] = (5742.3 - 1120.4*x) * x - 4352.9 - TURBIDITY_OFFSET;
 }
 
 void setPIDTunings()

From e58cdde634c66620deeca8628053a68f1a9859a9 Mon Sep 17 00:00:00 2001
From: jmklapko <jmklapko@mtu.edu>
Date: Fri, 28 Mar 2025 12:05:16 -0400
Subject: [PATCH 16/18] Report calculated turbidity to loaf instead of voltage
 reading

---
 DCMT_R1/DCMT_R1.ino | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/DCMT_R1/DCMT_R1.ino b/DCMT_R1/DCMT_R1.ino
index 197add4..35ce172 100644
--- a/DCMT_R1/DCMT_R1.ino
+++ b/DCMT_R1/DCMT_R1.ino
@@ -421,12 +421,12 @@ void requestEvent() {
   if(isnan(DCMT.turbVoltage[0]) || !(DCMT.turbPump1))
     turb1.number = 0;
   else
-    turb1.number = DCMT.turbVoltage[0];
+    turb1.number = DCMT.currentTurbidity[0];
 
   if(isnan(DCMT.turbVoltage[1]) || !(DCMT.turbPump2))
     turb2.number = 0;
   else
-    turb2.number = DCMT.turbVoltage[1];
+    turb2.number = DCMT.currentTurbidity[1];
 
   for (int i = 0; i < 4; i++) Wire.write(turb1.bytes[i]);
   for (int i = 0; i < 4; i++) Wire.write(turb2.bytes[i]);

From 85f768b0e2fa2dc1351ae2ba4afc3360c954d14f Mon Sep 17 00:00:00 2001
From: jmklapko <jmklapko@mtu.edu>
Date: Tue, 1 Apr 2025 16:04:23 -0400
Subject: [PATCH 17/18] Add RLHTCommandOffset to ESP32

Allows for changing the offset of a thermocouple from the loaf
---
 src/BREAD-DARPA-Controls.ino | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/BREAD-DARPA-Controls.ino b/src/BREAD-DARPA-Controls.ino
index c460cdf..80a4fd1 100644
--- a/src/BREAD-DARPA-Controls.ino
+++ b/src/BREAD-DARPA-Controls.ino
@@ -849,6 +849,25 @@ void RLHTCommandPID(int address, byte heater, float Kp_set, float Ki_set, float
   Serial.println(Kd.number);
 }
 
+void RLHTCommandOffset(int address, byte heater, float offsetSetpoint)
+{
+  FLOATUNION_t offset;
+  offset.number = offsetSetpoint;
+
+  Wire.beginTransmission(address);
+  Wire.write('O');
+  Wire.write(heater);
+  for(int i=0; i<4; i++){
+    Wire.write(offset.bytes[i]);              // sends one byte
+  }
+  Wire.endTransmission();    // stop transmitting
+
+  Serial.print(address);
+  Serial.print('O');
+  Serial.print(heater);
+  Serial.print(offset.number);
+}
+
 void DCMTRequestTurbidity(int address, float* turbidity1, float* turbidity2)
 {
   bool data_received = false;
@@ -992,4 +1011,4 @@ float PHDORequest(int address)
     return atof(in_data);
   }else
     return 0;
-}
\ No newline at end of file
+}

From ff06f81285393ecf869fcfae690004c42e0e6d5e Mon Sep 17 00:00:00 2001
From: jmklapko <jmklapko@mtu.edu>
Date: Fri, 25 Apr 2025 11:47:44 -0400
Subject: [PATCH 18/18] Add support for changing offset using the website

---
 RLHT_R2/RLHT_R2.ino | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/RLHT_R2/RLHT_R2.ino b/RLHT_R2/RLHT_R2.ino
index e34529a..c0dda6d 100644
--- a/RLHT_R2/RLHT_R2.ino
+++ b/RLHT_R2/RLHT_R2.ino
@@ -21,8 +21,8 @@ long lastThermoRead = 0;
 long lastSerialPrint = 0;
 
 //Edit these offsets to calibrate thermocouples as needed
-double thermo1_offset = 4.0;
-double thermo2_offset = 4.0;
+double thermo1_offset = -4.0;
+double thermo2_offset = -4.0;
 
 bool E_STOP = false;
 
@@ -360,5 +360,16 @@ void setParametersRLHT(char *in_data)
         RLHT.Kd_2 = (double)float3.number;
       }
       break;
+    case 'O':
+      for(int i=0; i<4; i++) float1.bytes[i] = in_data[i+2];
+      if(in_data[1] == 1)
+      {
+        thermo1_offset = (double)float1.number;
+      }
+      if(in_data[1] == 2)
+      {
+        thermo2_offset = (double)float1.number;
+      }
+      break;
   }
 }