hydropnonics

by ltdonova

HTML

<!DOCTYPE html>
<html>
<head>
  <title>ESP32 Hydroponics Web Server</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="data:,">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
 
  <link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
  
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  <script>
    window.jQuery || document.write('<script src="http://mysite.com/jquery.min.js"><\/script>')</script>


<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>

  <script src="script.js"></script>

  <script src="https://canvasjs.com/assets/script/canvasjs.min.js" type="text/javascript"></script>


</head>
<body>
  <h1>ESP32 Hydroponics Web Server </h1>
  <div class="tabs">
    <ul>
      <li><a  onclick="openTab(event, 'section2', 'section2')">Air Temperature</a></li>
      <li><a  onclick="openTab(event, 'section2', 'section3')">Air Humidity</a></li>
      <li><a  onclick="openTab(event, 'section4')">Water Temperature</a></li>
      <li><a  onclick="openTab(event, 'section5')">Water Level</a></li>
      <li><a  onclick="openTab(event, 'section6')">pH</a></li>
      <li><a  onclick="openTab(event, 'section7')">Password change</a></li>
      <li><a  onclick="openTab(event, 'section8')">Parameter Configuration</a></li>
      <li><a  onclick="openTab(event, 'section9')">MQTT Configuration</a></li>
      <li><a  onclick="openTab(event, 'section1')">Home</a></li>

    </ul>
  
  </div>
      <section id="section1" class="tabcontent">
        <h2>Error Messages: </h2>
        <p id="error">Sensor data for Water Temperature has...

CSS

html {
  font-family: Helvetica;
  display: inline-block;
  margin: 0px auto;
  text-align: center;
}
h1{
  color: #0F3376;
  padding: 2vh;
}
p{
  font-size: 1.5rem;
}
.button {
  display: inline-block;
  background-color: #008CBA;
  border: none;
  border-radius: 4px;
  color: white;
  padding: 16px 40px;
  text-decoration: none;
  font-size: 30px;
  margin: 2px;
  cursor: pointer;
}
.button2 {
  background-color: #f44336;
}

.table, th, td {
  border-collapse: collapse;
  border: 1px solid black;
  text-align: center;
  align-self: center;
  margin: auto;
}

.table:hover {
  background-color: #9b75d8;
}


*:focus {
  outline: 1px dotted blue;
}
#error{
  background-color: #F27272;
  border-radius: 10px;
  padding: 20px;
  
}
h1{
  color: #0F3376;
  padding: 2vh;
  margin: auto;
}
#section1 {
  display: block;
}

.tabs ul{
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid #ccc;
}

.tabs li {
  display: inline-block;
  font-size: 14px;
  width: 20%;
}

.tabs li a{
  user-select: none; 
  display: block;
  position: relative;
  overflow: hidden;
  padding: 20px;
  text-decoration: none;
  text-align: center;
  font-weight: bold;
  color: black;
}

.tabs li a:before{
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: #1E88E5;
  transform: translateZ(0) translateY(100%);
  z-index: -1;
}

.tabs li a:hover{
  color: #0F3376;
  background: #1ee599;

}

.tabs li a[aria-selected]{
  color: white;

}

.tabs li a[aria-selected]:before{
  transform: translateZ(0) translateY(0);
}

.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

JavaScript

function logoutButton() {
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/logout", true);
  xhr.send();
  setTimeout(function(){ window.open("/logged-out","_self"); }, 1000);
}

function openTab(evt, tabSection, tabName) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class="tabcontent" and hide them
  tabcontent = document.getElementsByClassName("tabcontent");
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class="tabs" and remove the class "active"
  tablinks = document.getElementsByClassName("tabs");
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(tabSection).style.display = "block";
  evt.currentTarget.className += " active";

  if(tabName == "section2" || tabName == "section3")
    renderChart(tabName);
}

function renderChart(tabName){

  // initialize variables 
  var chartTitleL = "blank";
  var yAxisL = "blank";
  var xAxisL = "time";
  var jsonFileL = "/test.json";
  var chartTitleH = "blank";
  var yAxisH = "blank";
  var xAxisH = "Day";
  var jsonFileH = "/test.json";
  
  // set variables to correct lables dependent on section the page is in
  switch(tabName) {
    case "section2":
      chartTitleL = "Live Air Temperature";
      yAxisL = "Fahrenheit";
      jsonFileL = "/data1.json";
      chartTitleH = "Daily Air Temperature Averages";
      yAxisH = "Fahrenheit";
      jsonFileH = "/daily1.json";
      break;
    case "section3":
      chartTitleL = "Live Air Humidity";
      yAxisL = "%";
      jsonFileL = "/data2.json";
      chartTitleH = "Daily Air Humidity Averages";
      yAxisH = "%";
      jsonFileH = "/daily2.json";
      break;
    default:
      // code block
  }
  
  // initialize data arrays
  var dataPointsL = [];
  var dataPointsH = ...