-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
108 lines (90 loc) · 7.81 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Origin Trial Token -->
<meta http-equiv="origin-trial" content="AtgOYVRO5xlsm/3qCzZ701Hx8qTUrCUbFVML9Z8E9vELP5w9K9E73YWGBQc4Ivy0hGd+++sh7JUtKx+3EuV3ngkAAABeeyJvcmlnaW4iOiAiaHR0cHM6Ly9ibHVlYXBwaW8uZ2l0aHViLmlvOjQ0MyIsICJmZWF0dXJlIjogIldlYkJsdWV0b290aCIsICJleHBpcnkiOiAxNDc2ODE1NjAyfQ==" />
<title>Visible things</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.7/angular-material.min.css'>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.css"/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.8.2/angular-material.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.1/nv.d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-nvd3/1.0.5/angular-nvd3.min.js"></script>
<script src="https://blueappio.github.io/blueapp.io/blueapp.io.min.js"></script>
<script src="visiblethings.js"></script>
<script src="utility.js"></script>
<script src="app.js"></script>
</head>
<body ng-app="visibleThings">
<div ng-controller="mainController">
<div ng-repeat="peripheral in data">
<h2> {{ peripheral.name }} </h2>
<div class="layout-wrap layout-row flex-100" layout="row" flex="100" layout-wrap="">
<div layout="column" flex="100" flex-gt-lg="20" flex-gt-sm="50" flex-gt-md="33" class="layout-column flex-gt-sm-20 flex-100">
<div class="data">
<div class="layout-wrap layout-row flex-100" layout="row" flex="100" layout-wrap="">
<label layout="column" flex="100" flex-gt-lg="40" flex-gt-sm="40" flex-gt-md="40" class="layout-column flex-gt-sm-40 flex-100">Temperature (°C/°F)</label>
<div layout="column" flex="100" flex-gt-lg="40" flex-gt-sm="40" flex-gt-md="40" class="layout-column flex-gt-sm-40 flex-100"> {{ peripheral.currTempC }} / {{ peripheral.currTempF}} </div>
</div>
</div>
<nvd3 options="options" data="peripheral.temp"></nvd3>
</div>
<div layout="column" flex="100" flex-gt-lg="20" flex-gt-sm="50" flex-gt-md="33" class="layout-column flex-gt-sm-20 flex-100">
<div class="data">
<div class="layout-wrap layout-row flex-100" layout="row" flex="100" layout-wrap="">
<label layout="column" flex="100" flex-gt-lg="30" flex-gt-sm="30" flex-gt-md="30" class="layout-column flex-gt-sm-30 flex-100">Humidity (%rH)</label>
<div layout="column" flex="100" flex-gt-lg="70" flex-gt-sm="70" flex-gt-md="70" class="layout-column flex-gt-sm-70 flex-100"> {{ peripheral.currHum }} </div>
</div>
</div>
<nvd3 options="options" data="peripheral.hum"></nvd3>
</div>
<div layout="column" flex="100" flex-gt-lg="20" flex-gt-sm="50" flex-gt-md="33" class="layout-column flex-gt-sm-50 flex-100">
<div class="data">
<div class="layout-wrap layout-row flex-100" layout="row" flex="100" layout-wrap="">
<label layout="column" flex="100" flex-gt-lg="35" flex-gt-sm="35" flex-gt-md="35" class="layout-column flex-gt-sm-35 flex-100">Light (mW/cm2)</label>
<div layout="column" flex="100" flex-gt-lg="65" flex-gt-sm="65" flex-gt-md="65" class="layout-column flex-gt-sm-65 flex-100">x: {{ peripheral.currLight[0] }} klux / y: {{ peripheral.currLight[1]}} / z: {{ peripheral.currLight[2]}} </div>
</div>
</div>
<nvd3 options="options" data="peripheral.light"></nvd3>
</div>
<div layout="column" flex="100" flex-gt-lg="20" flex-gt-sm="50" flex-gt-md="33" class="layout-column flex-gt-sm-50 flex-100">
<div class="data">
<div class="layout-wrap layout-row flex-100" layout="row" flex="100" layout-wrap="">
<label layout="column" flex="100" flex-gt-lg="25" flex-gt-sm="25" flex-gt-md="25" class="layout-column flex-gt-sm-25 flex-100">Accel. (G)</label>
<div layout="column" flex="100" flex-gt-lg="75" flex-gt-sm="75" flex-gt-md="75" class="layout-column flex-gt-sm-75 flex-100">x: {{ peripheral.currAcc[0]}} / y: {{ peripheral.currAcc[1]}} / z: {{ peripheral.currAcc[2]}} </div>
</div>
</div>
<nvd3 options="options" data="peripheral.acc"></nvd3>
</div>
<div layout="column" flex="100" flex-gt-lg="20" flex-gt-sm="50" flex-gt-md="33" class="layout-column flex-gt-sm-50 flex-100">
<div class="data">
<div class="layout-wrap layout-row flex-100" layout="row" flex="100" layout-wrap="">
<label layout="column" flex="100" flex-gt-lg="35" flex-gt-sm="35" flex-gt-md="35" class="layout-column flex-gt-sm-35 flex-100">Gyroscope (deg/s)</label>
<div layout="column" flex="100" flex-gt-lg="65" flex-gt-sm="65" flex-gt-md="65" class="layout-column flex-gt-sm-65 flex-100">x: {{ peripheral.currGyro[0]}} / y: {{ peripheral.currGyro[1]}} / z: {{ peripheral.currGyro[2]}} </div>
</div>
</div>
<nvd3 options="options" data="peripheral.gyro"></nvd3>
</div>
<div layout="column" flex="100" flex-gt-lg="20" flex-gt-sm="50" flex-gt-md="33" class="layout-column flex-gt-sm-50 flex-100">
<div class="data">
<div class="layout-wrap layout-row flex-100" layout="row" flex="100" layout-wrap="">
<label layout="column" flex="100" flex-gt-lg="30" flex-gt-sm="30" flex-gt-md="30" class="layout-column flex-gt-sm-30 flex-100">Mag. Field (µT)</label>
<div layout="column" flex="100" flex-gt-lg="70" flex-gt-sm="70" flex-gt-md="70" class="layout-column flex-gt-sm-70 flex-100">x: {{ peripheral.currMag[0]}} / y: {{ peripheral.currMag[1]}} / z: {{ peripheral.currMag[2]}} </div>
</div>
</div>
<nvd3 options="options" data="peripheral.mag"></nvd3>
</div>
</div>
</div>
<div class="emptymsg w3-animate-opacity">
<p style="position: absolute; left: 10%" >Searching for Devices...</p>
</div>
</div>
</body>
</html>