About

Method

Result

1. Arduino Uno Rev3

Overview

Arduino Uno is the ATmege328p based microcontroller. Consist of 14 digital pin ( each 6 for PWM outputs and 6 for analog inputs), Power jack, USB connection, 16 MHz ceramic resonator, reset button and ICSP header. Arduino uno work together with arduino IDE. To start with arduino, simply connect the power supply and USB cable to the arduino. Program is the added using arduino IDE application.

Tech Spec
Microcontroller : ATmega328P
Operating Voltage : 5V
Input voltage : 7-12V (recommended), 6-20V (limit)
Digital I/O Pins : 14
PWM Digital I/O Pins : 6
Analog Input Pins : 6
DC Current per I/O Pin : 20 mA
DC Current for 3.3V Pin : 50 mA
Clock Speed : 16 MHz

2. NodeMCU ESP8266 CH340

Overview

NodeMCU (Node MicroController Unit) is a microcontroller boarded with ESP8266, a an ultra-low-power UART-WiFi module, which serves as the foundation of the NodeMCU. These foundation provide Internet of Things (IoT) feature to the chip for network applications over the Internet as well completed with computer element such as CPU, RAM, networking (Wifi) as well as SDK and modern operation system.

Tech Spec
Microcontroller : ESP-8266 32-bit
Operating Voltage : 3.3V
Input voltage : 4.5V-10V
Digital I/O Pins : 11
Analog Input Pins : 1
Clock Speed : 80 MHz

3. LCD2004 Backlight LCD Display Unit (Green)

Overview

20 x 4 LCD display is composed of 4 line which enough for total of 20 character displayed in white digit over green backlight. High quality character representation is created of 5 x 8 dot which can be custom and define through arduino. To provide clear output display , a potentiometer should be connected to the backlight's VO (Display Contrast) input to adjust the display's contrast for optimal viewing. The potentiometer should be connected between ground and 5 volts and can range in size from 10K to 50K. The potentiometer's wiper output sends a variable voltage to the VO pin, which controls contrast. Note that the voltage need to be adjusted properly, or else the display can be solid blocks or too bright instead of displaying characters. The A (Anode) and K (Cathode) pins power the backlight. Typically, 5V is applied to power the LCD and It is not necessary to use an additional resistor because the backlight has a 51 ohm current limiting resistor.

Tech Spec
Display : 20 characters in 4 lines
Operating voltage : 5V
Contrast : adjustable with a 50K potentiometer onside
Module dimensions: 97 x 59 x 12 mm;
Viewing area size: 71 x 21 mm

4. Analog Water Turbidity Sensor Module

Overview

Analog turbidity sensors gauge the amount of turbidity to determine the quality of the water. The amount of total suspended solids (TSS) in the water affects the light transmittance and scattering rate, which can be used to identify suspended particles in the water. The level of liquid turbidity rises as the TSS does. The analogue turbidity sensor pre-amplifier module is capable of outputting both analogue and digital outputs. User can select the mode based on the MCU because the threshold in the digital signal mode is programmable. Turbidity sensors can be used in the measurement of any type water such as river and stream water quality as well as laboratory measurement

Tech Spec
Operating voltage : 5 V
Response time : <500 ms
Insulation resistance : 100 M (Min)
Output method : Analog
Analog output range : 0 – 4.5V
Operating Temperature: +5 to +90 ?C

5. Electrode PH Sensor Kit

Overview

The pH electrode probe provide dependable reading accuracy and can deliver a reading of the pH value almost instantly.The pH sensor contain salt solution which act as differentiator in producing an accurate change in output when comparing its pH level with ph level of the measured liquid.

Tech Spec
Operating voltage : 5V
Operating current : 5 – 10 mA
Range of pH reading : 0 – 14
Measurable liquid temperature : 0 – 80 C
Response time : 0.5 s
Falling time : 0.60 s
Power rating : 0.5 W
Module temperature : -10 to +50 C
Relative humidity level : 95% RH
Module dimension : 42 x 32 x 20 mm
Output type : Analog

6. DS18B20 Waterproof Temperature Sensor Probe

Overview

DS18B20-1 water temperature sensor is a waterproof sensor that can be use in measurement of liquid temperature

Tech Spec
Length of cord : 1 meter
Operating voltage : 3 – 5V
Operating current : 1.5mA (active)
Measuring temperature : -55 to +125C
Accuracy : -10 to +85 celsius
Pins : 2 Pins (DQ and GND)

7. Peristsltic Pump

Overview

Peristaltic pump is a combination of motor and a hose that work to pump up the fluid based on the vaccum principle. The mechanism work by compressing the peristaltic pump through rotating roller to create vaccum space inside the tube. Therefore as the vaccum space created inside the tube the water is pumped inside. As the roller rotate the water is pump out of the tube through positive displacement action

Tech Spec
Main material: engineering plastics
Pump tube material type: silicone / BPT
Overall length: 65mm
Motor length: 48.5mm
Voltage: DC3V/ DC6V / DC12V / DC24V
Flow range: 5.2ml/min~90ml/min
Working temp: 0~40 ℃
Relative humidity: <80%
Pulsation: 3 rolling wheel

8. Servo Motor

Overview

Servo motor is different from normal motor which can be program to generate desired movement using PWM signal of 50Hz. Depending on the type and specification, Some servo motor have high torque that strong enough to drive havier loads. Servo motor widely use in motion related project. Servo motor is controlable with PWM signal at 50Hz.

Tech Spec
Model : MG996R
Gear Material : Metal
Weight : 55g
Torque : 9.4kg-cm @ 4.8V / 11kg-cm @ 6.0V
Response speed : 0.17s/60
Operating voltage : 4.8 – 7.2V
Operating temperature : 0 to 55?C
Dead-zone pulse width : 5us
Type : Analog

Back To Top

1. Connection between water pH sensor and Arduino

Water pH sensor has 3 pins which are GND, VCC and Analog pin. In connection of water pH sensor to Arduino, GND and VCC are connected to GND and 5V pin respectively. While for Analog pin, it can be connected to any Analog pin available which are A0 – A5.

Source Code
The source code for the water Ph calculation and analogue connection between Arduino and pH sensor are provided below.

#include <OneWire.h> unsigned long int avgValue; float b; int buf[10],temp=0; class WaterpHMonitorandRegulator { public: float lerpH() { for(int i=0;i<10;i++) { buf[i]=analogRead(PIN_pH); delay(10); } for(int i=0;i<9;i++) { for(int j=i+1;j<10;j++) { if(buf[i]>buf[j]) { temp=buf[i]; buf[i]=buf[j]; buf[j]=temp; } } } avgValue=0; for(int i=2;i<8;i++) avgValue+=buf[i]; float pHVol=(float)avgValue*5.0/1024/6; phValue = -5.70 * pHVol + 16.34 ; return phValue; }

The source code for data display is provided below. Note that, “Serial.print” is used to display result on serial monitor while “lcd.print” display result on lcd display. If else condition is used to show three different water pH condition that are pH Base, pH Acid and pH natural.

//for water pH sensor display void atualizarLcd(float phValue) { if (phValue> pH_BASE) { Serial.print("Water Ph = "); Serial.println(phValue); lcd.setCursor(0, 0); lcd.print("pH BASE: "); lcd.print(phValue); lcd.print("pH"); } else if (phValue< pH_ACID) { Serial.print("Water Ph= "); Serial.println(phValue); Serial.print("Motor2Speed = "); Serial.println(motorSpeed); lcd.setCursor(0, 0); lcd.print("pH ACID: "); lcd.print(phValue); lcd.print("pH"); } else { Serial.print("Water Ph = "); Serial.println(phValue); Serial.print("Motor1&2Speed = "); Serial.println(motorSpeed); lcd.setCursor(0, 0); lcd.print("pH NORMAL: "); lcd.print(phValue); lcd.print("pH"); } } void setup() { pinMode(PIN_pH, INPUT); Serial.begin(115200); lcd.begin(20, 4); } void loop() { WaterpHMonitorandRegulator m; float phValue = m.lerpH(); m.atualizarLcd(phValue); }

2. Connection between water temperature and Arduino

Water pH sensor has 3 pins which are GND, VCC and Digital pin. In connection of water temperature sensor to Arduino, GND and VCC are connected to GND and 5V pin respectively. While for digital pin, can be connected to any digital pin available.

Source Code
The source code for the connection between Arduino and water temperature sensor are provided below.

#include <OneWire.h> #include <DallasTemperature.h> #define ONE_WIRE_BUS 7 OneWire oneWire(ONE_WIRE_BUS); DallasTemperature sensors(&oneWire); //Variable for temp sensor float Celsius = 0; float Fahrenheit = 0; void setup() { Serial.begin(115200); lcd.begin(20, 4); sensors.begin(); } void loop() { sensors.requestTemperatures(); Celsius = sensors.getTempCByIndex(0); Fahrenheit = sensors.toFahrenheit(Celsius); Serial.print("Temp:"); Serial.println(Celsius); lcd.setCursor(0, 1); lcd.print("Temp:"); lcd.print(Celsius); lcd.print(" c'"); delay(2000); }

3. Connection between water turbidity and Arduino

#include <OneWire.h> //variable for turbidity sensor int sensorPin = A1; float voltage; float ntu; void setup() { Serial.begin(115200); lcd.begin(20, 4); } int sensorValue = analogRead(A1); float voltage = sensorValue * (5.0 / 1024.0); if(voltage < 2.7) { ntu = 3000; } else { ntu = -1120.4*square(voltage)+5742.3*voltage-4353.8; } Serial.print("Turbidity Sensor Voltage: "); Serial.println(voltage); lcd.setCursor(0, 2); lcd.print("voltage:"); lcd.print(voltage); lcd.print(" V'"); Serial.print("Turbidity: "); Serial.println(ntu); lcd.setCursor(0, 3); lcd.print("TBDT:"); lcd.print(ntu); lcd.print(" NTU'");

4. Connection between nodeMCU and Arduino

For connection of nodeMCU to Arduino, GND and VCC are connected to GND and 5V pin respectively. While for serial communication, pin 5 and 6 of Arduino is connected to pin D6 and D5 of nodeMCU.

Source Code
The source code provided below. include library needed, declaration of connected pin etc.

Code for Arduino #include <SoftwareSerial.h> SoftwareSerial nodemcu(5, 6); Void setup () Serial. Begin(115200); Code for NodeMCU ESP8266 #include <SoftwareSerial.h> SoftwareSerial nodemcu(D6, D5); Void setup() Serial.begin(115200);

5. Connection between Arduino and LCD

For connection of nodeMCU to Arduino, GND and VCC are connected to GND and 5V pin respectively. Variable resistor is used to control the brightness the LCD.

Source Code
The source code for the connection between Arduino and water turbidity are provided below. The source code include library needed, declaration of connected pin etc. Lcd.setCursor(x,y) is used to set the position of the digit on the LCD display. (0,0) is mean that the digit written or displayed from the first column of first line while (0,1) indicate that digit display from first column of second raw.

#include <LiquidCrystal.h> LiquidCrystal lcd(12, 11, 5, 4, 3, 2); lcd.setCursor(0, 0); lcd.setCursor(0, 1); lcd.setCursor(0, 3);

Figure above show the result of lcd display for the code below. The code is set to display water Ph, water temp, turbidity voltage and turbidity result at line 1, line 2, line 3 and line 4 respectively

LCD code for water ph reading: lcd.setCursor(0, 0); lcd.print("pH BASE: "); lcd.print(phValue); lcd.print("pH"); LCD code for water Temp reading: lcd.setCursor(0, 1); lcd.print("Temp:"); lcd.print(Celsius); lcd.print(" c'"); LCD code for turbidity voltage reading: lcd.setCursor(0, 2); lcd.print("voltage:"); lcd.print(voltage); lcd.print(" V'"); Serial.print("Turbidity: "); Serial.println(ntu); LCD code for turbidity reading: lcd.setCursor(0, 3); lcd.print("TBDT:"); lcd.print(ntu); lcd.print(" NTU'");

6. between peristaltic pump Arduino

Automatic water Ph regulator work with combination of water Ph Sensor and peristaltic pump. The mechanism work by controlling the peristaltic pump operation through data provided by water Ph sensor. If else statement uses to define and carry out work for three different condition which are neutral, acidic, and alkaline water condition. Data for all the condition is provided by water Ph sensor which constantly measure the water ph. Whenever the measured data show alkaline or acidic indication, The neutralisation process take place by triggering the peristaltic pump to pump the appropriate neutralizing solution into the water. In neutral condition, there will no neutralization process taking places, thus both pump is in off condition.

Source Code
The source code provided below. include library needed, declaration of connected pin etc. In other to use the if else condition, the indication for each difference condition should be define first. Code above shows the indication of pH value for different water pH condition.

#include <OneWire.h> //Variable for ph sensor float pH_BASE = 8.5 float pH_ACID = 6.8 const int PIN_pH = A0 float phValue

The next step is to assigned Arduino pin for which motor is connected.

//variable for water pH regulator int motorSpeed; unsigned int PIN_MOTOR1 = 10 unsigned int PIN_MOTOR2 = 9 int sensorPin = A1;

Code below show the calculation for water Ph sensor and if else condition for water ph lcd display

class WaterpHMonitorandRegulator { public: float lerpH() { for(int i=0;i<10;i++) { buf[i]=analogRead(PIN_pH); delay(10); } for(int i=0;i<9;i++) { for(int j=i+1;j<10;j++) { if(buf[i]>buf[j]) { temp=buf[i]; buf[i]=buf[j]; buf[j]=temp; } } } avgValue=0; for(int i=2;i<8;i++) avgValue+=buf[i]; float pHVol=(float)avgValue*5.0/1024/6; phValue = -5.70 * pHVol + 16.34 ; return phValue; } //for water pH sensor display void atualizarLcd(float phValue) { if (phValue> pH_BASE) { Serial.print("Water Ph = "); Serial.println(phValue); lcd.setCursor(0, 0); lcd.print("pH BASE: "); lcd.print(phValue); lcd.print("pH"); } else if (phValue< pH_ACID) { Serial.print("Water Ph= "); Serial.println(phValue); Serial.print("Motor2Speed = "); Serial.println(motorSpeed); lcd.setCursor(0, 0); lcd.print("pH ACID: "); lcd.print(phValue); lcd.print("pH"); } else { Serial.print("Water Ph = "); Serial.println(phValue); Serial.print("Motor1&2Speed = "); Serial.println(motorSpeed); lcd.setCursor(0, 0); lcd.print("pH NORMAL: "); lcd.print(phValue); lcd.print("pH"); } }

Syntax below shows the if else program of water pH regulator. As measured water pH is greater that ph Base value which is 8.5pH, peristaltic pump for acidic solution is activate. Under true condition, the motorSpeed is set to 3000. which mean that the peristaltic pump is in on condition. Syntax analogWrite((PIN_MOTOR1, motorSpeed); use to send data for peristaltic pump activation.

void Motor1function(float phValue) { if(phValue> pH_BASE) { motorSpeed = 3000; analogWrite(PIN_MOTOR1, motorSpeed); Serial.print("Motor1Speed = "); Serial.println(motorSpeed); } else { motorSpeed = 0; analogWrite(PIN_MOTOR1, motorSpeed); } } void Motor2function(float phValue) { if(phValue< pH_ACID) { motorSpeed = 3000; analogWrite(PIN_MOTOR2, motorSpeed); } else { motorSpeed = 0; analogWrite(PIN_MOTOR2, motorSpeed); } } }; void setup() { pinMode(PIN_pH, INPUT); Serial.begin(115200); lcd.begin(20, 4); } void loop() { WaterpHMonitorandRegulator m; float phValue = m.lerpH(); m.atualizarLcd(phValue); }

Full Code

#include <SoftwareSerial.h> #include <ArduinoJson.h> #include <LiquidCrystal.h> #include <OneWire.h> #include <DallasTemperature.h> #define ONE_WIRE_BUS 7 LiquidCrystal lcd(12, 11, 5, 4, 3, 2); SoftwareSerial nodemcu(5, 6); OneWire oneWire(ONE_WIRE_BUS); DallasTemperature sensors(&oneWire); //Variable for temp sensor float Celsius = 0; float Fahrenheit = 0; //Variable for ph sensor float pH_BASE = 8.5; float pH_ACID = 6.8; const int PIN_pH = A0; float phValue; int sensorValue = 0; unsigned long int avgValue; float b; int buf[10],temp=0; //variable for water pH regulator int motorSpeed; unsigned int PIN_MOTOR1 = 10; unsigned int PIN_MOTOR2 = 9; int sensorPin = A1; //variable for turbidity sensor float voltage; float ntu; //code for water ph sensor and water pH regulator //water pH sensor class WaterpHMonitorandRegulator { public: float lerpH() { for(int i=0;i<10;i++) { buf[i]=analogRead(PIN_pH); delay(10); } for(int i=0;i<9;i++) { for(int j=i+1;j<10;j++) { if(buf[i]>buf[j]) { temp=buf[i]; buf[i]=buf[j]; buf[j]=temp; } } } avgValue=0; for(int i=2;i<8;i++) avgValue+=buf[i]; float pHVol=(float)avgValue*5.0/1024/6; phValue = -5.70 * pHVol + 16.34 ; return phValue; } //for water pH sensor display void atualizarLcd(float phValue) { if (phValue> pH_BASE) { Serial.print("Water Ph = "); Serial.println(phValue); lcd.setCursor(0, 0); lcd.print("pH BASE: "); lcd.print(phValue); lcd.print("pH"); } else if (phValue< pH_ACID) { Serial.print("Water Ph= "); Serial.println(phValue); Serial.print("Motor2Speed = "); Serial.println(motorSpeed); lcd.setCursor(0, 0); lcd.print("pH ACID: "); lcd.print(phValue); lcd.print("pH"); } else { Serial.print("Water Ph = "); Serial.println(phValue); Serial.print("Motor1&2Speed = "); Serial.println(motorSpeed); lcd.setCursor(0, 0); lcd.print("pH NORMAL: "); lcd.print(phValue); lcd.print("pH"); } } //water pH regulator void Motor1function(float phValue) { if(phValue> pH_BASE) { motorSpeed = 3000; analogWrite(PIN_MOTOR1, motorSpeed); Serial.print("Motor1Speed = "); Serial.println(motorSpeed); } else { motorSpeed = 0;s analogWrite(PIN_MOTOR1, motorSpeed); } } void Motor2function(float phValue) { if(phValue< pH_ACID) { motorSpeed = 3000; analogWrite(PIN_MOTOR2, motorSpeed); } else { motorSpeed = 0; analogWrite(PIN_MOTOR2, motorSpeed); } } }; void setup() { pinMode(PIN_pH, INPUT); pinMode(PIN_MOTOR1, OUTPUT); pinMode(PIN_MOTOR2, OUTPUT); Serial.begin(115200); lcd.begin(20, 4); sensors.begin(); nodemcu.begin(115200); Serial.println("Program started"); } void loop() { Serial.println("Receive Data From Sensors"); Serial.println(); Serial.print("Temp:"); Serial.println(Celsius); sensors.requestTemperatures(); Celsius = sensors.getTempCByIndex(0); Fahrenheit = sensors.toFahrenheit(Celsius); lcd.setCursor(0, 1); lcd.print("Temp:"); lcd.print(Celsius); lcd.print(" c'"); WaterpHMonitorandRegulator m; float phValue = m.lerpH(); m.atualizarLcd(phValue); m.Motor1function(phValue); m.Motor2function(phValue); int sensorValue = analogRead(A1); float voltage = sensorValue * (5.0 / 1024.0); if(voltage < 2.7) { ntu = 3000; } else { ntu = -1120.4*square(voltage)+5742.3*voltage-4353.8; } Serial.print("Turbidity Sensor Voltage: "); Serial.println(voltage); lcd.setCursor(0, 2); lcd.print("voltage:"); lcd.print(voltage); lcd.print(" V'"); Serial.print("Turbidity: "); Serial.println(ntu); lcd.setCursor(0, 3); lcd.print("TBDT:"); lcd.print(ntu); lcd.print(" NTU'"); StaticJsonDocument<1000> doc; Serial.println(); Serial.println("------------------Sending Data To Nodemcu------------------------------"); Serial.println(); doc["Temp"] = Celsius; doc["phValue"]= phValue; doc["voltage"]= voltage; doc["ntu"]= ntu; serializeJson(doc, nodemcu); delay(2000); }

PageIndex.h (coding for html webpage interface) const char MAIN_page[] PROGMEM = R"=====( <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet"> <script src="https://code.highcharts.com/highcharts.js"></script> <style> html { font-family: Arial; display: inline-block; margin: 0px auto; text-align: center; } h1{ font-size: 2.0rem; } p { font-size: 2.0rem; color:white;} .units { font-size: 1.2rem; } .dht-labels { font-size: 1.5rem; vertical-align:middle; padding-bottom: 15px; } .collapsible { background-color: #045D5D; color: white; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: center; outline: none; font-size: 15px; } .active, .collapsible:hover { background-color: #555; } .content { padding: 0 18px; display: none; overflow: hidden; background: #24623f; } .container { position: relative; text-align: center; color: white; } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2.0rem; color: white; font-weight: bold; background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0, 0.5); /* Black w/opacity/see-through */ width: 80%; padding: 40px; } </style> </head> <body> //CODE FOR IMAGE SLIDE SHOW <div class="container"> <section> <img class="mySlides" src="https://i.pinimg.com/originals/06/f7/fa/06f7fa3fe3dca0775514a35609225a2c.jpg" width="100%" Height="500" > <img class="mySlides" src="https://fishlab.com/wp-content/uploads/2017/09/Measuring-the-pH-of-fish-tank-water-with-pH-test.jpg" width="100%" Height="500" > <img class="mySlides" src="https://www.adbio.com/wp-content/uploads/2020/12/jaroslaw-kwoczala-ynwGXMkpYcY-unsplash-scaled.jpg" width="100%" Height="500" > <img class="mySlides" src="https://th.hach.com/cb30fdac2497e605a8bfc965e1289cb3a9/cms/images/turbidity/hand_holding_turbid_water.jpg" Width="100%" Height="500"> </section> <div class="centered">Smart Fish Monitoring System with pH Regulator & Automated Fish Feeder</div> </div> //SCRIPT FOR AUTOMATIC SLIDESHOW <script> var myIndex = 0; carousel(); function carousel() { var i; var x = document.getElementsByClassName("mySlides"); for (i = 0; i < x.length; i++) { x[i].style.display = "none"; } myIndex++; if (myIndex > x.length) {myIndex = 1} x[myIndex-1].style.display = "block"; setTimeout(carousel, 5000); } </script> //CODE FOR PARAMETER DISPLAY <button type="button" class="collapsible">Monitoring System Parameter</button> <div class="content"> <p> <i class="fa fa-thermometer-half" style="font-size:3.0rem;color:#62a1d3;"></i> <span class="dht-labels">Water Temperature : </span> <span id="Temperature1Value">0</span> <sup class="units">°C</sup> </p> <p> <i class="fas fa-vial" style="font-size:3.0rem;color:#62a1d3;"></i> <span class="dht-labels">Water PH : </span> <span id="phValue">0</span> <sup class="units">°pH</sup> </p> <p> <i class="fas fa-tint" style="font-size:3.0rem;color:#62a1d3;"></i> <span class="dht-labels">Water Turbidity : </span> <span id="ntu">0</span> <sup class="units">°NTU</sup> </p> <p> <i class="far fa-clock" style="font-size:1.0rem;color:#e3a8c7;"></i> <span style="font-size:1.0rem;">Time </span> <span id="time" style="font-size:1.0rem;"></span> <i class="far fa-calendar-alt" style="font-size:1.0rem;color:#f7dc68";></i> <span style="font-size:1.0rem;">Date </span> <span id="date" style="font-size:1.0rem;"></span> </P> //CODE FOR PARAMETER CHART DISPLAY //WATER TEMPERATURE CHART <button type="button" class="collapsible">Water Temperature Chart</button> <div class="content"> <div id="chart-temperature" class="container"></div> </div> //WATER PH CHART <button type="button" class="collapsible">Water pH Chart</button> <div class="content"> <div id="chart-humidity" class="container"></div> </div> //WATER TURBIDITY CHART <button type="button" class="collapsible">Water Tutbidity Chart</button> <div class="content"> <div id="chart-turbidity" class="container"></div> </div> </div> //SCRIPT FOR COLLAPSIBLE BUTTON <script> var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } </script> //SCRIPT TO CALL FUNCTION REPATATIVELY WITH 1 SECOND INTERVAL <script> setInterval(function() { getTemperatureData1(); getpHData(); getntuData(); Time_Date(); }, 1000); //SCRIPT TO GET TEMPERATURE VALUE function getTemperatureData1() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("Temperature1Value").innerHTML = this.responseText; } }; xhttp.open("GET", "data1", true); xhttp.send(); } //SCRIPT TO GET PH VALUE function getpHData() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("phValue").innerHTML = this.responseText; } }; xhttp.open("GET", "data2", true); xhttp.send(); } //SCRIPT TO GET TURBIDITY VALUE function getntuData() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("ntu").innerHTML = this.responseText; } }; xhttp.open("GET", "data3", true); xhttp.send(); } //SCRIPT TO GET TIME function Time_Date () { var t = new Date(); document.getElementById("time").innerHTML = t.toLocaleTimeString(); var d = new Date(); const dayNames = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday","Saturday"]; const monthNames = ["January", "February", "March", "April", "May", "June","July", "August", "September", "October", "November", "December"]; document.getElementById("date").innerHTML = dayNames[d.getDay()] + ", " + d.getDate() + "-" + monthNames[d.getMonth()] + "-" + d.getFullYear(); } //SCRIPT FOR TEMPERATURE CHART PLOTTING var chartT = new Highcharts.Chart ({ chart:{ renderTo : 'chart-temperature' }, title: { text: 'Water Temperature' }, series: [{showInLegend: false,data: []}], plotOptions: {line: { animation: false, dataLabels: { enabled: true }},series: { color: '#059e8a' }}, xAxis: { type: 'datetime',dateTimeLabelFormats: { second: '%H:%M:%S' }}, yAxis: {title: { text: 'Temperature (Celsius)' }}, credits: { enabled: false } }); setInterval(function ( ) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var x = (new Date()).getTime(), y = parseFloat(this.responseText); if(chartT.series[0].data.length > 40) {chartT.series[0].addPoint([x, y], true, true, true);} else {chartT.series[0].addPoint([x, y], true, false, true);} } }; xhttp.open("GET", "data1", true); Xhttp.send(); }, 1000 ) ; //SCRIPT FOR WATER PH CHART PLOTTING var chartH = new Highcharts.Chart ({ chart:{ renderTo:'chart-humidity' }, title: { text: 'water pH ' }, series: [{showInLegend: false,data: []}], plotOptions: {line: { animation: false,dataLabels: { enabled: true }}}, xAxis: {type: 'datetime',dateTimeLabelFormats: { second: '%H:%M:%S' }}, yAxis: {title: { text: 'Humidity (%)' }}, credits: { enabled: false } }); setInterval(function ( ) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var x = (new Date()).getTime(), y = parseFloat(this.responseText); if(chartH.series[0].data.length > 40) {chartH.series[0].addPoint([x, y], true, true, true);} else {chartH.series[0].addPoint([x, y], true, false, true);} } }; xhttp.open("GET", "data2", true); xhttp.send(); }, 1000 ) ; //SCRIPT FOR WATER TURBIDITY CHART PLOTTING var chartN = new Highcharts.Chart ({ chart:{ renderTo : 'chart-turbidity' }, title: { text: 'Water Turbidity' }, series: [{showInLegend: false,data: []}], plotOptions: {line: { animation: false,dataLabels: { enabled: true }},series: { color: '#059e8a' }}, xAxis: { type: 'datetime',dateTimeLabelFormats: { second: '%H:%M:%S' }}, yAxis: {title: { text: 'Turbidity (ntu)' }}, credits: { enabled: false } }); setInterval(function ( ) { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var x = (new Date()).getTime(), y = parseFloat(this.responseText); if(chartN.series[0].data.length > 40) {chartN.series[0].addPoint([x, y], true, true, true);} else {chartN.series[0].addPoint([x, y], true, false, true);} } }; xhttp.open("GET", "data3", true); xhttp.send(); }, 1000 ) ; </script> </body> </html> )=====";