From 2e9fd84c9b8d0bdda2bcc163b2a70319358445da Mon Sep 17 00:00:00 2001
From: vngarg <sngargrsd@gmail.com>
Date: Sun, 1 Mar 2020 17:35:15 +0530
Subject: [PATCH 1/7] Added Instructions to setup environment

---
 SETUP WORKING ENVIRONMENT.md | 39 ++++++++++++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)
 create mode 100644 SETUP WORKING ENVIRONMENT.md

diff --git a/SETUP WORKING ENVIRONMENT.md b/SETUP WORKING ENVIRONMENT.md
new file mode 100644
index 00000000..b027f07c
--- /dev/null
+++ b/SETUP WORKING ENVIRONMENT.md	
@@ -0,0 +1,39 @@
+#HOW TO SETUP WORKING ENVIRONMENT ON YOUR LOCAL MACHINE
+
+##To setup Backend using Nodejs-
+- ***Firstly install Node on your machine, [click here](https://nodejs.org/en/).***
+-***To check that NOde has succesfully installed, run the following command in Terminal. Yhis will display the version of Node installed.***
+
+```js
+node -v
+```
+
+- ***You also need to install npm, run the following command in Terminal ***
+
+```js
+npm install
+```
+
+-***To chack that npm has installed succesfully, run this command in your Terminal. This will display the version of npm istalled.***
+
+```js
+npm -v
+```
+
+-***Your Backend environment is all setup.***
+
+##To setup Backend using Reactjs-
+
+-***You need to below command to install React on your machine.***
+
+```js
+npm install -g create-react-app  
+```
+
+-***React is installed. Now to create a working directory for React, follow below command***
+
+```js
+create-react-app <directory-name>
+```
+-***You have succesfully installed Reactjs for FrontEnd.***
+

From a77232f199ac09272706a28456ff9b97d14d734f Mon Sep 17 00:00:00 2001
From: vngarg <sngargrsd@gmail.com>
Date: Sun, 1 Mar 2020 17:39:14 +0530
Subject: [PATCH 2/7] Added the instructions to setup working environment

---
 SETUP WORKING ENVIRONMENT.md | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/SETUP WORKING ENVIRONMENT.md b/SETUP WORKING ENVIRONMENT.md
index b027f07c..f5629bd1 100644
--- a/SETUP WORKING ENVIRONMENT.md	
+++ b/SETUP WORKING ENVIRONMENT.md	
@@ -1,20 +1,20 @@
-#HOW TO SETUP WORKING ENVIRONMENT ON YOUR LOCAL MACHINE
+# HOW TO SETUP WORKING ENVIRONMENT ON YOUR LOCAL MACHINE
 
-##To setup Backend using Nodejs-
+## To setup Backend using Nodejs-
 - ***Firstly install Node on your machine, [click here](https://nodejs.org/en/).***
--***To check that NOde has succesfully installed, run the following command in Terminal. Yhis will display the version of Node installed.***
+-***To check that Node has successfully installed, run the following command in Terminal. This will display the version of Node installed.***
 
 ```js
 node -v
 ```
 
-- ***You also need to install npm, run the following command in Terminal ***
+-***You also need to install npm, run the following command in Terminal ***
 
 ```js
 npm install
 ```
 
--***To chack that npm has installed succesfully, run this command in your Terminal. This will display the version of npm istalled.***
+-***To check that npm has installed successfully, run this command in your Terminal. This will display the version of npm installed.***
 
 ```js
 npm -v
@@ -22,9 +22,9 @@ npm -v
 
 -***Your Backend environment is all setup.***
 
-##To setup Backend using Reactjs-
+## To setup FrontEnd using Reactjs-
 
--***You need to below command to install React on your machine.***
+-***You need to run below command to install React on your machine.***
 
 ```js
 npm install -g create-react-app  

From 5def8481aa1b2dc6e1af2ee015019b02a1ddbc5f Mon Sep 17 00:00:00 2001
From: vngarg <sngargrsd@gmail.com>
Date: Sun, 1 Mar 2020 17:40:30 +0530
Subject: [PATCH 3/7] Added the instructions to setup working environment

---
 SETUP WORKING ENVIRONMENT.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/SETUP WORKING ENVIRONMENT.md b/SETUP WORKING ENVIRONMENT.md
index f5629bd1..f63cacd0 100644
--- a/SETUP WORKING ENVIRONMENT.md	
+++ b/SETUP WORKING ENVIRONMENT.md	
@@ -8,32 +8,32 @@
 node -v
 ```
 
--***You also need to install npm, run the following command in Terminal ***
+- ***You also need to install npm, run the following command in Terminal***
 
 ```js
 npm install
 ```
 
--***To check that npm has installed successfully, run this command in your Terminal. This will display the version of npm installed.***
+- ***To check that npm has installed successfully, run this command in your Terminal. This will display the version of npm installed.***
 
 ```js
 npm -v
 ```
 
--***Your Backend environment is all setup.***
+- ***Your Backend environment is all setup.***
 
 ## To setup FrontEnd using Reactjs-
 
--***You need to run below command to install React on your machine.***
+- ***You need to run below command to install React on your machine.***
 
 ```js
 npm install -g create-react-app  
 ```
 
--***React is installed. Now to create a working directory for React, follow below command***
+- ***React is installed. Now to create a working directory for React, follow below command***
 
 ```js
 create-react-app <directory-name>
 ```
--***You have succesfully installed Reactjs for FrontEnd.***
+- ***You have succesfully installed Reactjs for FrontEnd.***
 

From b6de2a743779f817aa800965b1a5fea6da7ddcf9 Mon Sep 17 00:00:00 2001
From: "S.G" <49458871+vngarg@users.noreply.github.com>
Date: Mon, 2 Mar 2020 19:03:32 +0530
Subject: [PATCH 4/7] Updated the SETUP WORKING ENVIRONMENT.md

I had updated the changes needed.
---
 SETUP WORKING ENVIRONMENT.md | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/SETUP WORKING ENVIRONMENT.md b/SETUP WORKING ENVIRONMENT.md
index f63cacd0..2eb2ff38 100644
--- a/SETUP WORKING ENVIRONMENT.md	
+++ b/SETUP WORKING ENVIRONMENT.md	
@@ -4,19 +4,19 @@
 - ***Firstly install Node on your machine, [click here](https://nodejs.org/en/).***
 -***To check that Node has successfully installed, run the following command in Terminal. This will display the version of Node installed.***
 
-```js
+```bash
 node -v
 ```
 
 - ***You also need to install npm, run the following command in Terminal***
 
-```js
+```bsah
 npm install
 ```
 
 - ***To check that npm has installed successfully, run this command in your Terminal. This will display the version of npm installed.***
 
-```js
+```bash
 npm -v
 ```
 
@@ -26,13 +26,13 @@ npm -v
 
 - ***You need to run below command to install React on your machine.***
 
-```js
+```bash
 npm install -g create-react-app  
 ```
 
 - ***React is installed. Now to create a working directory for React, follow below command***
 
-```js
+```bash
 create-react-app <directory-name>
 ```
 - ***You have succesfully installed Reactjs for FrontEnd.***

From 75abd4a7680dcc99e5fc5225c2432284e79011d1 Mon Sep 17 00:00:00 2001
From: vngarg <sngargrsd@gmail.com>
Date: Tue, 3 Mar 2020 03:47:41 +0530
Subject: [PATCH 5/7] Added Animation to Water Tanks

---
 SETUP WORKING ENVIRONMENT.md |  2 +-
 src/demo.html                | 68 +++++++++++++++++++++++----------
 src/home.html                | 74 +++++++++++++++++++++++++++++++++---
 3 files changed, 118 insertions(+), 26 deletions(-)

diff --git a/SETUP WORKING ENVIRONMENT.md b/SETUP WORKING ENVIRONMENT.md
index f63cacd0..a8273fd1 100644
--- a/SETUP WORKING ENVIRONMENT.md	
+++ b/SETUP WORKING ENVIRONMENT.md	
@@ -2,7 +2,7 @@
 
 ## To setup Backend using Nodejs-
 - ***Firstly install Node on your machine, [click here](https://nodejs.org/en/).***
--***To check that Node has successfully installed, run the following command in Terminal. This will display the version of Node installed.***
+- ***To check that Node has successfully installed, run the following command in Terminal. This will display the version of Node installed.***
 
 ```js
 node -v
diff --git a/src/demo.html b/src/demo.html
index 45f49e11..0fc13c9a 100644
--- a/src/demo.html
+++ b/src/demo.html
@@ -25,46 +25,74 @@
 
   <div class="container">
     <h1>Water Tanks</h1>
-    <div class="loading" style="width: 140px;height: 140px;float:left"></div>
-    <div class="loading" style="width: 160px;height: 160px;float:left"></div>
+    <div class="loading" style="width: 200px;height: 140px;float:left"></div>
+    <div class="loading" style="width: 200px;height: 160px;float:left"></div>
     <div class="waterBall1" style="width: 200px;height:200px; float:left"></div>
     <div class="demo" style="width: 200px;height:200px; float:left"></div>
   </div>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
   <script>
-    $('.demo').createWaterBall({
-      targetRange: 90
-    });
+    // $('.demo').createWaterBall({
+    //   wave_config: {
+    //     waveWidth: 0.02,
+    //     waveHeight: 10
+    //   },
+    //   targetRange: 50
+    // });
 
     var loadingEle = $('.loading');
     var loading_width = loadingEle.width(),
       loading_height = loadingEle.height();
-    $('.loading').createWaterBall({
-      cvs_config: {
-        width: loading_width,
-        height: loading_height
+    // $('.loading').createWaterBall({
+    //   cvs_config: {
+    //     width: loading_width,
+    //     height: loading_height
+    //   },
+    //   wave_config: {
+    //     waveWidth: 0.02,
+    //     waveHeight: 10
+    //   },
+    //   data_range: [30, 70, 100],
+    //   isLoading: true,
+    //   nowRange: 70,
+    //   targetRange: 70
+    // });
+    // setTimeout(function () {
+    //   $('.loading').createWaterBall('updateRange', 80);
+    // }, 1000);
+    $('.waterBall1').createWaterBall({
+      csv_config: {
+        width: $('.waterBall1').width(),
+        height: $('.waterBall1').height()
+      },
+      wave_config: {
+        waveWidth: 0.02,
+        waveHeight: 15
+      },
+      data_range: [40, 50, 100],
+      targetRange: 75
+    });
+    $('.demo').createWaterBall({
+      csv_config: {
+        width: $('.demo').width(),
+        height: $('.demo').height()
       },
       wave_config: {
         waveWidth: 0.02,
-        waveHeight: 5
+        waveHeight: 15
       },
-      data_range: [30, 70, 100],
-      isLoading: true,
-      nowRange: 70,
+      data_range: [40, 50, 100],
       targetRange: 70
     });
-    setTimeout(function () {
-      $('.loading').createWaterBall('updateRange', 80);
-    }, 1000);
-    $('.waterBall1').createWaterBall({
+    $('.loading').createWaterBall({
       csv_config: {
-        width: $('.waterBall1').width(),
-        height: $('.waterBall1').height()
+        width: $('.loading').width(),
+        height: $('.loading').height()
       },
       wave_config: {
         waveWidth: 0.02,
-        waveHeight: 5
+        waveHeight: 15
       },
       data_range: [40, 50, 100],
       targetRange: 45
diff --git a/src/home.html b/src/home.html
index 0e5cec26..233ec56d 100644
--- a/src/home.html
+++ b/src/home.html
@@ -40,6 +40,11 @@
       text-align: center;
       font-weight: 800;
     }
+
+    .container {
+      margin: 150px auto;
+      max-width: 960px;
+    }
   </style>
 </head>
 
@@ -48,23 +53,24 @@
     <center>
       <h1 class="title">Water Monitoring System</h1>
       <p>Water Monitoring System is an IOT based Liquid Level Monitoring system that has
-        mechanisms to keep the user alerted in case of liquid overflow or when tank depletes.</p>
+        mechanisms to keep the user alerted in case of liquid overflow or when tank depletes.
+      </p>
     </center>
     <div class="row">
       <div class="col-lg-3">
-        <div class="tank1" style="width: 200px;height:200px; float:left"></div>
+        <div class="tank1" style="width: 140px;height: 140px;float:left"></div>
         <h2>Tank 1</h2>
       </div>
       <div class="col-lg-3">
-        <div class="tank2" style="width: 200px;height:200px; float:left"></div>
+        <div class="tank2" style="width: 140px;height: 140px;float:left"></div>
         <h2>Tank 2</h2>
       </div>
       <div class="col-lg-3">
-        <div class="tank3" style="width: 200px;height:200px; float:left"></div>
+        <div class="tank3" style="width: 140px;height: 140px;float:left"></div>
         <h2>Tank 3</h2>
       </div>
       <div class="col-lg-3">
-        <div class="tank4" style="width: 200px;height:200px; float:left"></div>
+        <div class="tank4" style="width: 140px;height: 140px;float:left"></div>
         <h2>Tank 4</h2>
       </div>
     </div>
@@ -92,7 +98,65 @@ <h1>Safe Zone</h1>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
+  <script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
   <script>
+
+    var loadingEle = $('.loading');
+    var loading_width = loadingEle.width(),
+      loading_height = loadingEle.height();
+
+    $('.tank1').createWaterBall({
+      csv_config: {
+        width: $('.tank1').width(),
+        height: $('.tank1').height()
+      },
+      wave_config: {
+        waveWidth: 0.02,
+        waveHeight: 15
+      },
+      data_range: [40, 50, 100],
+      targetRange: 55
+    });
+
+    $('.tank2').createWaterBall({
+      csv_config: {
+        width: $('.tank2').width(),
+        height: $('.tank2').height()
+      },
+      wave_config: {
+        waveWidth: 0.02,
+        waveHeight: 15
+      },
+      data_range: [40, 50, 100],
+      targetRange: 25
+    });
+
+    $('.tank3').createWaterBall({
+      csv_config: {
+        width: $('.tank3').width(),
+        height: $('.tank3').height()
+      },
+      wave_config: {
+        waveWidth: 0.02,
+        waveHeight: 15
+      },
+      data_range: [40, 50, 100],
+      targetRange: 45
+    });
+
+    $('.tank4').createWaterBall({
+      csv_config: {
+        width: $('.tank4').width(),
+        height: $('.tank4').height()
+      },
+      wave_config: {
+        waveWidth: 0.02,
+        waveHeight: 15
+      },
+      data_range: [40, 50, 100],
+      targetRange: 80
+    });
     //var x=30;
     //alert("vini");
     //var qs = window.GetQueryString(query);

From b8dcb6c95a79da7171917d502906778b8f6e2f64 Mon Sep 17 00:00:00 2001
From: vngarg <sngargrsd@gmail.com>
Date: Sat, 7 Mar 2020 20:04:12 +0530
Subject: [PATCH 6/7] Deleted README

---
 SETUP WORKING ENVIRONMENT.md | 39 ------------------------------------
 1 file changed, 39 deletions(-)
 delete mode 100644 SETUP WORKING ENVIRONMENT.md

diff --git a/SETUP WORKING ENVIRONMENT.md b/SETUP WORKING ENVIRONMENT.md
deleted file mode 100644
index 3d5caae8..00000000
--- a/SETUP WORKING ENVIRONMENT.md	
+++ /dev/null
@@ -1,39 +0,0 @@
-# HOW TO SETUP WORKING ENVIRONMENT ON YOUR LOCAL MACHINE
-
-## To setup Backend using Nodejs-
-- ***Firstly install Node on your machine, [click here](https://nodejs.org/en/).***
-- ***To check that Node has successfully installed, run the following command in Terminal. This will display the version of Node installed.***
-
-```bash
-node -v
-```
-
-- ***You also need to install npm, run the following command in Terminal***
-
-```bsah
-npm install
-```
-
-- ***To check that npm has installed successfully, run this command in your Terminal. This will display the version of npm installed.***
-
-```bash
-npm -v
-```
-
-- ***Your Backend environment is all setup.***
-
-## To setup FrontEnd using Reactjs-
-
-- ***You need to run below command to install React on your machine.***
-
-```bash
-npm install -g create-react-app  
-```
-
-- ***React is installed. Now to create a working directory for React, follow below command***
-
-```bash
-create-react-app <directory-name>
-```
-- ***You have succesfully installed Reactjs for FrontEnd.***
-

From 2947952267c340d8c196d18d5b60002f4427bee5 Mon Sep 17 00:00:00 2001
From: vngarg <sngargrsd@gmail.com>
Date: Sun, 8 Mar 2020 15:15:49 +0530
Subject: [PATCH 7/7] Changes DOne

---
 src/home.html | 58 ---------------------------------------------------
 1 file changed, 58 deletions(-)

diff --git a/src/home.html b/src/home.html
index 233ec56d..5eaa7c97 100644
--- a/src/home.html
+++ b/src/home.html
@@ -98,65 +98,7 @@ <h1>Safe Zone</h1>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
-  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
-  <script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
   <script>
-
-    var loadingEle = $('.loading');
-    var loading_width = loadingEle.width(),
-      loading_height = loadingEle.height();
-
-    $('.tank1').createWaterBall({
-      csv_config: {
-        width: $('.tank1').width(),
-        height: $('.tank1').height()
-      },
-      wave_config: {
-        waveWidth: 0.02,
-        waveHeight: 15
-      },
-      data_range: [40, 50, 100],
-      targetRange: 55
-    });
-
-    $('.tank2').createWaterBall({
-      csv_config: {
-        width: $('.tank2').width(),
-        height: $('.tank2').height()
-      },
-      wave_config: {
-        waveWidth: 0.02,
-        waveHeight: 15
-      },
-      data_range: [40, 50, 100],
-      targetRange: 25
-    });
-
-    $('.tank3').createWaterBall({
-      csv_config: {
-        width: $('.tank3').width(),
-        height: $('.tank3').height()
-      },
-      wave_config: {
-        waveWidth: 0.02,
-        waveHeight: 15
-      },
-      data_range: [40, 50, 100],
-      targetRange: 45
-    });
-
-    $('.tank4').createWaterBall({
-      csv_config: {
-        width: $('.tank4').width(),
-        height: $('.tank4').height()
-      },
-      wave_config: {
-        waveWidth: 0.02,
-        waveHeight: 15
-      },
-      data_range: [40, 50, 100],
-      targetRange: 80
-    });
     //var x=30;
     //alert("vini");
     //var qs = window.GetQueryString(query);