CityAwareness/index.html at master · kasunvimu8/CityAwareness · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
	<style type="text/css">
		.graphdiv{
			background-color: rgba(255,255,255,0.3);
		}
		.body{
			background-color: rgba(54,54,54);
		}
        .container {
            position: relative;

        }

        .text-block {
            position: absolute;

        }
	</style>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="js/graph.js"></script>
  <script src="js/map.js"></script>
  <script src ="js/showAll.js"></script>
  <script async defer
			src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBc1MbJ3aNLblbQ84VTyNqbrRWxVmJVLN4&callback=loadAll">
   </script>
  <script type="text/javascript">
      function start(){
          play();
          loadAll();

      }
  </script>

 </head>

 <body class="body" onload="start()">

    <div id="page-content-wrapper">
      	<nav class="navbar navbar-inverse">
		 	<div class="container-fluid">
			    <div class="navbar-header">
			    	<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				    </button>
			      	<a class="navbar-brand" href="#">Air And Sound Quality Monitoring System </a>

			    </div>

			     <div align="right">
			     	<button type="button" class="btn btn-info" style="margin-top: 5px" onclick="getCO();">CO</button>
			     	<button type="button" class="btn btn-info" style="margin-top: 5px" onclick="getCH();">CH</button>
			     	<button type="button" class="btn btn-info" style="margin-top: 5px"onclick="getSound();">Sound</button>

			     </div>
		  	</div>
		</nav>
	</div>


	<div class="container-fluid">
		<div class="container col-sm-3 btn-group-vertical">
            <button type="button" name="Colombo" class="btn btn-primary" onclick="plotRequest(name);">Colombo</button>
			<button type="button" name="Kandy" class="btn btn-primary" onclick="plotRequest(name);">Kandy</button>
            <button type="button" name ="Galle" class="btn btn-primary" onclick="plotRequest(name);">Galle</button>
		  	<button type="button" name ="Kurunegala" class="btn btn-primary" onclick="plotRequest(name);">Kurunegala</button>
		  	<button type="button" name ="Matara" class="btn btn-primary" onclick="plotRequest(name);">Matara</button>
		  	<button type="button" name ="Gampaha" class="btn btn-primary" onclick="plotRequest(name);">Gampaha</button>
		  	<button type="button" name ="Jaffna" class="btn btn-primary" onclick="plotRequest(name);">Jaffna</button>
		  	<button type="button" name ="Kegalle" class="btn btn-primary" onclick="plotRequest(name);">Kegalle</button>
		  	<button type="button" name ="Matale" class="btn btn-primary" onclick="plotRequest(name);">Matale</button>
		  	<button type="button" name ="Anuradhapura" class="btn btn-primary" onclick="plotRequest(name);">Anuradhapura</button>
		  	<button type="button" name ="Kaluthara" class="btn btn-primary" onclick="plotRequest(name);">Kaluthara</button>
		  	<button type="button" name ="Hambantota" class="btn btn-primary" onclick="plotRequest(name);">Hambantota</button>
		  	<button type="button" name ="Monaragala" class="btn btn-primary" onclick="plotRequest(name);">Monaragala</button>
		  	<button type="button" name ="Puttalam" class="btn btn-primary" onclick="plotRequest(name);">Puttalam</button>
		  	<button type="button" name ="Nuwara Eliya" class="btn btn-primary" onclick="plotRequest(name);">Nuwara Eliya</button>
		  	<button type="button" name ="Badulla" class="btn btn-primary" onclick="plotRequest(name);">Badulla</button>
		  	<button type="button" name ="Mannar" class="btn btn-primary" onclick="plotRequest(name);">Mannar</button>

		</div>

		<div  class="container col-sm-6 graphdiv" style="height: 550px" class="cont">

				<div id ="graph"  style="height: 545px " class="text-block">

					<div ng-app="app1" id="myDiv" style="height: 295px"> </div>
					<div ng-app="app2" id="myDiv2" style="height: 250px"> </div>
				</div>

		</div>

		<div id ="map" class="container col-sm-3 graphdiv" style="height: 550px" >  </div>

	</div>


 </body>
 </html>