-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
127 lines (113 loc) · 3.6 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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sensor Stream Example</title>
<style>
/* CSS styles here */
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
flex-direction: column;
}
button {
font-size: 0.9em;
padding: 0.5em 1em;
color: #fff;
background-color: #007bff;
border: none;
border-radius: 5px;
cursor: pointer;
outline: none;
margin: 1em 0.125em;
transition: background-color 0.2s;
}
button[disabled] {
background: lightgrey;
cursor: cancel;
}
button:not([disabled]):hover {
background-color: #0056b3;
}
textarea {
max-width: 100%;
width: 80vw;
min-height: 300px;
max-height: 62vh;
}
</style>
</head>
<body>
<textarea id=log></textarea>
<aside>
<button id="startSensors">Activate Sensors</button>
<button id="showData">Show New Data</button>
</aside>
<script type="module">
import SensorStream from './stream.js';
import DeviceMotionSensor from './devicemotion.js';
import BluetoothSensor from './bluetooth.js';
import GeolocationSensor from './geolocation.js';
import DeviceProximitySensor from './deviceproximity.js';
import ConnectivitySensor from './connectivity.js';
import BatterySensor from './battery.js';
import OrientationSensor from './orientation.js';
import SystemProfileSensor from './profile.js';
const sensorStream = new SensorStream({accumulate:true, timestamp:true});
const startSensors = document.getElementById('startSensors');
const showData = document.getElementById('showData');
showData.disabled = true;
startSensors.onclick = async () => {
startSensors.disabled = true;
try {
// Instantiate the sensors
const dms = new DeviceMotionSensor();
//const bt = new BluetoothSensor();
const geo = new GeolocationSensor();
const prox = new DeviceProximitySensor();
const cnx = new ConnectivitySensor();
const batt = new BatterySensor();
const orient = new OrientationSensor();
const sys = new SystemProfileSensor();
// Add the sensors to the stream
sensorStream.add(dms);
//sensorStream.add(bt);
sensorStream.add(geo);
sensorStream.add(prox);
sensorStream.add(cnx);
sensorStream.add(batt);
sensorStream.add(orient);
sensorStream.add(sys);
for await (const state of sensorStream) {
globalThis.state = state; // Make the state available globally
showData.disabled = false;
}
} catch(e) {
console.error(`Error during start sensors`, e);
startSensors.disabled = false;
}
};
showData.onclick = async () => {
if (globalThis.state) {
appendLog(JSON.stringify(globalThis.state, null, 2));
globalThis.state = null;
showData.disabled = true;
}
};
function appendLog(newLog) {
const logElement = document.getElementById('log');
const currentValue = logElement.value;
if ( currentValue.slice(-1) == ']' ) {
logElement.value = currentValue.slice(0, -1);
}
logElement.value += `${currentValue.length == 0 ? '[' : ',\n'}` + newLog + `]`; // Append new log with a newline
logElement.scrollTo({ top: logElement.scrollHeight, behavior: 'smooth' }); // Smooth scroll to bottom
}
</script>
</body>
</html>