Added the instructions to setup working environment

src/demo.html

@@ -47,46 +47,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

@@ -208,6 +208,7 @@ <h1>Safe Zone</h1>
       <p>
         <center><strong>Made by Vinit Shahdeo</strong></center>
       </p>
+
     </div>
   <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
   <script type="text/javascript" src="lib/createWaterBall-jquery.js"></script>
@@ -395,6 +396,97 @@ <h4>CONTACT</h4>
       </div>
     </footer>
 
+
+  <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>
+    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
+    });
+
+      function getQueryStringValue(key) {
+        return decodeURIComponent(
+          window.location.search.replace(
+            new RegExp(
+              "^(?:.*[&\\?]" +
+                encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") +
+                "(?:\\=([^&]*))?)?.*$",
+              "i"
+            ),
+            "$1"
+          )
+        );
+      }
+      var x = getQueryStringValue("tank1");
+      var y = getQueryStringValue("tank2");
+      var z = getQueryStringValue("tank3");
+      var w = getQueryStringValue("tank4");
+      $(".tank1").createWaterBall({
+        targetRange: x
+      });
+      $(".tank2").createWaterBall({
+        targetRange: y
+      });
+      $(".tank3").createWaterBall({
+        targetRange: z
+      });
+      $(".tank4").createWaterBall({
+        targetRange: w
+      });
+    </script>
+
     <!-- @author: Vinit Shahdeo -->
   </body>
 </html>