Added the instructions to setup working environment

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 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.***
+

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

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);