Generic Sensor API

W3C Candidate Recommendation

Webtechnologien Sommersemester 2018

Sascha Lemke

Workshop Agenda

  1. Generic Sensor API
  2. Spezifikation
  3. Sensoren
  4. Anwendung
  5. Coding

Generic Sensor API

Worum geht es bei der API?

Generic Sensor API

  • Abstraktes Interface für Sensoren
  • Einheitlicher Zugriff
  • Nutzung in "headless environments" (Terminal, Nodejs, ...)

Wie sieht es denn aktuell aus?

  • Ambient Light Sensor API
  • Battery Status API
  • Geolocation API
  • Proximity API
  • Device Orientation API
  • Vibration API
  • ...

Ambient Light Sensor


window.addEventListener('devicelight', function(event) {

  console.log(event.value);

});

Spezifikation

Definition von Sensoren

Device Sensor

  • Bezeichnet den Sensor im Gerät
  • Sensordaten enthalten die Informationen des Sensors, sowie einen Zeitstempel

Platform Sensor

  • Bezeichnet Schnittstelle der Plattform
  • Wird verwendet um die Daten ein oder mehrerer Sensoren abzurufen
  • Stellt eine Abstraktion des physischen Sensors dar

Mögliche Implementierung

model Bildquelle: Generic Sensor API Candidate Recommendation

Default Sensor


let sensor = new Accelerometer();

Alternative Sensoren


const sensor = new DirectTirePressureSensor({
	position: "rear",
	side: "left"
});

Privatsphäre und Sicherheit

  • Location Tracking
  • Eavesdropping
  • Keystroke Monitoring
  • Device Fingerprints
  • User Identifying

Weitere Punkte

  • HTTPS ist eine Grundvoraussetzung
  • Die API nutzt die Feature Policy
  • Sensordaten können nur in einem sichtbaren Frame abgerufen werden

Sensoren

Welche Möglichkeiten habe ich nun?

Neue Standards

Gyroscope

Gyroscope
Bildquelle: developers.google.com

Accelerometer

Accelerometer
Bildquelle: developers.google.com

Orientation

Orientation
Bildquelle: developers.google.com

Anwendung

Abfragen von Sensordaten im Code

Generic Sensor API


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;
};

Sensor Lifecycle

Lifecycle
Bildquelle: Generic Sensor API Candidate Recommendation

Gyroscope


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);
};

Accelerometer


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);
};

Ambient Light Sensor


const sensor = new AmbientLightSensor();

sensor.onreading = () => console.log(sensor.illuminance);

sensor.onerror = event => console.log(
  event.error.name,
  event.error.message
);

sensor.start();

Orientation Sensor


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);
};

Magnetometer


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);
};

Coding

Der praktische Teil des Workshops

Sind alle Teilnehmer bereit?

Setup (Chrome)

  1. Google Chrome auf einem Smartphone/Tablet installieren
  2. Google Chrome auf Version 67 aktualisieren
  3. Flags in Chrome aktivieren
    1. chrome://flags/#enable-generic-sensor
    2. chrome://flags/#enable-generic-sensor-extra-classes
  4. Google Chrome neu starten

Setup Git (1)

  1. Bei Github registrieren (https://github.com/)

Setup Git (2)

  1. Git herunterladen (https://git-scm.com/)
  2. Git installieren (Defaults sind ausreichend)
  3. Terminal öffnen
$ git config --global user.name "John Doe"
	$ git config --global user.email johndoe@example.com

Setup Git (3)

  1. Repository auf Github forken
    (https://github.com/slemke/generic-sensor-api-workshop)
$ git clone https://github.com/username/generic-sensor-api-workshop

Setup erfolgreich!

Implementierung #1

Lesen von Sensorendaten. Folgende Ziele:

  1. Ausgeben von Daten des Accelerometers
  2. Ausgeben von Daten des Gyroscopes

Wichtige Aufrufe



	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 => {};
						

Implementierung #2

Wir implementieren einen Dark Mode! Folgende Ziele:

  1. Mit dem Ambient Light Sensor das Umgebungslicht abfragen
  2. Die Styles der Webseite anpassen, wenn die Umgebung zu dunkel wird (<= 150 Lux)

Wichtige Aufrufe



  const sensor = new AmbientLightSensor();
  sensor.illuminance // enthält den Lichtwert
  sensor.onreading = () => {};

  sensor.onerror = event => {};
						

Vielen Dank!

Quellen (1)

Quellen (2)

Quellen (3)