Webtechnologien Sommersemester 2018
Sascha Lemke
Worum geht es bei der API?
window.addEventListener('devicelight', function(event) {
console.log(event.value);
});
Definition von Sensoren
let sensor = new Accelerometer();
const sensor = new DirectTirePressureSensor({
position: "rear",
side: "left"
});
Welche Möglichkeiten habe ich nun?
Abfragen von Sensordaten im Code
interface Sensor : EventTarget {
readonly attribute boolean activated;
readonly attribute boolean hasReading;
readonly attribute DOMHighResTimeStamp? timestamp;
void start();
void stop();
attribute EventHandler onreading;
attribute EventHandler onactivate;
attribute EventHandler onerror;
};
dictionary SensorOptions {
double frequency;
};
let sensor = new Gyroscope();
sensor.start();
sensor.onreading = () => {
console.log("Angular velocity (X-axis) " + sensor.x);
console.log("Angular velocity (Y-axis) " + sensor.y);
console.log("Angular velocity (Z-axis) " + sensor.z);
};
sensor.onerror = event => {
console.log(event.error.name, event.error.message);
};
let sensor = new Accelerometer();
sensor.start();
sensor.onreading = () => {
console.log("Acceleration along X-axis: " + sensor.x);
console.log("Acceleration along Y-axis: " + sensor.y);
console.log("Acceleration along Z-axis: " + sensor.z);
};
sensor.onerror = event => {
console.log(event.error.name, event.error.message);
};
const sensor = new AmbientLightSensor();
sensor.onreading = () => console.log(sensor.illuminance);
sensor.onerror = event => console.log(
event.error.name,
event.error.message
);
sensor.start();
const sensor = new AbsoluteOrientationSensor();
const mat4 = new Float32Array(16);
sensor.start();
sensor.onerror = event => console.log(
event.error.name,
event.error.message
);
sensor.onreading = () => {
sensor.populateMatrix(mat4);
};
let sensor = new Magnetometer();
sensor.start();
sensor.onreading = () => {
console.log("Magnetic field along the X-axis " + sensor.x);
console.log("Magnetic field along the Y-axis " + sensor.y);
console.log("Magnetic field along the Z-axis " + sensor.z);
};
sensor.onerror = event => {
console.log(event.error.name, event.error.message);
};
Der praktische Teil des Workshops
Sind alle Teilnehmer bereit?
$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com
$ git clone https://github.com/username/generic-sensor-api-workshop
Setup erfolgreich!
Lesen von Sensorendaten. Folgende Ziele:
const sensor1 = new Accelerometer();
const sensor2 = new Gyroscope();
sensor.x // enthält den x Wert
sensor.y // enthält den y Wert
sensor.z // enthält den z Wert
sensor.onreading = () => {};
sensor.onerror = event => {};
Wir implementieren einen Dark Mode! Folgende Ziele:
const sensor = new AmbientLightSensor();
sensor.illuminance // enthält den Lichtwert
sensor.onreading = () => {};
sensor.onerror = event => {};