1- <!doctype html>
1+ <!DOCTYPE html>
22< html >
3+ < head >
4+ < meta charset ="utf-8 " />
5+ < meta http-equiv ="X-UA-Compatible " content ="IE=edge,chrome=1 " />
6+ < meta name ="viewport " content ="width=device-width, initial-scale=1 " />
7+ < meta name ="author " content ="Vinit Shahdeo " />
8+ < link
9+ href ="http://www.jqueryscript.net/css/jquerysctipttop.css "
10+ rel ="stylesheet "
11+ type ="text/css "
12+ />
13+ < title > Water Monitoring System</ title >
14+ < style >
15+ body {
16+ background-color : # fafafa
17+ font-family : "Roboto" ;
18+ }
319
4- < head >
5- < meta charset ="utf-8 ">
6- < meta http-equiv ="X-UA-Compatible " content ="IE=edge,chrome=1 ">
7- < meta name ="viewport " content ="width=device-width, initial-scale=1 ">
8- < meta name ="author " content ="Vinit Shahdeo ">
9- < link href ="http://www.jqueryscript.net/css/jquerysctipttop.css " rel ="stylesheet " type ="text/css ">
10- < title > Water Monitoring System</ title >
11- < style >
12- body {
13- background-color : # fafafa
14- font-family : 'Roboto' ;
15- }
20+ .container {
21+ margin : 150px auto;
22+ max-width : 960px ;
23+ }
24+ </ style >
25+ </ head >
1626
17- .container {
18- margin : 150px auto;
19- max-width : 960px ;
20- }
21- </ style >
22- </ head >
27+ < body >
28+ < div class ="container ">
29+ < h1 > Water Tanks</ h1 >
30+ < div class ="loading " style ="width: 140px;height: 140px;float:left "> </ div >
31+ < div class ="loading " style ="width: 160px;height: 160px;float:left "> </ div >
32+ < div
33+ class ="waterBall1 "
34+ style ="width: 200px;height:200px; float:left "
35+ > </ div >
36+ < div class ="demo " style ="width: 200px;height:200px; float:left "> </ div >
37+ </ div >
38+ < script src ="https://code.jquery.com/jquery-3.2.1.min.js "> </ script >
39+ < script type ="text/javascript " src ="lib/createWaterBall-jquery.js "> </ script >
40+ < script >
41+ $ ( ".demo" ) . createWaterBall ( {
42+ targetRange : 90
43+ } ) ;
2344
24- < body >
25-
26- < div class ="container ">
27- < h1 > Water Tanks</ h1 >
28- < div class ="loading " style ="width: 140px;height: 140px;float:left "> </ div >
29- < div class ="loading " style ="width: 160px;height: 160px;float:left "> </ div >
30- < div class ="waterBall1 " style ="width: 200px;height:200px; float:left "> </ div >
31- < div class ="demo " style ="width: 200px;height:200px; float:left "> </ div >
32- </ div >
33- < script src ="https://code.jquery.com/jquery-3.2.1.min.js "> </ script >
34- < script type ="text/javascript " src ="lib/createWaterBall-jquery.js "> </ script >
35- < script >
36- $ ( '.demo' ) . createWaterBall ( {
37- targetRange : 90
38- } ) ;
39-
40- var loadingEle = $ ( '.loading' ) ;
41- var loading_width = loadingEle . width ( ) ,
42- loading_height = loadingEle . height ( ) ;
43- $ ( '.loading' ) . createWaterBall ( {
44- cvs_config : {
45- width : loading_width ,
46- height : loading_height
47- } ,
48- wave_config : {
49- waveWidth : 0.02 ,
50- waveHeight : 5
51- } ,
52- data_range : [ 30 , 70 , 100 ] ,
53- isLoading : true ,
54- nowRange : 70 ,
55- targetRange : 70
56- } ) ;
57- setTimeout ( function ( ) {
58- $ ( '.loading' ) . createWaterBall ( 'updateRange' , 80 ) ;
59- } , 1000 ) ;
60- $ ( '.waterBall1' ) . createWaterBall ( {
61- csv_config : {
62- width : $ ( '.waterBall1' ) . width ( ) ,
63- height : $ ( '.waterBall1' ) . height ( )
64- } ,
65- wave_config : {
66- waveWidth : 0.02 ,
67- waveHeight : 5
68- } ,
69- data_range : [ 40 , 50 , 100 ] ,
70- targetRange : 45
71- } ) ;
72- </ script >
73-
74- </ body >
75-
76- </ html >
45+ var loadingEle = $ ( ".loading" ) ;
46+ var loading_width = loadingEle . width ( ) ,
47+ loading_height = loadingEle . height ( ) ;
48+ $ ( ".loading" ) . createWaterBall ( {
49+ cvs_config : {
50+ width : loading_width ,
51+ height : loading_height
52+ } ,
53+ wave_config : {
54+ waveWidth : 0.02 ,
55+ waveHeight : 5
56+ } ,
57+ data_range : [ 30 , 70 , 100 ] ,
58+ isLoading : true ,
59+ nowRange : 70 ,
60+ targetRange : 70
61+ } ) ;
62+ setTimeout ( function ( ) {
63+ $ ( ".loading" ) . createWaterBall ( "updateRange" , 80 ) ;
64+ } , 1000 ) ;
65+ $ ( ".waterBall1" ) . createWaterBall ( {
66+ csv_config : {
67+ width : $ ( ".waterBall1" ) . width ( ) ,
68+ height : $ ( ".waterBall1" ) . height ( )
69+ } ,
70+ wave_config : {
71+ waveWidth : 0.02 ,
72+ waveHeight : 5
73+ } ,
74+ data_range : [ 40 , 50 , 100 ] ,
75+ targetRange : 45
76+ } ) ;
77+ </ script >
78+ </ body >
79+ </ html >
0 commit comments