Web-APIs, die Sie bisher vermutlich nicht kannten ( Part 2 )

Im zweiten Teil der Web APIs stelle ich die Vibration und PointerLock API vor.


Vibration-API

In den meisten modernen Mobilgeräten ist Vibration Hardware verbaut. Die Vibration API bietet Web-Anwendungen die Möglichkeit auf diese Hardware zuzugreifen, um für eine bestimmte Dauer in einem Muster zu vibrieren. Dadurch kann man den Nutzer physikalischen Feedback geben, wenn z.B. eine Form Validierung fehlschlägt etc..

Eine einzige Methode steuert dabei die Vibration: window.navigator.vibrate(). Die Methode erwartet als Parameter die Dauer der Vibration in Millisekunden. Ein Muster kann in ein Array abgelegt werden. Die gerade Indizes repräsentieren die Schwingungsdauer und die ungerade Indizes die Verzögerung vor der nächsten Vibration.
1: if ('vibrate' in window.navigator) { 2:     // Vibriert 1 Sekunde lang 3:     navigator.vibrate(1000); 4:     // Array: Muster aus Vibration und Pausen 5:     navigator.vibrate([100, 400, 500, 300, 1000]); 6: }
Besitzt ein Gerät die Funktionalität nicht, würde nichts passieren. Wir haben trotzdem geprüft ob Vibration unterstützt wird.


Pointer Lock | Mouse Lock -API

Die Pointer Lock API stellt Methoden und Eigenschaften zur Verfügung, um auf Deltawerte des Mauszeigers zugreifen zu können. Mehr als das, es ist möglich die Maus auf ein bestimmtes HTML-Element zu sperren. Wenn die Maus gesperrt ist, kann man ohne den Fokus zu Verlieren, die Maus bewegen. Mit Pointer-Lock stoppt eine Manipulation nicht, wenn die Maus über den Browserrand hinaus geht. Dieses Verhalten ist perfekt für First-Person Games, um 3D-Objekten zu drehen oder für 360° Panoramas und vieles mehr.

Ähnlich wie mouse-capture, werden Ereignisse kontinuierlich Ausgelöst, wenn die Maus bewegt wird. Stoppt aber nicht, wenn der Mausbutton wieder losgelassen wird. Die API unterscheidet sich in den Folgenden Punkten von mouse-capture:

  • Pointer Lock ist Persistent: Die API gibt die Maus erst wieder frei, wenn ein bestimmter API-Aufruf eintritt oder der Benutzer eine spezielle Geste macht.
  • Die API ist nicht auf Browser oder Bildschirmgrenzen beschränkt.
  • Events werden fortlaufend ausgelöst, unabhängig ob eine Maustaste gedrückt ist oder nicht.
  • Der Mauszeiger wird durch Pointer Lock verborgen.
  • Zugriff auf rohe Mausdaten einschließlich der relativen Mausbewegungen

1.) Ein Element auf den wir die Pointer Lock Eigenschaft anwenden.
1: var c = document.createElement('canvas'),
2:    ctx = c.getContext('2d'),
3:    x = c.width = window.innerWidth,
4:    y = c.height = window.innerHeight,
5:    size = 40;
6:   7: document.body.appendChild(c);


Die Pointer Lock API erweitert das Dokument-Interface, sowohl um eine neue Eigenschaft, als auch um eine neue Methode. Die Eigenschaft pointerLockElement() wird für den Zugriff auf die aktuell gesperrten Elemente verwendet. Die Dokument-Methode exitPointerLock() wird verwendet, um die Zeigersperre zu verlassen.

2.) Cross Browser Pointer Lock Objekte erstellen.
8: c.requestPointerLock = c.requestPointerLock
9:                     || c.mozRequestPointerLock 10:                    || c.webkitRequestPointerLock; 11:    12: document.exitPointerLock = document.exitPointerLock 13:                         || document.mozExitPointerLock 14:                         || document.webkitExitPointerLock; 15:    16: document.pointerLockElement = document.pointerLockElement 17:                            || document.mozPointerLockElement 18:                            || document.webkitPointerLockElement;
 

3.) Hinzufügen eines Klick Eventlisteners auf unser Canvas-Element, um eine Umschaltfunktion zu realisieren. Die Umschaltfunktion sperrt den Mauszeiger, wenn der User auf das Canvas-Element Klickt. Klickt der User erneut, wird der Mauszeiger wieder freigelassen.
19: c.addEventListener('click', function() {
20:    if (document.pointerLockElement === c ) { 21:        document.exitPointerLock(); 22:    } else { 23:       c.requestPointerLock(); 24:    } 25: }
 

4.) Browserübergreifende pointerlockchange Events. Das Event wird Ausgelöst, wenn der Pointer Lock -Zustand sich ändert. Entweder durch den Aufruf von request /- exitPointerLock(), oder durch den Nutzer, wenn er z.B die ESC Taste drückt.
26: document.addEventListener('pointerlockchange', lockChanged, false);
27: document.addEventListener('mozpointerlockchange', lockChanged, false); 28: document.addEventListener('webkitpointerlockchange', lockChanged, false);
29:   30: document.addEventListener('pointerlockerror', pointerLockError, false);
31: document.addEventListener('mozpointerlockerror', pointerLockError, false);
32: document.addEventListener('webkitpointerlockerror', pointerLockError, false);


5.) Das pointerlockerror -Event wird ausgelöst, wenn ein Fehler eintritt. In der Funktion wird dann eine Fehlermeldung ausgegeben. Das pointerlockchange -Event wird ausgelöst, wenn der Pointer Lock -Zustand sich ändert, wird die Funktion lockChanged aufgerufen. In der Funktion wird geprüft ob ein Element gesperrt ist, wenn ja soll ein mousemove-Event auf das Dokument gelegt werden und wenn aktuell kein Element den Zeiger sperrt, soll er das mousemove-Event wieder entfernen.
33: function pointerLockError() {
34:   console.error('Pointer Lock fehlgeschlagen'); 35: } 36:   37: function lockChanged() {
38:   if (document.pointerLockElement === c ) { 39:     console.info('Pointer locked');
40:     document.addEventListener("mousemove", setXY, false);
41:   } else { 42:     console.info('Pointer unlocked');
43:     document.removeEventListener("mousemove", setXY, false);
44:   } 55: }


6.) Das Mausevent wird um zwei weitere Attribute - movementX und movementY erweitert. Der Wert ist die Differenz zwischen den aktuellen screenX, screenY und den der vorherigen screenX/Y Properties.
46: function setXY(e) {
47: // Die "Geschwindigkeit" zur aktuellen Position Hinzuaddieren
48:    var moveX = e.movementX || e.mozMovementX || e.webkitMovementX || 0;
49:    var moveY = e.movementY || e.mozMovementY || e.webkitMovementX || 0;
50:   51:    x += moveX;
52:    y += moveY;
53:      54:    // Werte im Canvas darstellen
55:    drawShape();
56: }
 

7.) In der Funktion drawShape werden die Grenzen abgefragt und die relative Position dargestellt.
57: function drawShape() {
58:   // Abfragen der Grenzen
59:   if (x > c.width + size) x = 0;
60:   if (y > c.height + size) y = 0;
61:   if (x < - size) x = c.width;
62:   if (y < - size) y = c.height;
63:   64:   with (ctx) {
65:       fillStyle = "#333";
66:       fillRect(0, 0, c.width, c.height);
67:       // Draw shape
68:       fillStyle = "#0ff";
69:       fillRect(x, y, size, size );
70:   } 71: }
 
Das Ergebnis:


Kommentare sind geschlossen