Odklepanje fizičnega sveta: Poglobljen pregled API-ja Device Motion

V nenehno razvijajočem se svetu spletnega razvoja postaja meja med naravnimi in spletnimi aplikacijami vse bolj zabrisana. Sodobni spletni brskalniki niso več le statični pregledovalniki dokumentov; so zmogljive platforme, sposobne zagotavljanja bogatih, interaktivnih in poglobljenih izkušenj. Ena najbolj vznemirljivih meja v tem razvoju je sposobnost spleta za interakcijo s fizičnim svetom. Od mobilnih iger, ki se odzivajo na vsak vaš nagib in tresljaj, do pregledovalnikov obogatene resničnosti, ki digitalne informacije prekrivajo z vašo okolico – vse te izkušnje poganja nabor zmogljivih brskalniških API-jev. Osrednjega pomena za to zmožnost je API Device Motion.

Ta obsežen vodnik je namenjen globalnemu občinstvu spletnih razvijalcev. Raziskali bomo API Device Motion, s posebnim poudarkom na dostopu in interpretaciji podatkov dveh temeljnih senzorjev, ki jih najdemo v večini sodobnih naprav: merilnika pospeška in žiroskopa. Ne glede na to, ali gradite progresivno spletno aplikacijo (PWA), igro v brskalniku ali edinstven pripomoček, vam bo razumevanje tega API-ja odprlo novo dimenzijo interaktivnosti za vaše uporabnike, ne glede na to, kje na svetu so.

Razumevanje temeljnih konceptov: gibanje v primerjavi z orientacijo

Preden se poglobimo v kodo, je ključnega pomena, da ločimo med dvema povezanima, a različnima konceptoma: gibanjem naprave in orientacijo naprave. Brskalnik za to ponuja ločena dogodka:

• Gibanje naprave (dogodek `devicemotion`): Ta dogodek zagotavlja informacije o pospešku naprave in njeni hitrosti vrtenja. Pove vam, kako se naprava premika. To je naš primarni poudarek v tem članku.
• Orientacija naprave (dogodek `deviceorientation`): Ta dogodek zagotavlja informacije o fizični orientaciji naprave v 3D prostoru. Pove vam, v katero smer je naprava obrnjena, običajno kot niz kotov glede na fiksni koordinatni sistem na Zemlji.

Predstavljajte si takole: `devicemotion` vam pove o potovanju (sile gibanja), medtem ko vam `deviceorientation` pove o cilju (končni položaj). Čeprav se pogosto uporabljata skupaj, je ločeno razumevanje ključno za obvladovanje njunih zmožnosti. V tem vodniku se bomo osredotočili na bogate podatke, ki jih zagotavlja dogodek `devicemotion`, ki prihajajo neposredno iz merilnika pospeška in žiroskopa.

Gradniki: Razlaga merilnikov pospeška in žiroskopov

V srcu API-ja Device Motion sta dva neverjetna kosa mikro-elektro-mehanske (MEMS) strojne opreme. Poglejmo, kaj vsak od njiju počne.

Merilnik pospeška: Zaznavanje gibanja in gravitacije

Merilnik pospeška je senzor, ki meri lastni pospešek. To ni samo pospešek, ki ga doživite, ko hitreje premaknete telefon (npr. ga tresete), ampak tudi stalni pospešek zaradi gravitacije. To je temeljni koncept, ki ga je treba razumeti: naprava, ki miruje na ravni mizi, še vedno doživlja silo gravitacije, in merilnik pospeška to zazna kot pospešek približno 9,81 metra na sekundo na kvadrat (m/s²).

Podatki so podani vzdolž treh osi na podlagi standardiziranega koordinatnega sistema, ki ga določa World Wide Web Consortium (W3C):

• os x: Poteka od leve proti desni čez zaslon.
• os y: Poteka od spodaj navzgor čez zaslon.
• os z: Pravokotna na zaslon, usmerjena navzven proti uporabniku.

Dogodek `devicemotion` vam daje dve glavni lastnosti, povezani s pospeškom:

1. accelerationIncludingGravity: Ta objekt vsebuje surove podatke iz senzorja. Meri združene sile gibanja naprave in Zemljine gravitacijske sile. Za številne aplikacije, kot sta ustvarjanje vodne tehtnice ali zaznavanje nagiba, je to najbolj zanesljiva lastnost, saj gravitacija zagotavlja stalno, predvidljivo referenčno točko.
2. acceleration: Ta objekt predstavlja poskus brskalnika, da izolira gibanje, ki ga sproži uporabnik, z odštevanjem učinka gravitacije. Čeprav je v teoriji uporaben, se njegova razpoložljivost in natančnost lahko močno razlikujeta med različnimi napravami in brskalniki. Številne naprave za to uporabljajo visokopasovni filter, ki morda ni popoln. Zato lahko za mnoge primere uporabe delo s surovimi podatki `accelerationIncludingGravity` in izvajanje lastnih izračunov privede do bolj doslednih rezultatov.

Žiroskop: Zaznavanje vrtenja

Medtem ko merilnik pospeška meri linearno gibanje, žiroskop meri kotno hitrost ali hitrost vrtenja. Pove vam, kako hitro se naprava vrti okoli vsake od treh osi. To je bistveno za aplikacije, ki se morajo odzvati na zvijanje, obračanje ali premikanje naprave.

Podatki žiroskopa so na voljo v lastnosti rotationRate dogodka `devicemotion`. Vsebuje tri vrednosti, merjene v stopinjah na sekundo:

• alpha: Hitrost vrtenja okoli osi z (vrtenje v ravnini, kot plošča na gramofonu).
• beta: Hitrost vrtenja okoli osi x (nagibanje naprej in nazaj).
• gamma: Hitrost vrtenja okoli osi y (nagibanje vstran).

Z integracijo teh hitrosti vrtenja skozi čas lahko izračunate spremembo orientacije naprave, kar je popolno za ustvarjanje izkušenj, kot so 360-stopinjski pregledovalniki fotografij ali preproste igre, nadzorovane z gibanjem.

Začetek: Implementacija API-ja Device Motion

Zdaj, ko razumemo teorijo, preidimo na prakso. Implementacija API-ja Device Motion vključuje nekaj ključnih korakov, še posebej ob upoštevanju osredotočenosti sodobnega spleta na varnost in zasebnost uporabnikov.

1. korak: Zaznavanje funkcionalnosti

Najprej in predvsem, nikoli ne smete predpostavljati, da brskalnik ali naprava uporabnika podpira ta API. Vedno začnite z zaznavanjem funkcionalnosti. To je preprost preizkus, ali objekt `DeviceMotionEvent` obstaja v objektu `window`.

            if (window.DeviceMotionEvent) {
  console.log("Device Motion is supported");
} else {
  console.log("Device Motion is not supported on this device.");
}
            

              
                Copy
              
            
          

Ta preprosta varovalka preprečuje napake in vam omogoča, da zagotovite nadomestno izkušnjo za uporabnike na nepodprtih napravah, kot so starejši namizni brskalniki.

2. korak: Zahtevanje dovoljenj - sodobni spletni varnostni model

To je verjetno najbolj kritičen in pogosto spregledan korak za razvijalce danes. Iz razlogov zasebnosti in varnosti mnogi sodobni brskalniki, predvsem Safari na iOS 13 in novejših, zahtevajo izrecno dovoljenje uporabnika za dostop do podatkov senzorjev gibanja in orientacije. To dovoljenje je mogoče zahtevati samo kot odziv na neposredno interakcijo uporabnika, kot je klik na gumb.

Poskus dodajanja poslušalca dogodkov brez tega dovoljenja na takšnih napravah bo povzročil, da se ta nikoli ne bo sprožil. Pravilen pristop je zagotoviti gumb ali kontrolnik, ki ga mora uporabnik aktivirati, da omogoči funkcijo.

Tukaj je primer implementacije po najboljši praksi:

            const permissionButton = document.getElementById('permission-button');

permissionButton.addEventListener('click', () => {
  // Check if the permission function exists
  if (typeof DeviceMotionEvent.requestPermission === 'function') {
    // iOS 13+ devices
    DeviceMotionEvent.requestPermission()
      .then(permissionState => {
        if (permissionState === 'granted') {
          window.addEventListener('devicemotion', handleMotionEvent);
          // Hide the button after permission is granted
          permissionButton.style.display = 'none';
        } else {
          // Handle permission denial
          alert('Permission to access motion sensors was denied.');
        }
      })
      .catch(console.error); // Handle potential errors
  } else {
    // Non-iOS 13+ devices
    window.addEventListener('devicemotion', handleMotionEvent);
    // You might also want to hide the button here as it's not needed
    permissionButton.style.display = 'none';
  }
});

function handleMotionEvent(event) {
  // Data handling logic goes here...
  console.log(event);
}
            

              
                Copy
              
            
          

Ta del kode je robusten in globalno združljiv. Najprej preveri, ali metoda `requestPermission` obstaja. Če obstaja (kar kaže na okolje iOS 13+), jo pokliče. Metoda vrne obljubo (promise), ki se razreši s stanjem dovoljenja. Če je stanje 'granted', dodamo naš poslušalec dogodkov. Če metoda `requestPermission` ne obstaja, lahko predpostavimo, da smo na drugi platformi (kot je Android s Chromeom), kjer je dovoljenje bodisi podeljeno privzeto bodisi se obravnava drugače, in lahko poslušalca dodamo neposredno.

3. korak: Dodajanje in obravnava poslušalca dogodkov

Ko je dovoljenje zagotovljeno, pripnete svoj poslušalec dogodkov na objekt `window`. Povratna funkcija bo prejela objekt `DeviceMotionEvent` kot svoj argument vsakič, ko se podatki senzorja posodobijo, kar je običajno okoli 60-krat na sekundo (60Hz).

Razširimo funkcijo `handleMotionEvent` za razčlenjevanje podatkov:

            function handleMotionEvent(event) {
  const acceleration = event.acceleration;
  const gravity = event.accelerationIncludingGravity;
  const rotation = event.rotationRate;
  const interval = event.interval;

  // For demonstration, let's display the data
  const dataContainer = document.getElementById('data-container');

  dataContainer.innerHTML = `
    <h3>Acceleration (without gravity)</h3>
    <p>X: ${acceleration.x ? acceleration.x.toFixed(3) : 'N/A'}</p>
    <p>Y: ${acceleration.y ? acceleration.y.toFixed(3) : 'N/A'}</p>
    <p>Z: ${acceleration.z ? acceleration.z.toFixed(3) : 'N/A'}</p>

    <h3>Acceleration (including gravity)</h3>
    <p>X: ${gravity.x ? gravity.x.toFixed(3) : 'N/A'}</p>
    <p>Y: ${gravity.y ? gravity.y.toFixed(3) : 'N/A'}</p>
    <p>Z: ${gravity.z ? gravity.z.toFixed(3) : 'N/A'}</p>

    <h3>Rotation Rate</h3>
    <p>Alpha (z): ${rotation.alpha ? rotation.alpha.toFixed(3) : 'N/A'}</p>
    <p>Beta (x): ${rotation.beta ? rotation.beta.toFixed(3) : 'N/A'}</p>
    <p>Gamma (y): ${rotation.gamma ? rotation.gamma.toFixed(3) : 'N/A'}</p>

    <h3>Update Interval</h3>
    <p>${interval.toFixed(3)} ms</p>
  `;
}
            

              
                Copy
              
            
          

Ta funkcija za obravnavo dogodkov destrukturira ustrezne lastnosti iz objekta dogodka in jih prikaže. Upoštevajte preverjanja za vrednosti `null` ali `undefined`, saj ni zagotovljeno, da so vse lastnosti na voljo na vsaki napravi. Na primer, naprava brez žiroskopa bo poročala `null` za `event.rotationRate`.

Praktične uporabe in primeri kode

Teorija je odlična, vendar resnična moč API-ja Device Motion oživi s praktičnimi aplikacijami. Raziščimo nekaj primerov, na katerih lahko gradite.

Primer 1: »Detektor tresenja« - univerzalna gesta

Zaznavanje tresenja je pogost interakcijski vzorec, ki se uporablja v aplikacijah po vsem svetu za sprožitev dejanj, kot so »razveljavi«, premešanje seznama predvajanja ali čiščenje obrazca. To lahko dosežemo s spremljanjem pospeška za nenadne spremembe visoke magnitude.

            let lastX, lastY, lastZ;
let moveCounter = 0;
const shakeThreshold = 15; // Experiment with this value

function handleShake(event) {
  const { x, y, z } = event.accelerationIncludingGravity;

  if (lastX !== undefined) {
    const deltaX = Math.abs(lastX - x);
    const deltaY = Math.abs(lastY - y);
    const deltaZ = Math.abs(lastZ - z);

    if (deltaX + deltaY + deltaZ > shakeThreshold) {
      moveCounter++;
    } else {
      moveCounter = 0;
    }

    if (moveCounter > 3) { // Trigger after a few rapid movements
      console.log('Shake detected!');
      // Trigger your action here, e.g., shufflePlaylist();
      moveCounter = 0; // Reset counter to avoid multiple triggers
    }
  }

  lastX = x;
  lastY = y;
  lastZ = z;
}

// Add 'handleShake' as your event listener callback
            

              
                Copy
              
            
          

Ta koda shranjuje zadnje znane vrednosti pospeška in jih primerja s trenutnimi. Če vsota sprememb po vseh treh oseh preseže določen prag za več zaporednih dogodkov, zabeleži tresenje. Ta preprosta logika je presenetljivo učinkovita.

Primer 2: Ustvarjanje preproste vodne tehtnice (libele)

Za izdelavo digitalne vodne tehtnice lahko uporabimo stalno silo gravitacije. Ko je naprava popolnoma ravna, bo sila gravitacije (~-9,81 m/s²) v celoti na osi z. Ko napravo nagnete, se ta sila porazdeli po oseh x in y. To porazdelitev lahko uporabimo za pozicioniranje »mehurčka« na zaslonu.

            const bubble = document.getElementById('bubble');
const MAX_TILT = 10; // Corresponds to 9.81 m/s^2

function handleSpiritLevel(event) {
  const { x, y } = event.accelerationIncludingGravity;

  // Map the acceleration values to a CSS transform
  // Clamp the values to a reasonable range for a better visual effect
  const tiltX = Math.min(Math.max(y, -MAX_TILT), MAX_TILT) * -5; // Invert and scale
  const tiltY = Math.min(Math.max(x, -MAX_TILT), MAX_TILT) * 5;  // Scale

  bubble.style.transform = `translateX(${tiltY}px) translateY(${tiltX}px)`;
}

// Add 'handleSpiritLevel' as your event listener callback
            

              
                Copy
              
            
          

V tem primeru preslikamo komponente `x` in `y` gravitacije na lastnosti CSS `translateX` in `translateY` elementa mehurčka. Faktor skaliranja (`* 5`) je mogoče prilagoditi za nadzor občutljivosti. To prikazuje neposredno in močno uporabo lastnosti `accelerationIncludingGravity`.

Primer 3: Pogled »razgledovanja« na osnovi žiroskopa (360° pregledovalnik fotografij)

Za bolj poglobljeno izkušnjo lahko uporabimo `rotationRate` žiroskopa za ustvarjanje učinka »čarobnega okna«, kjer vrtenje fizične naprave premika pogled, kot je 360° fotografija ali 3D prizor.

            const scene = document.getElementById('scene');
let currentRotation = { beta: 0, gamma: 0 };
let lastTimestamp = 0;

function handleLookAround(event) {
  if (lastTimestamp === 0) {
    lastTimestamp = event.timeStamp;
    return;
  }

  const delta = (event.timeStamp - lastTimestamp) / 1000; // Time delta in seconds
  lastTimestamp = event.timeStamp;

  const rotation = event.rotationRate;
  if (!rotation) return; // No gyroscope data

  // Integrate rotation rate over time to get the angle change
  currentRotation.beta += rotation.beta * delta;
  currentRotation.gamma += rotation.gamma * delta;

  // Apply rotation to the scene element using CSS transform
  // Note: The axes might need to be swapped or inverted depending on desired effect
  scene.style.transform = `rotateX(${-currentRotation.beta}deg) rotateY(${-currentRotation.gamma}deg)`;
}

// Add 'handleLookAround' as your event listener callback
            

              
                Copy
              
            
          

Ta primer je naprednejši. Integrira kotno hitrost (`rotationRate`) v časovnem intervalu med dogodki za izračun skupne spremembe kota. Ta kot se nato uporabi za posodobitev lastnosti CSS `rotateX` in `rotateY`. Ključni izziv pri tem pristopu je odstopanje žiroskopa, kjer se majhne napake sčasoma kopičijo, kar povzroči, da pogled počasi drsi. Za natančnejše aplikacije se to pogosto popravlja s fuzijo senzorjev, ki združuje podatke žiroskopa s podatki iz merilnika pospeška in magnetometra (pogosto prek dogodka `deviceorientation`).

Pomembni premisleki in najboljše prakse za globalno občinstvo

Gradnja z API-jem Device Motion je zmogljiva, vendar je odgovorno ravnanje ključno za ustvarjanje dobre uporabniške izkušnje za vse in povsod.

Zmogljivost in življenjska doba baterije

Senzorji gibanja porabljajo energijo. Nenehno poslušanje dogodkov `devicemotion`, tudi ko je vaša aplikacija v ozadju, lahko znatno izprazni baterijo uporabnika. To je kritičen premislek za uporabnike v regijah, kjer je stalen dostop do polnjenja morda manj pogost.

• Poslušajte le, ko je to potrebno: Dodajte poslušalca dogodkov, ko je vaša komponenta aktivna in vidna.
• Počistite za seboj: Vedno odstranite poslušalca dogodkov, ko je komponenta uničena ali funkcija ni več potrebna. `window.removeEventListener('devicemotion', yourHandlerFunction);`
• Omejite svojo obravnavo: Če ne potrebujete 60 posodobitev na sekundo, lahko uporabite tehnike, kot sta `requestAnimationFrame` ali preprosta funkcija za omejevanje (throttle/debounce), da omejite, kako pogosto se vaša logika izvaja, s čimer prihranite cikle procesorja in baterijo.

Združljivost med brskalniki in napravami

Splet je raznolik in prav tako so naprave, ki do njega dostopajo. Kot smo videli pri modelu dovoljenj za iOS, se implementacije razlikujejo. Vedno kodirajte obrambno:

• Zaznajte vse funkcionalnosti: Preverite za `DeviceMotionEvent` in `DeviceMotionEvent.requestPermission`.
• Preverite za ničelne podatke: Vse naprave nimajo žiroskopa. Objekt `rotationRate` je lahko `null`. Vaša koda bi morala to obvladati elegantno.
• Zagotovite nadomestne možnosti: Kaj se zgodi, če uporabnik zavrne dovoljenje ali njegova naprava nima senzorjev? Ponudite alternativno shemo nadzora, kot je vlečenje z dotikom za premikanje 360° pogleda. To zagotavlja, da je vaša aplikacija dostopna in uporabna za širše globalno občinstvo.

Glajenje podatkov in zmanjšanje šuma

Surovi podatki senzorjev so lahko »nemirni« ali »šumni«, kar vodi v tresočo uporabniško izkušnjo. Za gladke animacije ali kontrole morate te podatke pogosto zgladiti. Preprosta tehnika je uporaba nizkopasovnega filtra ali drsečega povprečja.

Tukaj je preprosta implementacija nizkopasovnega filtra:

            let smoothedX = 0, smoothedY = 0;
const filterFactor = 0.1; // Value between 0 and 1. Lower is smoother but has more lag.

function handleSmoothedMotion(event) {
  const { x, y } = event.accelerationIncludingGravity;

  smoothedX = (x * filterFactor) + (smoothedX * (1.0 - filterFactor));
  smoothedY = (y * filterFactor) + (smoothedY * (1.0 - filterFactor));

  // Use smoothedX and smoothedY in your application logic
}

            

              
                Copy
              
            
          

Varnost in zasebnost: Pristop, osredotočen na uporabnika

Podatki o gibanju so občutljivi. Potencialno bi jih lahko uporabili za sklepanje o dejavnostih uporabnika, kontekstu lokacije in celo o pritiskih na tipke na bližnji tipkovnici (prek analize vibracij). Kot razvijalec imate odgovornost, da ste pregledni.

• Bodite jasni, zakaj potrebujete dovoljenje: Ne prikažite samo splošnega gumba »Dovoli dostop«. Vključite besedilo, ki pojasnjuje korist za uporabnika, na primer: »Omogočite nadzor gibanja za bolj poglobljeno izkušnjo.«
• Zahtevajte dovoljenje ob pravem času: Prosite za dovoljenje šele, ko se uporabnik namerava ukvarjati s funkcijo, ki ga zahteva, ne ob nalaganju strani. Ta kontekstualna zahteva poveča verjetnost sprejetja.

Prihodnost: Fuzija senzorjev in splošni API za senzorje (Generic Sensor API)

API Device Motion je dobro podprt in zmogljiv, vendar je del razvijajoče se zgodbe. Prihodnost dostopa do senzorjev na spletu se usmerja k splošnemu API-ju za senzorje (Generic Sensor API). To je novejša specifikacija, zasnovana za zagotavljanje bolj doslednega, varnega in razširljivega načina dostopa do senzorjev naprave.

Splošni API za senzorje ponuja več prednosti:

• Sodoben API, ki temelji na obljubah (promise-based): Lažje je delati z asinhronimi operacijami.
• Izrecno dovoljenje za posamezen senzor: Ima bolj podroben in jasen varnostni model.
• Razširljivost: Zasnovan je za podporo širokemu naboru senzorjev onkraj gibanja, vključno s senzorji za ambientalno svetlobo, bližino in več.

Tukaj je hiter pogled na njegovo sintakso za primerjavo:

            // Generic Sensor API example
const accelerometer = new Accelerometer({ frequency: 60 });

accelerometer.addEventListener('reading', () => {
  console.log(`Acceleration along the X-axis: ${accelerometer.x}`);
  console.log(`Acceleration along the Y-axis: ${accelerometer.y}`);
  console.log(`Acceleration along the Z-axis: ${accelerometer.z}`);
});

accelerometer.addEventListener('error', event => {
  console.log(event.error.name, event.error.message);
});

accelerometer.start();
            

              
                Copy
              
            
          

Čeprav podpora brskalnikov za splošni API za senzorje še vedno raste, je to jasen naslednik. Zaenkrat dogodek `devicemotion` ostaja najbolj zanesljiva in široko podprta metoda za dostop do podatkov merilnika pospeška in žiroskopa. Razvijalci bi morali spremljati sprejemanje splošnega API-ja za senzorje za prihodnje projekte.

Zaključek

API Device Motion je prehod do ustvarjanja spletnih izkušenj, ki so bolj intuitivne, privlačne in povezane s fizičnim svetom uporabnika. Z izkoriščanjem merilnika pospeška in žiroskopa lahko oblikujemo interakcije, ki presegajo tradicionalno »pokaži in klikni«, kar odpira možnosti za igre, pripomočke in poglobljeno pripovedovanje zgodb.

Kot smo videli, uspešna implementacija tega API-ja zahteva več kot le dodajanje poslušalca dogodkov. Zahteva premišljen, na uporabnika osredotočen pristop, ki daje prednost varnosti, zmogljivosti in združljivosti med platformami. S spoštovanjem zasebnosti uporabnika z jasnimi zahtevami za dovoljenja, zagotavljanjem gladke izkušnje s filtriranjem podatkov in nudenjem nadomestnih možnosti za vse uporabnike, lahko zgradite resnično globalne spletne aplikacije, ki delujejo hkrati čarobno in zanesljivo. Zdaj je čas, da začnete eksperimentirati in vidite, kaj lahko zgradite, da premostite vrzel med digitalnim in fizičnim svetom.