Read Later

Introduction

Create a professional website communicating Arduino Ethernet Shield by using HTML, CSS, JavaScript, and PHP through your Localhost.

Update

How to use TheAmplituhedron.com to improve IoT projects? is my new project that handles server-side programming for you. By using TheAmplituhedron.com as a host, you can send and get data packets effortlessly over the Internet.

Description

Creating a professional website to control my aquarium and my irrigation system in my home and to receive the information about the home when I am not at the home is the main aspect of this project.

To achieve that goal, I created the Arduinautomotion project that includes 4 different HTML pages (Arduinautomotion.php, Arduinautomotioncontrol.php, Arduinautomotion
formvalue.php, Arduinautomotion
communication.php) in my Apache localhost.

Also, the Arduino Ethernet Shield hosts another HTML web page (ArduinoSide.php) which can be reached with the chosen IPAddress, to communicate with the Arduinautomotion website.

I had thought about this project since I had to go a vacation for 2 weeks and I could not make the adjustments of my aquarium because of it. Sometimes I need to shut down the internal filter to avoid the oxygen level increasing in the aquarium or I need to open my feeder to feed the fish remotely. I added six options to control my aquarium's content and one option to activate the irrigation system.

Furthermore, you can easily get the data about the home (such as temperature and humidity values come from DHT11 Sensor or methane gas value in the home comes from MQ4 Sensor) with Arduinautomotion through Arduino Ethernet Shield.

Thus, the Arduinautomotion website has an easy interface to get and send data about the home from Arduino.

HTML, CSS, JavaScript, PHP, and jQuery languages' knowledge will be required to understand whole project's content so that this is just a showcase for the project but if you know the languages, you can find all the web pages which the project includes as PHP code files below.

Note: I used Notepad++ to program the web pages.

Slide

I used HTML forms, PHP Methods, and PHP $_SESSION [""] to get and to send data between the web pages. Get Method is easier than Post Method to use for communication but Post Method is more secure than Get Method so that I used Post Method to communicate between the web pages except for the ArduinoSide web page. However, Get Method is the easiest way to communicate with Arduino Ethernet Shield because HTTP GET Request is much easier than Post Request so I used Get Method for the ArduinoSide web page. In addition to, PHP $_SESSION [""] is the way to save the data permanently between the web pages more than two.

PHP Forms Link

PHP Sessions Link

How to set up the website on The Apache HTTP Server(Localhost)

The Apache HTTP Server is efficient for that kind of hosting but you can choose the XAMPP or another hosting server instead of it. In my case, AppServ >> www >> Arduinautomotion.php and its contents. I used my own IPAddress ("192.168.1.20" refers to Localhost) to access the web pages, but you have to use your IPAddress.

Apache Web Server to Run PHP on Windows

Figure - 4.1

All contents Arduinautomotion.php has added at Downloads below.

How to connect with your Localhost from Android Devices

Windows differs from MAC for this job but the link below can be helpful for Windows.

Localhost to Android

After that, at the same Wİ-Fİ network you can easily access Arduinautomotion.php with your own IPAddress.

How to access your Localhost over Wi-Fi

Windows differs from MAC for this job but the link below can be helpful for Windows.

It works with your external IPAddress but you sure about that only you know the external IPAddress because it can be dangerous way to host.

Wifi Connecting Link

Also, you have to use port forwarding to access ArduinoSide.php and it works with the IPAddress you choose in the ArduinoSide code below.

Port Forwarding

Arduinauto
motion.php

It is the main page to communicate with Arduino Ethernet Shield, you can give commands from this page to Arduino and get the data about the home from Arduino easily.

The Change Menu explains the situations changing and shows which part is an object and which part is a sensor by changing parts' colour.

By the changing circles, it shows the sensors' values and the objects' situations.

Slide

1) Room Section

All the data about the room which comes from Arduinautomotion
communication.php will be shown in the Room Section.

Before:

Figure - 4.2

Figure - 4.3

After:

Figure - 4.4

Figure - 4.5

2 )Aquarium Section

Whatever combinations you choose about the aquarium's parts with the HTML Forms will be sent to Arduinautomotion
formvalue.php after that it will return as an output from Arduinautomotioncontrol.php to Arduinautomotion.php.

Before:

Figure - 4.6

Figure - 4.7

After:

Figure - 4.8

3) Plant Section

The Hygrometer Sensor's values can be observed and starting the irrigation system can be considered through values. As the Aquarium Section the data will return as an output from Arduinautomotioncontrol.php to Arduinautomotion.php.

Before:

Figure - 4.9

Figure - 4.10

After:

Figure - 4.11

Figure - 4.12

4) Guide Section

It contains the Arduinautomotion
formvalue.php web page to observe the choices of the form again. In addition to, it includes some instructions of the project and a picture which explains the communication process.

Slide

Figure - 4.13

5 )Alert Box

Whichever values are in the range of the danger, an Alert Box which includes a Spider-man video file and an audio file ("Spider-sense is tingling") will appear when the Arduinautomotion.php web page is reloaded.

Figure - 4.14

6) Parts of Arduinautomotion.php

The re-sizable websites as guidelines:

Slide

The menu of the changing circles:

Slide

Test to the view of the Arduinautomotion:

INSPECT

Arduino
motion
control.php

It is embedded in Arduinautomotion.php web page to get all data as $_SESSION [" "] from Arduinautomotion
formvalue.php and Arduinautomotion
communication.php.

It saves the data permanently through the PHP pages.

Arduinauto
motion
formvalue.php

It gets the choices of the form from the Arduinautomotion.php and sends them ArduinoSide and Arduinautomotioncontrol.php. It is embedded in the Arduinautomotion.php web page's Guide section but also it is accessible with a new tab.

Figure - 4.15

Arduinauto
motion
communication
.php

The data comes from ArduinoSide is saved by Arduinautomotion
communication.php after that it sends the data to Arduinautomotioncontrol.php automatically

Figure - 4.16

ArduinoSide

It is hosted by Arduino Ethernet Shield through DNS and you can access it with the IPAddress you choose in the ArduinoSide code below (as https://yourChosenIPAddress ).

Figure - 4.17

Connections

Just make the connections as it is explained in the ArduinoSide code and the Fritzing picture below. Connect the one-way plugs and sockets to the 2-way relays and paste all components to a plain such as a cork board.

// Arduino 
//
//                                   DHT11 Module
// Pin 2   -------------------------
//
//                                   2 Way Relay (1)
// Pin 3   -------------------------
// Pin 4   -------------------------
//
//                                   2 Way Relay (2)
// Pin 5   -------------------------
// Pin 6   -------------------------
//
//                                   2 Way Relay (3)
// Pin 7   -------------------------
// Pin 8   -------------------------
//
//                                   2 Way Relay (4)
// Pin 9   -------------------------
//                                   Arduno Ethernet Shield
// Pin 10  --------------------------
// Pin 11  --------------------------
// Pin 12  --------------------------
// Pin 13  --------------------------
//
//                                   LDR
// AO      -------------------------- 
//                             
//                                   Flame Sensor 
// A1      --------------------------
//
//                                   MQ4   Sensor
// A2      --------------------------
//
//                                   Hygrometer Module (1)
// A3      --------------------------
//
//                                   Hygrometer Module (2)
// A4      --------------------------
//
//                                   Hygrometer Module (3)
// A5      --------------------------
//

Slide

The Arduino code is basically similar to the WebServer code which is in the Ethernet library examples folder.

I only added some codes to control sensors and to run commands which came from the Arduinautomotion website.

And connect the ADSL Cable from Arduino Ethernet Shield to The Router.

After the Arduino code is run, the Arduinautomotion website sends and gets data from Arduino through LAN over Wİ-Fİ.

Figure - 4.18

I tested the project after that I connect it with my aquarium and my irrigation system (it is basically a water motor), the project works great. :) It is the test video of the Arduinautoumotion project. I edited it with the trial version of Filmora and I did not remove the watermark because of the respect of their work.

Computer:

Android:

Schematics

Arduinautomotion

Download

Graphics

Download

Downloads

Favicon

Download

Spider-man video file

Download

Spider-man audio file

Download

Codes

Arduinautomotionhome.php

Download





<?php
session_start();
?>
<!DOCTYPE html>
<html>

<?php include 'Arduinautomotioncontrol.php'; ?>

<head>

<link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link>

<style>
html{
background-color:rgb(0, 0, 0);
}

button{
cursor:pointer;
user-select:none;
}
form{
user-select:none;
}

iframe{
    user-select:none;
}

p{
cursor:default;
user-select:none;
}

#guideText{
position:absolute;
top:400px;
font-size:20px;
color:white;
height:420px;
width:1000px;
overflow:auto;
}

img.icon{
user-select:none;
transiton:opacity 2s;
cursor:crosshair;
}
.icon:hover{opacity:0.5}

div.home{
background-color:rgb(25, 25, 25);
height:100px;
width:1320px;
position:sticky;
top:530px;
left:10px;
border:10px solid;
border-radius:20px;
border-color:rgb(35, 35, 35);
}

div.homeselector{
background-color:rgb(17, 17, 17);
height:60px;
width:220px;
border:2px solid;
border-radius:5px;
border-color:rgb(35, 35, 35);
transition:height width 0.5s;
cursor:pointer;
}.homeselector:hover{height:70px;width:240px;}

div.infopanel{
background-color:rgb(25, 25, 25);
position:absolute;
top:680px;
left:700px;
height:300px;
width:600px;
border:10px solid;
border-radius:20px;
border-color:rgb(35, 35, 35);
}

div.color{
position:absolute;
height:50px;
width:100px;
transition:height width 0.5s;
border:0.5px solid;
border-radius:100px;
border-color:transparent;
cursor:pointer;
}.color:hover{height:60px;width:110px;}

section.menuselector{
background-color:rgb(99, 99, 99);
height:150px;
width:200px;
padding:10px;
border:10px solid;
border-radius:20px;
border-color:rgb(35, 35, 35);
transition:border-color 0.5s,width 0.5s,height 0.5s;
}.menuselector:hover{border-color:red;height:160px;width:210px;}

svg.svg{
position:absolute;
top:680px;
left:10px;
background-color:transparent;
}

summary{
user-select:none;
}

iframe.guide{
position:absolute;
height:200px;
width:250px;
resize:both;
overflow:auto;
border:5px solid transparent;
transition:border-color 2s,height width 2s;
}.guide:hover{height:220px;width:270px;border-color:red;}
    
footer{
position:absolute;
top:2000px;
left:20px;
width:1300px;
height:200px;
border-width:5px;
border-radius:10px;
border-style:dashed;
border-color:black;
background-color:rgb(51, 51, 51);
}

div.animationbox{
background-color:white;
position:absolute;
top:5px;
left:10px;
width:10px;
height:10px;
border:5px solid black;
border-radius:50px;
animation:move 10s infinite;
}
@keyframes move{
 0%   {top: 5px;left:10px;background-color:white;border-color:black;}
 16%  {top: 5px;left:650px;background-color:black;border-color:white;}
 32%  {top: 5px;left:1275px;background-color:white;border-color:black;}
 48%  {top: 170px;left:1275px;background-color:black;border-color:white;}
 64%  {top: 170px;left:650px;background-color:white;border-color:black;}
 80%  {top: 170px;left:10px;background-color:black;border-color:white;}
}

a.openNewTab{
color:white;
position:absolute;
top:30px;
left:500px;
text-decoration:none;
font-size:30px;
transition:color 0.1s;
}.openNewTab:hover{color:green;}

select{
    cursor:pointer;
}

input.activateinput{
      cursor:pointer;
      position:absolute;
      top:270px;
      left:410px;
      color:white;
      border-color:transparent;
      background-color:transparent;
      font-weight:bold;
      font-size:40px;
      transition:color 0.1s;
}.activateinput:hover{color:red;}

img.spidey{
    position:absolute;
    top:400px;
    height:300px;
    width:350px;
    border:5px solid black;
}

#refresh{
    user-select:none;
    position:absolute;
    top:120px;
    left:600px;
    width:250px;
    height:250px;
    cursor:pointer;
    transition: border 0.5;
}#refresh:hover{border:5px solid green;}

#spideyVideo{
    position:absolute;
    top:0px;
    left:5px;
    width:250px;
    height:250px;
}

#BoxBackGround{
    display:none;
    background-color:rgb(214, 8, 8);
    position:fixed;
    top:0px;
    left:0px;
    opacity:0.7;
    width:0px;
    height:0px;
    
}
#Box{
    display:none;
    position:fixed;
    top:10px;
    background: url("https://media.giphy.com/media/3o7qDNfxtNRtLVv8qs/giphy.gif");
    background-color:black;
    background-repeat: no-repeat;
    background-size: 600px 200px;
    width:600px;
    height:200px;
    border: 5px solid black;
    border-radius:20px;
}

#times{
    position:absolute;
    color:white;
    top:0px;
    left:550px;
    font-weight: bold;
    font-size:40px;
    cursor:pointer;
    transition: color 0.5s;
    user-select:none;
}#times:hover{color:red;}

#BoxText{
    position:absolute;
    top:150px;
    left:300px;
    color:white;
    font-size:25px;
    user-select:none;
    cursor:default;
}

li.colorfulLi{
    user-select:none;
    transition:color 0.1s ;
}.colorfulLi:hover{color:green;}

a{
    user-select:none;
}

#StartInputText{
    position:absolute;
    top:90px;
    left:30px;
    color:white;
    border-color:transparent;
    background-color:transparent;
    font-weight:bold;
    font-size:20px;

}

#StopInputText{
    position:absolute;
    top:90px;
    left:130px;
    color:white;
    border-color:transparent;
    background-color:transparent;
    font-weight:bold;
    font-size:20px;

}
    
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
        $("#roomshome").click(function(){
         $(this).css("border-color", "red");
         $(aquariumshome).css("border-color", "rgb(35, 35, 35)");
         $(plantshome).css("border-color", "rgb(35, 35, 35)");
         $(guideshome).css("border-color", "rgb(35, 35, 35)");
    });
        $("#aquariumshome").click(function(){
         $(roomshome).css("border-color", "rgb(35, 35, 35)");
         $(this).css("border-color", "red");
         $(plantshome).css("border-color", "rgb(35, 35, 35)");
         $(guideshome).css("border-color", "rgb(35, 35, 35)");
    });
        $("#plantshome").click(function(){
         $(roomshome).css("border-color", "rgb(35, 35, 35)");
         $(aquariumshome).css("border-color", "rgb(35, 35, 35)");
         $(this).css("border-color", "red");
         $(guideshome).css("border-color", "rgb(35, 35, 35)");
    });
        $("#guideshome").click(function(){
         $(roomshome).css("border-color", "rgb(35, 35, 35)");
         $(aquariumshome).css("border-color", "rgb(35, 35, 35)");
         $(plantshome).css("border-color", "rgb(35, 35, 35)");
         $(this).css("border-color", "red");
    });
    $("#iframeform").mouseenter(function(){
        $(this).css("position","absolute");
        $(this).css("top","60px");
        $(this).css("left","0px");
        $(this).css("height", "600px");
        $(this).css("width","1050px");
        $(this).css("border-color","green");
    });
    $("#iframeform").mouseleave(function(){
        $(this).css("position","absolute");
        $(this).css("top","60px");
        $(this).css("left","0px");
        $(this).css("height", "300px");
        $(this).css("width","350px");
        $(this).css("border-color","green");
    });    
});
</script>



<script>

function openAlert(){
var winW = window.innerWidth;
var winH = window.innerHeight;
var Saudio=document.getElementById("spideyAudio");
var Svideo=document.getElementById("spideyVideo");
document.getElementById("BoxBackGround").style.display = ("block");
document.getElementById("BoxBackGround").style.height = (winH+"px");
document.getElementById("BoxBackGround").style.width = (winW+"px");
document.getElementById("Box").style.display = ("block");
document.getElementById("Box").style.top = ("50px");
document.getElementById("Box").style.left = (winW/2-300+"px");
Saudio.play();
Saudio.loop=true;
Svideo.play();
Svideo.loop=true;
}

function closeAlert(){
var Saudio=document.getElementById("spideyAudio");
var Svideo=document.getElementById("spideyVideo");
document.getElementById("BoxBackGround").style.display = ("none");    
document.getElementById("Box").style.display = ("none");
Saudio.pause();
Saudio.loop=false;
Svideo.pause();
Svideo.loop=false;
}


function getDataFromArduino(){

var temperatureCelsiusValue = <?php echo $temperatureCelsiusValue?>;
var temperatureFahrenheitValue = <?php echo $temperatureFahrenheitValue?>;
var humidityValue = <?php echo $humidityValue?>;
var flamesensorValue = <?php echo $flamesensorValue ?>;
var MQ4sensorValue = <?php echo $MQ4sensorValue ?>;
var LdrValue = <?php echo $LdrValue?>;

var pumpValue = "<?php echo $pumpValue?>";
var lampValue = "<?php echo $lampValue ?>";
var feedingValue = "<?php echo $feedingValue?>";
var heaterValue = "<?php echo $heaterValue?>";
var filterexValue = "<?php echo $filterexValue?>";
var filterinValue = "<?php echo $filterinValue?>";

var plant1Value = <?php echo $plant1Value?>;
var plant2Value = <?php echo $plant2Value?>;
var plant3Value = <?php echo $plant3Value?>;
var irrigationValue = "<?php echo $irrigationValue?>";

var a = document.getElementById("temperaturecircle");
var b = document.getElementById("humiditycircle");
var c = document.getElementById("flamecircle");
var d = document.getElementById("gascircle");
var e = document.getElementById("lightcircle");

var f = document.getElementById("pumpcircle");
var g = document.getElementById("lampcircle");
var h = document.getElementById("feedcircle");
var j = document.getElementById("heatercircle");
var k = document.getElementById("filterexcircle");
var l = document.getElementById("filterincircle");

var n = document.getElementById("plant1circle");
var o = document.getElementById("plant2circle");
var p = document.getElementById("plant3circle");
var r = document.getElementById("irrigationcircle");

var t = document.getElementById("temperatureText");
var m = document.getElementById("temperatureMeter");
var t1 = document.getElementById("humidityText");
var m1 = document.getElementById("humidityMeter");
var t2 = document.getElementById("flameText");
var m2 = document.getElementById("flameMeter");
var t3 = document.getElementById("gasText");
var m3 = document.getElementById("gasMeter");
var t4 = document.getElementById("lightText");
var m4 = document.getElementById("lightMeter");
var t5 = document.getElementById("plant1Text");
var m5 = document.getElementById("plant1Meter");
var t6 = document.getElementById("plant2Text");
var m6 = document.getElementById("plant2Meter");
var t7 = document.getElementById("plant3Text");
var m7 = document.getElementById("plant3Meter");


t.innerHTML=temperatureCelsiusValue+'°C'+'  '+temperatureFahrenheitValue+'°F';
m.value=(temperatureCelsiusValue);
if(temperatureCelsiusValue<20||temperatureCelsiusValue>=40){
a.style.fill=("red");
openAlert();
}
if(temperatureCelsiusValue==20){
a.style.fill=("rgb(255, 93, 0)");
}
if(temperatureCelsiusValue>20&&temperatureCelsiusValue<40){
a.style.fill=("green");
}

t1.innerHTML=humidityValue+'%';
m1.value=(humidityValue);
if(humidityValue<20||humidityValue>=75){
b.style.fill=("red");
openAlert();
}
if(humidityValue==20){
b.style.fill=("rgb(255, 93, 0)");
}
if(humidityValue>20&&humidityValue<75){
b.style.fill=("green");
}

t2.innerHTML='Sensor value ='+flamesensorValue;
m2.value=(flamesensorValue);
if(flamesensorValue<500){
c.style.fill=("red");
openAlert();
}
if(flamesensorValue==500){
c.style.fill=("rgb(255, 93, 0)");
}
if(flamesensorValue>500){
c.style.fill=("green");
}

t3.innerHTML='Sensor value ='+MQ4sensorValue;
m3.value=(MQ4sensorValue);
if(MQ4sensorValue<0||MQ4sensorValue>=700){
d.style.fill=("red");
openAlert();
}
if(MQ4sensorValue==0){
d.style.fill=("rgb(255, 93, 0)");
}
if(MQ4sensorValue>0&&MQ4sensorValue<700){
d.style.fill=("green");
}

t4.innerHTML='Sensor value ='+LdrValue;
m4.value=(LdrValue);
if(LdrValue<0||LdrValue>=700){
e.style.fill=("red");
openAlert();
}
if(LdrValue==0){
e.style.fill=("rgb(255, 93, 0)");
}
if(LdrValue>0&&LdrValue<700){
e.style.fill=("green");
}

t5.innerHTML='Sensor value ='+plant1Value;
m5.value=(plant1Value);
if(plant1Value>501){
n.style.fill=("red");
openAlert();
}
if(plant1Value==499){
n.style.fill=("rgb(255, 93, 0)");
}
if(plant1Value<500){
n.style.fill=("green");
}

t6.innerHTML='Sensor value ='+plant2Value;
m6.value=(plant2Value);
if(plant2Value>501){
o.style.fill=("red");
openAlert();
}
if(plant2Value==499){
o.style.fill=("rgb(255, 93, 0)");
}
if(plant2Value<500){
o.style.fill=("green");
}

t7.innerHTML='Sensor value ='+plant3Value;
m7.value=(plant3Value);
if(plant3Value>=501){
p.style.fill=("red");
openAlert();
}
if(plant3Value==499){
p.style.fill=("rgb(255, 93, 0)");
}
if(plant3Value<500){
p.style.fill=("green");
}

if(pumpValue=='pumpIsOn'){
f.style.fill=("yellow");
}
if(pumpValue=='pumpIsOff'){
f.style.fill=("white");
}

if(lampValue=='lampIsOn'){
g.style.fill=("yellow");
}
if(lampValue=='lampIsOff'){
g.style.fill=("white");
}

if(feedingValue=='feedIsOn'){
h.style.fill=("yellow");
}
if(feedingValue=='feedIsOff'){
h.style.fill=("white");
}

if(heaterValue=='heaterIsOn'){
j.style.fill=("yellow");
}
if(heaterValue=='heaterIsOff'){
j.style.fill=("white");
}

if(filterexValue=='exIsOn'){
k.style.fill=("yellow");
}
if(filterexValue=='exIsOff'){
k.style.fill=("white");
}

if(filterinValue=='inIsOn'){
l.style.fill=("yellow");
}
if(filterinValue=='inIsOff'){
l.style.fill=("white");
}

if(irrigationValue=='start'){
r.style.fill=("yellow");
}
if(irrigationValue=='stop'){
r.style.fill=("white");
}

}

</script>

</head>

<body onpageshow="getDataFromArduino()">

<img class="icon" src="https://sites.psu.edu/gayborhood/files/2016/05/Black-and-White-City-at-Night-V.png" 
style="border:10px solid;border-radius:20px;border-color:rgb(35, 35, 35);height:500px;width:1320px;">

<p style="font-size:20px;position:absolute;top:1700px;left:700px;color:white;"><strong>Guidelines for managing to adjustments of the objects.</strong></p>

<iframe class="guide" src ="http://www.geekstips.com/mq4-sensor-natural-gas-methane-arduino/" style="top:1490px;left:1050px;"></iframe>
<iframe class="guide" src ="https://playground.arduino.cc/Learning/PhotoResistor"  style="top:1490px;left:700px;"></iframe>
<iframe class="guide" src ="https://www.arduino.cc/en/Guide/ArduinoEthernetShield" style="top:1270px;left:1050px;"></iframe>
<iframe class="guide" src ="https://www.dfrobot.com/wiki/index.php/DHT11_Temperature_and_Humidity_Sensor_(SKU:_DFR0067)" style="top:1270px;left:700px;"></iframe>
<iframe class="guide" src="http://www.wikihow.com/Grow-Healthy-Plants" style="top:1050px;left:1050px;"></iframe>
<iframe class="guide" src ="http://www.tetra-fish.com/aquarium-information/how-to-set-up-an-aquarium-fish-tank-setup.aspx"style="top:1050px;left:700px;"></iframe>

<div class="infopanel">

<div onclick="low()" class="color" style="top:20px;left:10px;background-color:green;">
<script>
function low(){
var color=document.getElementById("colorinfo");
color.style.color=("green");
document.getElementById("colorinfo").innerHTML = "The green circle shows that the selected element's sensor reading is under the risk level. ";
}
</script>
</div>
<div onclick="optimum()"class="color" style="top:20px;left:250px;background-color:rgb(255, 93, 0);">
<script>
function optimum(){
var color=document.getElementById("colorinfo");
color.style.color=("rgb(255, 93, 0)");
document.getElementById("colorinfo").innerHTML = "The orange circle shows that the selected element's sensor reading is the optimum level. ";
}
</script>
</div>
<div onclick="hıgh()" class="color" style="top:20px;left:490px;background-color:red;">
<script>
function hıgh(){
var color=document.getElementById("colorinfo");
color.style.color=("red");
document.getElementById("colorinfo").innerHTML = "The red circle shows that the selected element's sensor reading is top the risk level. ";
}
</script>
</div>
<div onclick="opens()" class="color" style="top:150px;left:125px;background-color:yellow;">
<script>
function opens(){
var color=document.getElementById("colorinfo");
color.style.color=("yellow");
document.getElementById("colorinfo").innerHTML = "The yellow circle shows that the selected element is on. ";
}
</script>
</div>
<div onclick="off()"class="color" style="top:150px;left:375px;background-color:white;">
<script>
function off(){
var color=document.getElementById("colorinfo");
color.style.color=("white");
document.getElementById("colorinfo").innerHTML = "The white circle which is default shows that the selected element is off. ";
}
</script>
</div>
<button onclick="sensorreadings()"style="color:white;background-color:transparent;border-color:transparent;height:50px;width:100px;position:absolute;top:100px;left:250px;"><strong>Sensors</strong></button>
<script>
function sensorreadings(){

var p= document.getElementById("temperatureline");
p.style.stroke=("rgb(4, 155, 163)");
var p1= document.getElementById("temperaturecircle");
p1.style.stroke=("rgb(4, 155, 163)");
var o= document.getElementById("humidityline");
o.style.stroke=("rgb(4, 155, 163)");
var o1= document.getElementById("humiditycircle");
o1.style.stroke=("rgb(4, 155, 163)");
var u= document.getElementById("flameline");
u.style.stroke=("rgb(4, 155, 163)");
var u1= document.getElementById("flamecircle");
u1.style.stroke=("rgb(4, 155, 163)");
var y= document.getElementById("gasline");
y.style.stroke=("rgb(4, 155, 163)");
var y1= document.getElementById("gascircle");
y1.style.stroke=("rgb(4, 155, 163)");
var t= document.getElementById("lightline");
t.style.stroke=("rgb(4, 155, 163)");
var t1= document.getElementById("lightcircle");
t1.style.stroke=("rgb(4, 155, 163)");
var x= document.getElementById("pumpline");
x.style.stroke=("rgb(58, 58, 58)");
var x1= document.getElementById("pumpcircle");
x1.style.stroke=("rgb(58, 58, 58)");
var a= document.getElementById("lampline");
a.style.stroke=("rgb(58, 58, 58)");
var a1= document.getElementById("lampcircle");
a1.style.stroke=("rgb(58, 58, 58)");
var s= document.getElementById("feedline");
s.style.stroke=("rgb(58, 58, 58)");
var s1= document.getElementById("feedcircle");
s1.style.stroke=("rgb(58, 58, 58)");
var d= document.getElementById("heaterline");
d.style.stroke=("rgb(58, 58, 58)");
var d1= document.getElementById("heatercircle");
d1.style.stroke=("rgb(58, 58, 58)");
var f= document.getElementById("filterexline");
f.style.stroke=("rgb(58, 58, 58)");
var f1= document.getElementById("filterexcircle");
f1.style.stroke=("rgb(58, 58, 58)");
var f= document.getElementById("filterinline");
f.style.stroke=("rgb(58, 58, 58)");
var f1= document.getElementById("filterincircle");
f1.style.stroke=("rgb(58, 58, 58)");
var h= document.getElementById("plant1line");
h.style.stroke=("rgb(4, 155, 163)");
var h1= document.getElementById("plant1circle");
h1.style.stroke=("rgb(4, 155, 163)");
var j= document.getElementById("plant2line");
j.style.stroke=("rgb(4, 155, 163)");
var j1= document.getElementById("plant2circle");
j1.style.stroke=("rgb(4, 155, 163)");
var k= document.getElementById("plant3line");
k.style.stroke=("rgb(4, 155, 163)");
var k1= document.getElementById("plant3circle");
k1.style.stroke=("rgb(4, 155, 163)");
var l= document.getElementById("irrigationline");
l.style.stroke=("rgb(58, 58, 58)");
var l1= document.getElementById("irrigationcircle");
l1.style.stroke=("rgb(58, 58, 58)");
var color=document.getElementById("colorinfo");
color.style.color=("rgb(4, 155, 163)");
document.getElementById("colorinfo").innerHTML = "The changing bars show that the rate of the selected object's sensor readings.";
}
</script>
<button onclick="onoffdata()" style="color:white;background-color:transparent;border-color:transparent;height:20px;width:100px;position:absolute;top:200px;left:250px;"><strong>Objects</strong></button>

<script>
function onoffdata(){

var p= document.getElementById("temperatureline");
p.style.stroke=("rgb(58, 58, 58)");
var p1= document.getElementById("temperaturecircle");
p1.style.stroke=("rgb(58, 58, 58)");
var o= document.getElementById("humidityline");
o.style.stroke=("rgb(58, 58, 58)");
var o1= document.getElementById("humiditycircle");
o1.style.stroke=("rgb(58, 58, 58)");
var u= document.getElementById("flameline");
u.style.stroke=("rgb(58, 58, 58)");
var u1= document.getElementById("flamecircle");
u1.style.stroke=("rgb(58, 58, 58)");
var y= document.getElementById("gasline");
y.style.stroke=("rgb(58, 58, 58)");
var y1= document.getElementById("gascircle");
y1.style.stroke=("rgb(58, 58, 58)");
var t= document.getElementById("lightline");
t.style.stroke=("rgb(58, 58, 58)");
var t1= document.getElementById("lightcircle");
t1.style.stroke=("rgb(58, 58, 58)");
var x= document.getElementById("pumpline");
x.style.stroke=("rgb(199, 0, 255)");
var x1= document.getElementById("pumpcircle");
x1.style.stroke=("rgb(199, 0, 255)");
var a= document.getElementById("lampline");
a.style.stroke=("rgb(199, 0, 255)");
var a1= document.getElementById("lampcircle");
a1.style.stroke=("rgb(199, 0, 255)");
var s= document.getElementById("feedline");
s.style.stroke=("rgb(199, 0, 255)");
var s1= document.getElementById("feedcircle");
s1.style.stroke=("rgb(199, 0, 255)");
var d= document.getElementById("heaterline");
d.style.stroke=("rgb(199, 0, 255)");
var d1= document.getElementById("heatercircle");
d1.style.stroke=("rgb(199, 0, 255)");
var f= document.getElementById("filterexline");
f.style.stroke=("rgb(199, 0, 255)");
var f1= document.getElementById("filterexcircle");
f1.style.stroke=("rgb(199, 0, 255)");
var f= document.getElementById("filterinline");
f.style.stroke=("rgb(199, 0, 255)");
var f1= document.getElementById("filterincircle");
f1.style.stroke=("rgb(199, 0, 255)");
var h= document.getElementById("plant1line");
h.style.stroke=("rgb(58, 58, 58)");
var h1= document.getElementById("plant1circle");
h1.style.stroke=("rgb(58, 58, 58)");
var j= document.getElementById("plant2line");
j.style.stroke=("rgb(58, 58, 58)");
var j1= document.getElementById("plant2circle");
j1.style.stroke=("rgb(58, 58, 58)");
var k= document.getElementById("plant3line");
k.style.stroke=("rgb(58, 58, 58)");
var k1= document.getElementById("plant3circle");
k1.style.stroke=("rgb(58, 58, 58)");
var l= document.getElementById("irrigationline");
l.style.stroke=("rgb(199, 0, 255)");
var l1= document.getElementById("irrigationcircle");
l1.style.stroke=("rgb(199, 0, 255)");
var color=document.getElementById("colorinfo");
color.style.color=("rgb(199, 0, 255)");
document.getElementById("colorinfo").innerHTML = "The changing bars show you that the selected object is on or off.";
}
</script>

<p id="colorinfo" style="position:absolute;top:250px;left:10px;color:white;">Please click the buttons and the color bars to learn the info about colors.</p>

</div>


<svg class="svg" height="1200px" width="600px">
<polyline id="temperatureline" points="50,50,300,200" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="humidityline" points="300,50,300,200" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="flameline"    points="550,50,300,200" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="gasline"      points="50,350,300,200" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="lightline"    points="550,350,300,200" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />

<polyline id="pumpline" points="50,450,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="lampline" points="300,450,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="feedline"points="550,450,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="heaterline" points="50,750,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="filterexline"points="300,750,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="filterinline" points="550,750,300,600" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />

<polyline id="plant1line" points="50,850,300,1000" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="plant2line" points="300,850,300,1000" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="plant3line" points="550,850,300,1000" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />
<polyline id="irrigationline" points="300,1150,300,1000" style="fill:none;stroke:rgb(58, 58, 58);stroke-width:5" />

<circle id="temperaturecircle" cx="50" cy="50" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="humiditycircle" cx="300" cy="50" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="flamecircle" cx="550" cy="50" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="gascircle" cx="50" cy="350" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="lightcircle" cx="550" cy="350" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />

<circle id="pumpcircle" cx="50" cy="450" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="lampcircle" cx="300" cy="450" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="feedcircle" cx="550" cy="450" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="heatercircle" cx="50" cy="750" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="filterexcircle" cx="300" cy="750" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="filterincircle" cx="550" cy="750" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />

<circle id="plant1circle" cx="50" cy="850" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="plant2circle" cx="300" cy="850" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="plant3circle" cx="550" cy="850" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />
<circle id="irrigationcircle" cx="300" cy="1150" r="40"  stroke-width="5" style="fill:white;stroke:rgb(58, 58, 58);" />

<ellipse cx="300" cy="200" rx="200" ry="50" style="fill:rgb(99, 99, 99);stroke:rgb(58, 58, 58);stroke-width:5" />
<ellipse cx="300" cy="600" rx="200" ry="50" style="fill:rgb(99, 99, 99);stroke:rgb(58, 58, 58);stroke-width:5" />
<ellipse cx="300" cy="1000" rx="200" ry="50" style="fill:rgb(99, 99, 99);stroke:rgb(58, 58, 58);stroke-width:5" />

</svg>

<p style="font-size:40px;position:absolute;top:815px;left:235px;color:white;"><strong>ROOM</strong></p>
<p style="font-size:40px;position:absolute;top:1215px;left:195px;color:white;"><strong>AQUARİUM</strong></p>
<p style="font-size:40px;position:absolute;top:1615px;left:235px;color:white;"><strong>PLANT</strong></p>


<div class="home">

<div id="guideshome"class="homeselector" style="position:absolute;top:20px;left:910px;">
<details>
<summary style="font-size:30px;text-align:center;color:white;"><strong>GUİDE</strong></summary>
<div style="cursor:default;height:850px;width:1050px;background-color:rgb(25, 25, 25);position:absolute;left:-700px;">

<a href="http://localhost/Arduinautomotionformvalue.php" target="_blank" class="openNewTab">Open FormValue In New Tab</a>

<ul id="guideText">
  <li class="colorfulLi">When a form is sent to the FormValue page, form values are revealed in the iframe which named newsite in Guide.</li><br>
  <li class="colorfulLi">Form values are the saved data which give Arduino an ability to determine the adjustments of the aquarium and the plants. </li><br>
  <li class="colorfulLi">And all of the data go through the ArduinoSide page that is hosted by Arduino Ethernet Shield with the IP address you choose.</li><br>
  <li class="colorfulLi">After that, the Communication button in the ArduinoSide page has to be pushed to open the Communication page and to change the $_Session values.</li><br>
  <li class="colorfulLi">Lastly, the Arduinautomotion page has to refresh or the Reload button has to pushed to get the new data from Arduino.</li><br>
  <li class="colorfulLi">If the information about the room is in the dangerous range, the homepage notifies you with a voice alert box which includes a Spider-man video and audio file that are in the www folder in Apache localhost furthermore the related information circle changes its colour to red.</li><br>
  <img id="Graphics" src="http://192.168.1.20/ArduinautomotionGraphics.jpg" style="width:1000px;">
  </ul>

<img id="refresh" src="https://pbs.twimg.com/profile_images/521160118671384576/1pv-cwfk_400x400.jpeg" onclick="reload()">
<script>
function reload(){
location.reload();
}
</script>

<iframe id="iframeform" srcdoc="<p>FormValue page will be shown in here after sending the forms with the data.</p><br><p>Click the Activate button to open FormValue page." style="position:absolute;top:60px;height:300px;width:350px;overflow:auto;border:5px solid green;" name="newsite"></iframe>
</div>
</details>
</div>

<div id="plantshome"class="homeselector" style="position:absolute;top:20px;left:650px;">
<details>
<summary style="font-size:30px;text-align:center;color:white;"><strong>PLANT</strong></summary>

<div style="cursor:default;height:550px;width:1050px;background-color:rgb(25, 25, 25);position:absolute;left:-400px;">

<section class="menuselector"style="position:absolute;top:350px;left:380px;">
<button onclick="cirrigation()"style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Irrigation system</strong></button>

<input  style="    cursor:pointer;position:absolute;top:90px;left:10px;"form="ActivationForm" type="radio" name="irrigationsystem" value="start" onclick="StartInput()"/><span id="StartInputText">Start</span>
<script>
function StartInput(){
    var x=document.getElementById("StartInputText");
    var y=document.getElementById("StopInputText");
    x.style.color=("red");
    y.style.color=("white");
}
</script>

<input  style="    cursor:pointer;position:absolute;top:90px;left:110px;" form="ActivationForm" type="radio" name="irrigationsystem" value="stop" onclick="StopInput()"/><span id="StopInputText">Stop</span>
<script>
function StopInput(){
    var x=document.getElementById("StartInputText");
    var y=document.getElementById("StopInputText");
    x.style.color=("white");
    y.style.color=("red");
}
</script>

<input class="activateinput" form="ActivationForm" type="submit" value="Activate" style="font-size:25px;position:absolute;top:130px;left:15px;"/>

</section>

<script>
function cirrigation(){
var x= document.getElementById("irrigationline");
x.style.stroke=("red");
var y= document.getElementById("irrigationcircle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:50px;left:770px;">
<button onclick="cplant3()"style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Plant3</strong></button>
<p id="plant3Text" style="color:white;position:absolute;top:50px;left:15px;font-size:20px;font-weight:bold;">default</p>
<meter id="plant3Meter" style="width:150px;height:20px;position:absolute;top:120px;left:15px;" value="0" low="200" high="700" min="0" max="1023"></meter>
</section>

<script>
function cplant3(){
var x= document.getElementById("plant3line");
x.style.stroke=("red");
var y= document.getElementById("plant3circle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:50px;left:380px;">
<button onclick="cplant2()"style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Plant2</strong></button>
<p id="plant2Text"style="color:white;position:absolute;top:50px;left:15px;font-size:20px;font-weight:bold;">default</p>
<meter id="plant2Meter" style="width:150px;height:20px;position:absolute;top:120px;left:15px;" value="0" low="200" high="700" min="0" max="1023"></meter>
</section>

<script>
function cplant2(){
var x= document.getElementById("plant2line");
x.style.stroke=("red");
var y= document.getElementById("plant2circle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:50px;left:10px;">
<button onclick="cplant1()"style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Plant1</strong></button>
<p id="plant1Text"style="color:white;position:absolute;top:50px;left:15px;font-size:20px;font-weight:bold;">default</p>
<meter id="plant1Meter"style="width:150px;height:20px;position:absolute;top:120px;left:15px;" value="0" low="200" high="700" min="0" max="1023"></meter>
</section>

<script>
function cplant1(){
var x= document.getElementById("plant1line");
x.style.stroke=("red");
var y= document.getElementById("plant1circle");
y.style.stroke=("red");
}
</script>

</div>
</details>
</div>

<div id="aquariumshome"class="homeselector" style="position:absolute;top:20px;left:390px;">
<details>
<summary style="font-size:30px;text-align:center;color:white;"><strong>AQUARİUM</strong></summary>
<div style="cursor:default;height:550px;width:1050px;background-color:rgb(25, 25, 25);position:absolute;left:-200px;">

<section class="menuselector"style="position:absolute;top:350px;left:770px;">
<button onclick="cfilterin()" style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Filter (internal)</strong></button>
</section>

<script>
function cfilterin(){
var x= document.getElementById("filterinline");
x.style.stroke=("red");
var y= document.getElementById("filterincircle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:350px;left:380px;">
<button onclick="cfilterex()" style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Filter (external)</strong></button>
</section>

<script>
function cfilterex(){
var x= document.getElementById("filterexline");
x.style.stroke=("red");
var y= document.getElementById("filterexcircle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:350px;left:10px;">
<button onclick="cheater()"style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Heater</strong></button>
</section>

<script>
function cheater(){
var x= document.getElementById("heaterline");
x.style.stroke=("red");
var y= document.getElementById("heatercircle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:50px;left:770px;">
<button onclick="cfeed()" style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Feeding</strong></button>
</section>

<script>
function cfeed(){
var x= document.getElementById("feedline");
x.style.stroke=("red");
var y= document.getElementById("feedcircle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:50px;left:380px;">
<button onclick="clamp()" style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Lamp</strong></button>
</section>

<script>
function clamp(){
var x= document.getElementById("lampline");
x.style.stroke=("red");
var y= document.getElementById("lampcircle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:50px;left:10px;">
<button onclick="cpump()" style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Air pump</strong></button>
</section>

<script>
function cpump(){
var x= document.getElementById("pumpline");
x.style.stroke=("red");
var y= document.getElementById("pumpcircle");
y.style.stroke=("red");
}
</script>

<form action="Arduinautomotionformvalue.php" method="post" target="newsite" id="ActivationForm">

<select style="position:absolute;top:430px;left:780px;color:red;border-color:transparent;background-color:transparent;font-weight:bold;font-size:30px;"name ="filterinternal">
<option   value="inIsOn">ON</option>
<option   value="inIsOff">OFF</option>
</select>

<select style="position:absolute;top:430px;left:390px;color:red;border-color:transparent;background-color:transparent;font-weight:bold;font-size:30px;"name ="filterexternal">
<option   value="exIsOn">ON</option>
<option   value="exIsOff">OFF</option>
</select>

<select style="position:absolute;top:430px;left:20px;color:red;border-color:transparent;background-color:transparent;font-weight:bold;font-size:30px;"name ="heater">
<option   value="heaterIsOn">ON</option>
<option   value="heaterIsOff">OFF</option>
</select>

<select style="position:absolute;top:130px;left:780px;color:red;border-color:transparent;background-color:transparent;font-weight:bold;font-size:30px;"name ="feed">
<option   value="feedIsOn">ON</option>
<option   value="feedIsOff">OFF</option>
</select>

<select style="position:absolute;top:130px;left:390px;color:red;border-color:transparent;background-color:transparent;font-weight:bold;font-size:30px;"name ="lamp">
<option   value="lampIsOn">ON</option>
<option   value="lampIsOff">OFF</option>
</select>

<select style="position:absolute;top:130px;left:20px;color:red;border-color:transparent;background-color:transparent;font-weight:bold;font-size:30px;"name ="pump">
<option   value="pumpIsOn">ON</option>
<option   value="pumpIsOff">OFF</option>
</select>

<input  type="submit" value="Activate" class="activateinput">
</form>

</div>
</details>
</div>

<div id="roomshome"class="homeselector"style="position:absolute;top:20px;left:130px;">
<details>
<summary style="font-size:30px;text-align:center;color:white;"><strong>ROOM</strong></summary>
<div style="cursor:default;height:550px;width:1050px;background-color:rgb(25, 25, 25);">
<section class="menuselector"style="position:absolute;top:350px;left:380px;">
<button onclick="clight()" style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Light</strong></button>
<p id="lightText" style="color:white;position:absolute;top:50px;left:15px;font-size:20px;font-weight:bold;">default</p>
<meter id="lightMeter" style="width:150px;height:20px;position:absolute;top:120px;left:15px;" value="0" optimum="0" low="0" high="600" min="0" max="1023"></meter>
</section>

<script>
function clight(){
var x= document.getElementById("lightline");
x.style.stroke=("red");
var y= document.getElementById("lightcircle");
y.style.stroke=("red");
}
</script>

<section onclick="cgas()" class="menuselector"style="position:absolute;top:350px;left:10px;">
<button style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Gas</strong></button>
<p id="gasText" style="color:white;position:absolute;top:50px;left:15px;font-size:20px;font-weight:bold;">default</p>
<meter id="gasMeter" style="width:150px;height:20px;position:absolute;top:120px;left:15px;" value="0" optimum="0" low="0" high="700" min="0" max="1023"></meter>
</section>

<script>
function cgas(){
var x= document.getElementById("gasline");
x.style.stroke=("red");
var y= document.getElementById("gascircle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:50px;left:770px;">
<button onclick="cflame()" style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Flame</strong></button>
<p id="flameText" style="color:white;position:absolute;top:50px;left:15px;font-size:20px;font-weight:bold;">default</p>
<meter id="flameMeter"style="width:150px;height:20px;position:absolute;top:120px;left:15px;" value="0" optimum="0" low="0" high="700" min="0" max="1023"></meter>
</section>

<script>
function cflame(){
var x= document.getElementById("flameline");
x.style.stroke=("red");
var y= document.getElementById("flamecircle");
y.style.stroke=("red");
}
</script>

<section onclick="chumidity()"class="menuselector"style="position:absolute;top:50px;left:380px;">
<button style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Humidity</strong></button>
<p id="humidityText"style="color:white;position:absolute;top:50px;left:15px;font-size:20px;font-weight:bold;">default</p>
<meter id="humidityMeter"style="width:150px;height:20px;position:absolute;top:120px;left:15px;" value="0" optimum="20" low="19" high="75" min="0" max="100"></meter>
</section>

<script>
function chumidity(){
var x= document.getElementById("humidityline");
x.style.stroke=("red");
var y= document.getElementById("humiditycircle");
y.style.stroke=("red");
}
</script>

<section class="menuselector"style="position:absolute;top:50px;left:10px;">
<button onclick="ctemperature()" style="font-size:30px;text-align:left;border-color:transparent;background-color:transparent;height:60px;width:200px;position:absolute;top:0px;left:5px;color:white;"><strong>Temperature</strong></button>
<p id="temperatureText"style="color:white;position:absolute;top:50px;left:15px;font-size:20px;font-weight:bold;">default</p>
<meter id="temperatureMeter"style="width:150px;height:20px;position:absolute;top:120px;left:15px;" value="0" optimum="25"low="5" high="40" min="0" max="100"></meter>
</section>

<script>
function ctemperature(){
var x= document.getElementById("temperatureline");
x.style.stroke=("red");
var y= document.getElementById("temperaturecircle");
y.style.stroke=("red");
}
</script>

</div>
</details>
</div>

</div>

<footer>
<p style="font-size:20px;color:white;text-align:center;">Posted by Kutluhan Aktar.</p>
<p style="font-size:20px;color:white;text-align:center;">Orders and instructions are explained on <a style="color:white;" href="https://www.hackster.io/kutluhan-aktar" target="_blank"><cite>Hackter.io.</cite></a></p>
<p style="font-size:20px;color:white;text-align:center;">The project's details are explained in Guide section.</p>
<p style="font-size:20px;color:white;text-align:center;">All project rights can be used publicly.</p>
<div class="animationbox"></div>
</footer>

<div id="BoxBackGround" ></div>
<div id="Box">

<span id="times" onclick="closeAlert()" >&times;</span>

<div id="BoxText" title = "If you connect the Arduinautomotion.php with a Android device,you have to click the red circles tag to activate the video and the audio tag. ">Please check the <span onclick="openAlert()" style="color:red">red circles</span> to find the issue.</div>

<video id="spideyVideo">
<source src="http://192.168.1.20/SpiderSense.mp4" type="video/mp4">
</video>

<audio id="spideyAudio">
<source src="http://192.168.1.20/spidermanVoice.mp3" type="audio/mpeg">
</audio>

</div>

</body>

</html>

Arduinautomotioncontrol.php

Download



<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>

<title>Arduinautomotion</title><link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link>

<?php

$temperatureCelsiusValue = $_SESSION['TemperatureCelsius'];
$temperatureFahrenheitValue = $_SESSION['TemperatureFahrenheit'];
$humidityValue = $_SESSION['Humidity'];
$flamesensorValue = $_SESSION['Flame'];
$MQ4sensorValue = $_SESSION['MQ4Sensor'];
$LdrValue = $_SESSION['LDRSensor'];


$pumpValue= $_SESSION['Airpump'];
$lampValue = $_SESSION['Lamp'];
$feedingValue = $_SESSION['Feeding'];
$heaterValue = $_SESSION['Heater'];
$filterexValue = $_SESSION['Filterex'];
$filterinValue = $_SESSION['Filterin'];

$plant1Value = $_SESSION['Plant1H'];
$plant2Value = $_SESSION['Plant2H'];
$plant3Value = $_SESSION['Plant3H'];
$irrigationValue = $_SESSION['Irrigation'];

?>

</head>
</html>

Arduinautomotionformvalue.php

Download



<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>

<title>FormValue</title><link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link>

<?php
$_SESSION['Airpump'] = $_POST["pump"];

$_SESSION['Lamp'] = $_POST["lamp"];

$_SESSION['Feeding'] = $_POST["feed"];

$_SESSION['Heater'] = $_POST["heater"];

$_SESSION['Filterex'] = $_POST["filterexternal"];

$_SESSION['Filterin'] = $_POST["filterinternal"];

$_SESSION['Irrigation'] = $_POST["irrigationsystem"];
?>

<style>

html{
    background-color:black;
}

div.serverpage{
    background-color:green;
    width:1300px;
    height:100px;
    text-align:center;
}

p{
    color:green;
    text-align:center;
    font-size:25px;
}

input.subMit{

position:absolute;
left:525px;
border:5px solid green;
width:300px;
height:50px;
font-size:20px;
color:white;
background-color:transparent;
cursor:pointer;
}
</style>

</head>

<body >

<div class="serverpage">
<h1 style="font-size:40px;color:black;">Server has received the data from Arduinautomotion.</h1> </div>

<p>Airpump= <?php echo $_SESSION['Airpump'];?></p><br>

<p>Lamp=<?php echo $_SESSION['Lamp'];?></p> <br> 

<p>Feeding=<?php echo $_SESSION['Feeding'];?></p> <br>

<p>Heater=<?php echo $_SESSION['Heater'];?></p> <br>

<p>Filterex=<?php echo $_SESSION['Filterex'] ;?></p> <br>

<p>Filterin=<?php echo $_SESSION['Filterin'] ;?></p> <br>

<p>Irrigation=<?php echo $_SESSION['Irrigation'];?></p> <br>

<form action="http://yourIPAddress/" method="get"  target="_blank">
<input type="hidden" value="<?php echo $_SESSION['Airpump'];?>" name="airpump">
<input type="hidden" value="<?php echo $_SESSION['Lamp'];?>" name="lamp">
<input type="hidden" value="<?php echo $_SESSION['Feeding'];?>" name="feed">
<input type="hidden" value="<?php echo $_SESSION['Heater'];?>" name="heater">
<input type="hidden" value="<?php echo $_SESSION['Filterex'];?>" name="filterex">
<input type="hidden" value="<?php echo $_SESSION['Filterin'];?>" name="filterin">
<input type="hidden" value="<?php echo $_SESSION['Irrigation'];?>" name="irrigation">
<input type="submit" value="Send and Get Data" class="subMit">
</form> 

</body>
</html>

Arduinautomotioncommunication.php

Download



<?php
session_start();
?>
<!DOCTYPE html>
<html>
<head>

<title>Communication</title><link rel="shortcut icon" href="Arduinautomotion.ico" type="image/x-icon"></link>

<style>
body{
    background-image: url("https://i.ytimg.com/vi/kkVGBn-haDo/maxresdefault.jpg");
}

<?php 
$_SESSION['TemperatureCelsius']=$_GET["temperatureCelsius"];
$_SESSION['TemperatureFahrenheit']=$_GET["temperatureFahrenheit"];
$_SESSION['Humidity']=$_GET["humidity"];
$_SESSION['Flame']=$_GET["flame"];
$_SESSION['MQ4Sensor']=$_GET["MQ4sensor"];
$_SESSION['LDRSensor']=$_GET["LDRsensor"];
$_SESSION['Plant1H']=$_GET["plant1H"];
$_SESSION['Plant2H']=$_GET["plant2H"];
$_SESSION['Plant3H']=$_GET["plant3H"];
?>
</head>
<body>
</body>
</html>

ArduinoSide.ino

Download




       
       /////////////////////////////////////////////////////////////////
      //                                                             //
     //                    -ARDUINAUTOMOTİON-                       //
    //        Creating a professional website to communicate       //
   //                         with Arduino                        // 
  //               (Compatible with Android system)              //
 //                        by Kutluhan Aktar.                   //
/////////////////////////////////////////////////////////////////

 //
 // Creating a professional website to control my aquarium and my irrigation system in my home and 
 // to receive the information about the home when I am not at the home is the main aspect of this project.
 // To achive that goal I created the Arduinautmotion project that includes 4 different HTML pages in my Apache localhost.
 // Also, the Arduino Ethernet Shield hosts another HTML web page which can be reached with the chosen IPAddress, to communicate with the Arduinautomotion website. 
 // The Arduinautomotion website has an easy interface to get and send data about the home from Arduino.
 // All things the Arduinautomotion website does is explained on my Hackster.io page.(For instance, how Arduino communicates with the website using PHP Forms.)  
 // I programmed the Arduinautomotion website and its components with HTML,CSS,JavaScript and PHP so that it is just a showcase for Arduino side. 
 // If you know these languages, please check my Hackster.io page to see whole project's details and the Arduinautmotion website codes.
 // The Arduino code is basically similar to the WebServer code which is in the Ethernet library examples folder.
 // I only added some codes to control sensors and to run commands which came from the Arduinautomotion website.
 // I used a DHT11 module, a LDR, a Flame sensor and a MQ4 sensor for measuring the variables.
 // And I used four 2 way relay to control the aquarium's parts and the irrigation system.
 // The tricky part is that you  can not use  10,11,12,13 pins when using the Arduino Ethernet Shield so I used the analog pins instead of the digital pins to fulfill the project.
 // After the Arduino code is run, the Arduinautomotion website sends and gets data from Arduino through LAN over Wİ-Fİ.
 // 
 // Connections:
 //
 // Arduino 
 //
 //                                   DHT11 Module
 // Pin 2   -------------------------
 //
 //                                   2 Way Relay (1)
 // Pin 3   -------------------------
 // Pin 4   -------------------------
 //
 //                                   2 Way Relay (2)
 // Pin 5   -------------------------
 // Pin 6   -------------------------
 //
 //                                   2 Way Relay (3)
 // Pin 7   -------------------------
 // Pin 8   -------------------------
 //
 //                                   2 Way Relay (4)
 // Pin 9   -------------------------
 //                                   Arduno Ethernet Shield
 // Pin 10  --------------------------
 // Pin 11  --------------------------
 // Pin 12  --------------------------
 // Pin 13  --------------------------
 //
 //                                   LDR
 // AO      -------------------------- 
 //                             
 //                                   Flame Sensor 
 // A1      --------------------------
 //
 //                                   MQ4   Sensor
 // A2      --------------------------
 //
 //                                   Hygrometer Module (1)
 // A3      --------------------------
 //
 //                                   Hygrometer Module (2)
 // A4      --------------------------
 //
 //                                   Hygrometer Module (3)
 // A5      --------------------------
 //
 //
 
#include <SPI.h>
#include <Ethernet.h>
//Initial DHT11 library and create an object named dht to communicate with the sensor.
#include "DHT.h"

DHT dht;
// Enter a MAC address and IP address for your controller below.
// The IP address will be dependent on your local network:
byte mac[] = {
  0xDE, 0xAD, 0xBE, 0xEF, 0xFE, 0xED  // Your MAC address has to be here.
};
IPAddress ip(192, 168, 1, 21);

// Initialize the Ethernet server library
// with the IP address and port you want to use
// (port 80 is default for HTTP):
EthernetServer server(80);
// Define which pin connects to which object such as a air pump in your aquarium.
int pump = 3;
int lamp = 4;
int feed = 5;
int heater = 6;
int filterex =7;
int filterin =8;
int irrigation =9;
// Determine a string to collect the commands came from Arduiaautomotion.php.
String readString ;

void setup() {
  // Open serial communications and wait for port to open:
  Serial.begin(9600);
  // Determine the relay module's pins.
   pinMode(pump,OUTPUT);
   pinMode(lamp,OUTPUT);
   pinMode(feed,OUTPUT);
   pinMode(heater,OUTPUT);
   pinMode(filterex,OUTPUT);
   pinMode(filterin,OUTPUT);
   pinMode(irrigation,OUTPUT);
   // Give HIGH value for the default.
   digitalWrite(pump,HIGH);
   digitalWrite(lamp,HIGH);
   digitalWrite(feed,HIGH);
   digitalWrite(heater,HIGH);
   digitalWrite(filterex,HIGH);
   digitalWrite(filterin,HIGH);
   digitalWrite(irrigation,HIGH);
   //Connect Dht11 to data pin 2.
   dht.setup(2); 

  // Start the Ethernet connection and the server:
  Ethernet.begin(mac, ip);
  server.begin();
  Serial.print("server is at ");
  Serial.println(Ethernet.localIP());
}

void loop() {
 // This makes Arduino board to wait until the temperature and the humidity values are accurate.
 delay(dht.getMinimumSamplingPeriod());
 // The datas from DHT11 Sensor.
  float humidity = dht.getHumidity();
  
  float temperature = dht.getTemperature();
  
  float fahrenheit = dht.toFahrenheit(temperature);
  // Integer values of analog pins'readings.
  int ldrValue=analogRead(A0);

  int flameValue=analogRead(A1); 

  int MQ4Value=analogRead(A2); 

  int HygValueA=analogRead(A3);
  
  int HygValueB=analogRead(A4);

  int HygValueC=analogRead(A5);
   
  // Listen for incoming clients
  EthernetClient client = server.available();
  if (client) {
    Serial.println("new client");
    // An http request ends with a blank line
    boolean currentLineIsBlank = true;
    while (client.connected()) {
      if (client.available()) {
        char c = client.read();
        // Add each data came from Arduinautomotion.php to String named readString.
        if (readString.length() < 135) {
          
          readString += c;
          //Serial.print(c);
         }
        Serial.println(readString);

        // If the line ends, initial a HTTP Request.
        if (c == '\n') {
          // send a standard http response header
          client.println("HTTP/1.1 200 OK");
          client.println("Content-Type:text/html");
          client.println("Connection: close");  // the connection will be closed after completion of the response
          client.println();
          client.println("<!DOCTYPE HTML>");
          client.println("<html style=""background-color:black;"">");
          client.println("<head>");
          client.println("<title>ArduinoSide</title>"); // Header for the web page.
          client.println("<link rel=""icon"" href=""http://www.clker.com/cliparts/D/W/n/h/n/W/house-logo-hi.png""></link>"); // Describe the icon of the web page.
          client.println("</head>");
          client.println("<body>");
          // http://your IPAddress/your site? is the way to access the server.
          client.println("<form action=""http://192.168.1.20/Arduinautomotioncommunication.php?"" method=""get""  target=""_blank"">"); // The hidden HTML form for sending the information.
                    client.println("<input type=""hidden""  name=""temperatureCelsius"" "); // The easiest way to send data to the server is to use the Get Method, but it is not secure.However, the Post Method can be used for security.
          client.println("value=");
          client.println(temperature);
          client.println(">");
                    client.println("<input type=""hidden""  name=""temperatureFahrenheit"" ");
          client.println("value=");
          client.println(fahrenheit);
          client.println(">");
                    client.println("<input type=""hidden""  name=""humidity"" ");
          client.println("value=");
          client.println(humidity);
          client.println(">");
                    client.println("<input type=""hidden""  name=""flame"" ");
          client.println("value=");
          client.println(flameValue);
          client.println(">");
                    client.println("<input type=""hidden""  name=""MQ4sensor"" ");
          client.println("value=");
          client.println(MQ4Value);
          client.println(">");
                    client.println("<input type=""hidden""  name=""LDRsensor"" ");
          client.println("value=");
          client.println(ldrValue);
          client.println(">");
                    client.println("<input type=""hidden""  name=""plant1H"" ");
          client.println("value=");
          client.println(HygValueA);
          client.println(">");
                    client.println("<input type=""hidden""  name=""plant2H"" ");
          client.println("value=");
          client.println(HygValueB);
          client.println(">");
                    client.println("<input type=""hidden""  name=""plant3H"" ");
          client.println("value=");
          client.println(HygValueC);
          client.println(">");
          client.println("<input type=""submit"" value=""Communication"" style=""width:500px;height:200px;font-weight:bold;background-color:black;color:green;"">"); // When the Communication button is clicked, the information is sent to the server from the chosen IPAddress. 
          client.println("</form>");
          client.println("</body>");
          client.println("</html>");
          
          break;
        }

      }
    }
    // Give the web browser time to receive the data.
    delay(1);
    // Close the connection:
    client.stop();
    // Open the objects which are selected by Arduinautomotion.php (such as  internal filter or external filter in the Aquarium or irrigation system in the Plant).
           if (readString.indexOf("?airpump=pumpIsOn") >0){
               digitalWrite(pump, LOW);
           }
           else if (readString.indexOf("?airpump=pumpIsOff") >0){
               digitalWrite(pump, HIGH);
           }
           if (readString.indexOf("&lamp=lampIsOn") >0){
               digitalWrite(lamp, LOW);
           }
           else if (readString.indexOf("&lamp=lampIsOff") >0){
               digitalWrite(lamp, HIGH);
           }
           if (readString.indexOf("&feed=feedIsOn") >0){
               digitalWrite(feed, LOW);
           }
           else if (readString.indexOf("&feed=feedIsOff") >0){
               digitalWrite(feed, HIGH);
           }
           if (readString.indexOf("&heater=heaterIsOn") >0){
               digitalWrite(heater, LOW);
           }
           else if (readString.indexOf("&heater=heaterIsOff") >0){
               digitalWrite(heater, HIGH);
           }
            if (readString.indexOf("&filterex=exIsOn") >0){
               digitalWrite(filterex, LOW);
           }
           else if (readString.indexOf("&filterex=exIsOff") >0){
               digitalWrite(filterex, HIGH);
           }
           if (readString.indexOf("&filterin=inIsOn") >0){
               digitalWrite(filterin, LOW);
           }
           else if (readString.indexOf("&filterin=inIsOff") >0){
               digitalWrite(filterin, HIGH);
           }
           if (readString.indexOf("&irrigation=start") >0){
               digitalWrite(irrigation, LOW);
           }
           else if (readString.indexOf("&irrigation=stop") >0){
               digitalWrite(irrigation, HIGH);
           }
           readString="";
    Serial.println("client disconnected");
  }
}

1 ) Arduino Uno R3

2 ) Arduino Ethernet Shield

3 ) DHT11 Temperature and Humidity Sensor

4 ) 2 Channel 5V Relay

5 ) IR Flame Sensor for Arduino

6 ) MQ-4 Methane Gas Sensor

7 ) Photoresistor

8 ) Hygrometer Humidity Detection Moisture Sensor For Arduino

9 ) 9V Battery Connector

Introduction

Tags

Share

How to create a website communicating Arduino by using PHP

Introduction

Tags

Share

Update

Description

How to set up the website on The Apache HTTP Server(Localhost)

How to connect with your Localhost from Android Devices

How to access your Localhost over Wi-Fi

Arduinauto
motion.php

1) Room Section

2 )Aquarium Section

3) Plant Section

4) Guide Section

5 )Alert Box

6) Parts of Arduinautomotion.php

Arduino
motion
control.php

Arduinauto
motion
formvalue.php

Arduinauto
motion
communication
.php

ArduinoSide

Connections

Schematics

Downloads

Codes

Introduction

Tags

Share

How to create a website communicating Arduino by using PHP

Introduction

Tags

Share

Update

Description

How to set up the website on The Apache HTTP Server(Localhost)

How to connect with your Localhost from Android Devices

How to access your Localhost over Wi-Fi

Arduinautomotion.php

1) Room Section

2 )Aquarium Section

3) Plant Section

4) Guide Section

5 )Alert Box

6) Parts of Arduinautomotion.php

Arduinomotioncontrol.php

Arduinautomotionformvalue.php

Arduinautomotioncommunication.php

ArduinoSide

Connections

Schematics

Downloads

Codes

Arduinauto
motion.php

Arduino
motion
control.php

Arduinauto
motion
formvalue.php

Arduinauto
motion
communication
.php