Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
[html5] Sensors API
<!doctype html>
<html>
<head>
<script src="script.js"></script>
</head>
<body>
<pre id="log" style="color: red; background-color: blue;"></pre>
</body>
</html>
window.addEventListener("load", function (ev) {
"use strict";
var log = document.getElementById("log");
// https://dvcs.w3.org/hg/dap/raw-file/tip/sensor-api/Overview.html
window.addEventListener("devicetemperature", function (ev) {
log.textContent += "devicetemperature " + ev.value + "\n";
}, false);
window.addEventListener("devicepressure", function (ev) {
log.textContent += "devicepressure " + ev.value + "\n";
}, false);
window.addEventListener("devicelight", function (ev) {
log.textContent += "devicelight " + ev.value + "\n";
// toy tric
log.style.color = "rgb(" + (255 - 2*ev.value) + ",0,0)";
log.style.backgroundColor = "rgb(0,0," + (2*ev.value) + ")";
}, false);
window.addEventListener("deviceproximity", function (ev) {
log.textContent += "deviceproximity " + ev.value + "\n";
// toy tric
if (ev.value < 3) navigator.vibrate([300, 100, 100]);
}, false);
window.addEventListener("devicenoise", function (ev) {
log.textContent += "devicenoise " + ev.value + "\n";
}, false);
window.addEventListener("devicehumidity", function (ev) {
log.textContent += "devicehumidity " + ev.value + "\n";
}, false);
//https://wiki.mozilla.org/Magnetic_Field_Events
window.addEventListener("devicemagneticfield", function (ev) {
log.textContent += "devicemagneticfield " + [ev.x, ev.y, ev.x]+ "\n";
}, false);
// https://dvcs.w3.org/hg/dap/raw-file/default/pressure/Overview.html
window.addEventListener("atmpressure", function (ev) {
log.textContent += "atmpressure " + ev.value + "\n";
}, false);
// https://dvcs.w3.org/hg/dap/raw-file/tip/humidity/Overview.html
window.addEventListener("humidity", function (ev) {
log.textContent += "humidity " + ev.value + "\n";
}, false);
// https://dvcs.w3.org/hg/dap/raw-file/tip/temperature/Overview.html
window.addEventListener("temperature", function (ev) {
log.textContent += "temperature " + [ev.f, ev.c, ev.k, ev.value] + "\n";
}, false);
// https://dvcs.w3.org/hg/dap/raw-file/tip/battery/Overview.html
try {
if (typeof navigator.getBattery === "function") {
navigator.getBattery().then(function (battery) {
log.textContent += "battery.level " + battery.level + "\n";
log.textContent += "battery.charging " + battery.charging + "\n";
log.textContent += "battery.chargeTime " + battery.chargeTime + "\n";
log.textContent += "battery.dischargeTime " + battery.dischargeTime + "\n";
battery.addEventListener("levelcharge", function (ev) {
log.textContent += "change battery.level " + battery.level + "\n";
}, false);
}).catch(function (err) {
log.textContent += err.toString() + "\n";
});
} else {
log.textContent += "navigator.getBattery is not existed\n";
}
} catch (ex) {
log.textContent += ex.toString() + "\n";
}
}, false);
@bellbind

This comment has been minimized.

Copy link
Owner Author

@bellbind bellbind commented Jun 12, 2015

demo: https://rawgit.com/bellbind/c60d7008e86c34a76aa1/raw/index.html

  • Firefox on Android support devicelight and deviceproximity event
  • Firefox on OSX/MacBookPro support devicelight event (near of face camera)
  • Chrome on Android support navigator.getBattery

events from: https://dvcs.w3.org/hg/dap/raw-file/tip/sensor-api/Overview.html

@bjordan555

This comment has been minimized.

Copy link

@bjordan555 bjordan555 commented Oct 30, 2016

Thanks for this.

Do you have any insight into which sources of DOM sensor data {devicetemperature, devicepressure, devicehumidity, devicelight, devicenoise, deviceproximity} are available on which hardware devices, operating systems, etc.? Someone with substantial traffic must also be sampling this, right?

REVISED: http://mobilehtml5.org/

Ben

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.