Füüsilise maailma avamine: Sügav sissevaade Device Motion API-sse

Pidevalt arenevas veebiarenduse maastikul muutub piir natiivsete ja veebirakenduste vahel järjest hägusemaks. Kaasaegsed veebilehitsejad ei ole enam pelgalt staatiliste dokumentide vaaturid; need on võimsad platvormid, mis suudavad pakkuda rikkalikke, interaktiivseid ja kaasahaaravaid kogemusi. Üks põnevamaid piire selles arengus on veebi võime suhelda füüsilise maailmaga. Alates mobiilimängudest, mis reageerivad igale teie kallutusele ja raputusele, kuni liitreaalsuse vaaturiteni, mis katavad digitaalse teabe teie ümbrusele – neid kogemusi toidab võimsate brauseri API-de komplekt. Selle võimekuse keskmes on Device Motion API.

See põhjalik juhend on mõeldud veebiarendajate globaalsele publikule. Uurime Device Motion API-t, keskendudes konkreetselt sellele, kuidas pääseda ligi ja tõlgendada andmeid kahest fundamentaalsest andurist, mis leiduvad enamikus kaasaegsetes seadmetes: kiirendusmõõtur ja güroskoop. Olenemata sellest, kas loote progressiivset veebirakendust (PWA), brauserisisest mängu või unikaalset tööriista, avab selle API mõistmine teie kasutajatele uue interaktiivsuse mõõtme, olenemata nende asukohast maailmas.

Põhimõistete mõistmine: Liikumine vs. Orientatsioon

Enne koodi süvenemist on oluline eristada kahte seotud, kuid erinevat mõistet: seadme liikumine ja seadme orientatsioon. Brauser pakub nende jaoks eraldi sündmusi:

• Seadme liikumine (`devicemotion` sündmus): See sündmus annab teavet seadme kiirenduse ja selle pöörlemiskiiruse kohta. See ütleb teile, kuidas seade liigub. See on meie peamine fookus selles artiklis.
• Seadme orientatsioon (`deviceorientation` sündmus): See sündmus annab teavet seadme füüsilise orientatsiooni kohta 3D-ruumis. See ütleb teile, kuhu seade osutab, tavaliselt nurkade seeriana võrreldes Maa fikseeritud koordinaatsüsteemiga.

Mõelge sellest nii: `devicemotion` räägib teile teekonnast (liikumisjõududest), samas kui `deviceorientation` räägib teile sihtkohast (lõppasendist). Kuigi neid kasutatakse sageli koos, on nende eraldi mõistmine nende võimekuse valdamise võti. Selles juhendis keskendume `devicemotion` sündmuse pakutavatele rikastele andmetele, mis pärinevad otse kiirendusmõõturist ja güroskoobist.

Ehituskivid: Kiirendusmõõturite ja güroskoopide selgitus

Device Motion API südames on kaks uskumatut mikro-elektromehaaniliste süsteemide (MEMS) riistvarakomponenti. Vaatame lähemalt, mida kumbki neist teeb.

Kiirendusmõõtur: Liikumise ja gravitatsiooni tajumine

Kiirendusmõõtur on andur, mis mõõdab omakiirendust. See ei ole ainult kiirendus, mida kogete telefoni kiiremini liigutades (nt seda raputades), vaid ka püsiv gravitatsioonist tingitud kiirendus. See on fundamentaalne kontseptsioon, mida mõista: seade, mis seisab täiesti paigal tasasel laual, kogeb endiselt gravitatsioonijõudu ja kiirendusmõõtur tuvastab selle kiirendusena ligikaudu 9,81 meetrit sekundis ruudus (m/s²).

Andmed esitatakse kolme telje lõikes, mis põhinevad World Wide Web Consortium (W3C) määratletud standardiseeritud koordinaatsüsteemil:

• x-telg: Kulgeb vasakult paremale üle ekraani.
• y-telg: Kulgeb alt üles üle ekraani.
• z-telg: Risti ekraaniga, osutades väljapoole kasutaja suunas.

`devicemotion` sündmus annab teile kaks peamist kiirendusega seotud omadust:

1. accelerationIncludingGravity: See objekt sisaldab anduri toorandmeid. See mõõdab seadme liikumise ja Maa gravitatsioonijõu kombineeritud jõude. Paljude rakenduste jaoks, nagu vesiloodi loomine või kalde tuvastamine, on see kõige usaldusväärsem omadus, kuna gravitatsioon pakub pidevat ja ennustatavat tugipunkti.
2. acceleration: See objekt esindab brauseri katset eraldada kasutaja algatatud liikumine, lahutades sellest gravitatsiooni mõju. Kuigi teoreetiliselt kasulik, võib selle saadavus ja täpsus eri seadmetes ja brauserites oluliselt erineda. Paljud seadmed kasutavad selle saavutamiseks kõrgpääsfiltrit, mis ei pruugi olla täiuslik. Seetõttu võib paljudel juhtudel toorandmetega `accelerationIncludingGravity` töötamine ja oma arvutuste tegemine anda järjepidevamaid tulemusi.

Güroskoop: Pöörlemise tajumine

Kui kiirendusmõõtur mõõdab lineaarset liikumist, siis güroskoop mõõdab nurkkiirust ehk pöörlemiskiirust. See ütleb teile, kui kiiresti seade pöörleb ümber kõigi kolme telje. See on hädavajalik rakenduste jaoks, mis peavad reageerima seadme keeramisele, pööramisele või panoraamimisele.

Güroskoobi andmed esitatakse `devicemotion` sündmuse rotationRate omaduses. See sisaldab kolme väärtust, mida mõõdetakse kraadides sekundis:

• alpha: Pöörlemiskiirus ümber z-telje (pöörlemine tasapinnal, nagu vinüülplaat plaadimängijal).
• beta: Pöörlemiskiirus ümber x-telje (kallutamine ette ja taha).
• gamma: Pöörlemiskiirus ümber y-telje (kallutamine küljelt küljele).

Integreerides need pöörlemiskiirused ajas, saate arvutada seadme orientatsiooni muutuse, mis on ideaalne näiteks 360-kraadiste fotovaaturite või lihtsate liikumisega juhitavate mängude loomiseks.

Alustamine: Device Motion API rakendamine

Nüüd, kui me teooriat mõistame, lähme praktika juurde. Device Motion API rakendamine hõlmab mõningaid kriitilisi samme, eriti arvestades kaasaegse veebi keskendumist turvalisusele ja kasutajate privaatsusele.

1. samm: Funktsionaalsuse tuvastamine

Esiteks ja kõige tähtsamana ei tohi kunagi eeldada, et kasutaja brauser või seade seda API-t toetab. Alustage alati funktsionaalsuse tuvastamisega. See on lihtne kontroll, et näha, kas `DeviceMotionEvent` objekt eksisteerib `window` objektil.

            if (window.DeviceMotionEvent) {
  console.log("Device Motion on toetatud");
} else {
  console.log("Device Motion ei ole selles seadmes toetatud.");
}
            

              
                Copy
              
            
          

See lihtne kaitseklausel väldib vigu ja võimaldab pakkuda varukogemust kasutajatele, kes kasutavad toetamata seadmeid, näiteks vanemaid lauaarvuti brausereid.

2. samm: Lubade küsimine – kaasaegne veebi turvamudel

See on vaieldamatult kõige kriitilisem ja sageli tähelepanuta jäetud samm tänapäeva arendajate jaoks. Privaatsus- ja turvalisuskaalutlustel nõuavad paljud kaasaegsed brauserid, eriti Safari iOS 13-s ja uuemates versioonides, selgesõnalist kasutaja luba liikumis- ja orientatsiooniandurite andmetele juurdepääsuks. Seda luba saab ainult vastusena otsesele kasutaja interaktsioonile, näiteks nupuvajutusele.

Sündmusekuulaja lisamise katse sellistes seadmetes ilma selle loata toob kaasa selle, et see ei käivitu kunagi. Õige lähenemine on pakkuda nuppu või juhtelementi, mille kasutaja peab funktsiooni lubamiseks aktiveerima.

Siin on parima praktika rakendus:

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

permissionButton.addEventListener('click', () => {
  // Kontrolli, kas loafunktsioon eksisteerib
  if (typeof DeviceMotionEvent.requestPermission === 'function') {
    // iOS 13+ seadmed
    DeviceMotionEvent.requestPermission()
      .then(permissionState => {
        if (permissionState === 'granted') {
          window.addEventListener('devicemotion', handleMotionEvent);
          // Peida nupp pärast loa andmist
          permissionButton.style.display = 'none';
        } else {
          // Halda loa keelamist
          alert('Liikumisanduritele juurdepääsu luba keelati.');
        }
      })
      .catch(console.error); // Halda võimalikke vigu
  } else {
    // Mitte-iOS 13+ seadmed
    window.addEventListener('devicemotion', handleMotionEvent);
    // Võid ka siin nupu peita, kuna seda pole vaja
    permissionButton.style.display = 'none';
  }
});

function handleMotionEvent(event) {
  // Andmete töötlemise loogika läheb siia...
  console.log(event);
}
            

              
                Copy
              
            
          

See koodilõik on robustne ja globaalselt ühilduv. Esmalt kontrollib see, kas `requestPermission` meetod on olemas. Kui see on olemas (mis viitab iOS 13+ keskkonnale), kutsub see selle välja. Meetod tagastab lubaduse (promise), mis laheneb loa olekuga. Kui olek on „granted“ (lubatud), siis lisame oma sündmusekuulaja. Kui `requestPermission` meetodit ei eksisteeri, võime eeldada, et oleme teisel platvormil (nagu Android koos Chrome'iga), kus luba on kas vaikimisi antud või käsitletakse seda erinevalt, ja me saame kuulaja otse lisada.

3. samm: Sündmusekuulaja lisamine ja haldamine

Kui luba on tagatud, lisate oma sündmusekuulaja `window` objektile. Tagasikutsumisfunktsioon (callback) saab argumendina `DeviceMotionEvent` objekti iga kord, kui anduri andmeid uuendatakse, mis on tavaliselt umbes 60 korda sekundis (60Hz).

Ehitame nüüd `handleMotionEvent` funktsiooni andmete parsimiseks:

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

  // Demonstratsiooniks kuvame andmed
  const dataContainer = document.getElementById('data-container');

  dataContainer.innerHTML = `
    <h3>Kiirendus (ilma gravitatsioonita)</h3>
    <p>X: ${acceleration.x ? acceleration.x.toFixed(3) : 'Puudub'}</p>
    <p>Y: ${acceleration.y ? acceleration.y.toFixed(3) : 'Puudub'}</p>
    <p>Z: ${acceleration.z ? acceleration.z.toFixed(3) : 'Puudub'}</p>

    <h3>Kiirendus (koos gravitatsiooniga)</h3>
    <p>X: ${gravity.x ? gravity.x.toFixed(3) : 'Puudub'}</p>
    <p>Y: ${gravity.y ? gravity.y.toFixed(3) : 'Puudub'}</p>
    <p>Z: ${gravity.z ? gravity.z.toFixed(3) : 'Puudub'}</p>

    <h3>Pöörlemiskiirus</h3>
    <p>Alpha (z): ${rotation.alpha ? rotation.alpha.toFixed(3) : 'Puudub'}</p>
    <p>Beta (x): ${rotation.beta ? rotation.beta.toFixed(3) : 'Puudub'}</p>
    <p>Gamma (y): ${rotation.gamma ? rotation.gamma.toFixed(3) : 'Puudub'}</p>

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

              
                Copy
              
            
          

See haldurifunktsioon võtab sündmuse objektist asjakohased omadused ja kuvab need. Pange tähele `null` või `undefined` väärtuste kontrollimist, kuna kõigi omaduste olemasolu igas seadmes ei ole tagatud. Näiteks seade ilma güroskoobita teatab `null` väärtuse `event.rotationRate` jaoks.

Praktilised rakendused ja koodinäited

Teooria on suurepärane, kuid Device Motion API tegelik jõud avaldub praktilistes rakendustes. Uurime mõnda näidet, millele saate tugineda.

Näide 1: „Raputuse detektor“ – universaalne žest

Raputuse tuvastamine on levinud interaktsioonimuster, mida kasutatakse rakendustes üle maailma toimingute käivitamiseks, nagu „võta tagasi“, esitusloendi segamine või vormi tühjendamine. Saame selle saavutada, jälgides kiirenduses äkilisi, suure magnituudiga muutusi.

            let lastX, lastY, lastZ;
let moveCounter = 0;
const shakeThreshold = 15; // Katsetage selle väärtusega

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) { // Käivita pärast mõnda kiiret liigutust
      console.log('Raputus tuvastatud!');
      // Käivita oma tegevus siin, nt shufflePlaylist();
      moveCounter = 0; // Lähtesta loendur, et vältida mitmekordset käivitamist
    }
  }

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

// Lisa 'handleShake' oma sündmusekuulaja tagasikutsumisfunktsiooniks
            

              
                Copy
              
            
          

See kood salvestab viimased teadaolevad kiirendusväärtused ja võrdleb neid praegustega. Kui muutuste summa kõigil kolmel teljel ületab määratletud läve mitme järjestikuse sündmuse jooksul, registreerib see raputuse. See lihtne loogika on üllatavalt tõhus.

Näide 2: Lihtsa vesiloodi (mull-loodi) loomine

Saame kasutada pidevat gravitatsioonijõudu digitaalse vesiloodi ehitamiseks. Kui seade on täiesti tasane, on gravitatsioonijõud (~-9,81 m/s²) täielikult z-teljel. Seadet kallutades jaotub see jõud x- ja y-teljele. Saame seda jaotust kasutada „mulli“ paigutamiseks ekraanile.

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

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

  // Seosta kiirenduse väärtused CSS transformiga
  // Piira väärtused mõistlikku vahemikku parema visuaalse efekti saavutamiseks
  const tiltX = Math.min(Math.max(y, -MAX_TILT), MAX_TILT) * -5; // Pööra ümber ja skaleeri
  const tiltY = Math.min(Math.max(x, -MAX_TILT), MAX_TILT) * 5;  // Skaleeri

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

// Lisa 'handleSpiritLevel' oma sündmusekuulaja tagasikutsumisfunktsiooniks
            

              
                Copy
              
            
          

Selles näites seostame gravitatsiooni `x` ja `y` komponendid mulli elemendi `translateX` ja `translateY` CSS-omadustega. Skaleerimistegurit (`* 5`) saab tundlikkuse reguleerimiseks kohandada. See demonstreerib `accelerationIncludingGravity` omaduse otsest ja võimsat kasutamist.

Näide 3: Güroskoobipõhine „ringivaatamise“ vaade (360° fotovaatur)

Kaasahaaravama kogemuse saamiseks saame kasutada güroskoobi `rotationRate` omadust, et luua „maagilise akna“ efekt, kus füüsilise seadme pööramine panoraamib vaadet, näiteks 360° fotot või 3D-stseeni.

            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; // Ajavahe sekundites
  lastTimestamp = event.timeStamp;

  const rotation = event.rotationRate;
  if (!rotation) return; // Güroskoobi andmed puuduvad

  // Integreeri pöörlemiskiirus ajas, et saada nurga muutus
  currentRotation.beta += rotation.beta * delta;
  currentRotation.gamma += rotation.gamma * delta;

  // Rakenda stseeni elemendile pööramine CSS transformi abil
  // Märkus: soovitud efekti saavutamiseks võib olla vaja telgi vahetada või ümber pöörata
  scene.style.transform = `rotateX(${-currentRotation.beta}deg) rotateY(${-currentRotation.gamma}deg)`;
}

// Lisa 'handleLookAround' oma sündmusekuulaja tagasikutsumisfunktsiooniks
            

              
                Copy
              
            
          

See näide on keerulisem. See integreerib nurkkiiruse (`rotationRate`) sündmuste vahelise aja intervalli jooksul, et arvutada nurga kogumuutus. Seda nurka kasutatakse seejärel CSS-i `rotateX` ja `rotateY` omaduste värskendamiseks. Selle lähenemisviisi peamine väljakutse on güroskoobi triiv, kus väikesed vead kogunevad aja jooksul, põhjustades vaate aeglast nihkumist. Täpsemate rakenduste jaoks korrigeeritakse seda sageli andurite ühendamise (sensor fusion) abil, kombineerides güroskoobi andmeid kiirendusmõõturi ja magnetomeetri andmetega (sageli `deviceorientation` sündmuse kaudu).

Olulised kaalutlused ja parimad praktikad globaalsele publikule

Device Motion API-ga ehitamine on võimas, kuid selle vastutustundlik tegemine on hädavajalik hea kasutajakogemuse loomiseks kõigile ja kõikjal.

Jõudlus ja aku kestvus

Liikumisandurid tarbivad energiat. `devicemotion` sündmuste pidev kuulamine, isegi kui teie rakendus on taustal, võib oluliselt tühjendada kasutaja akut. See on kriitiline kaalutlus kasutajatele piirkondades, kus pidev juurdepääs laadimisele võib olla vähem levinud.

• Kuulake ainult siis, kui see on vajalik: Lisage sündmusekuulaja, kui teie komponent on aktiivne ja nähtav.
• Koristage enda järelt: Eemaldage alati sündmusekuulaja, kui komponent hävitatakse või funktsiooni enam ei vajata. `window.removeEventListener('devicemotion', yourHandlerFunction);`
• Piirake oma haldurit: Kui te ei vaja 60 uuendust sekundis, saate kasutada tehnikaid nagu `requestAnimationFrame` või lihtsat piiramis-/viivitusfunktsiooni (throttle/debounce), et piirata, kui sageli teie loogika töötab, säästes protsessori tsükleid ja akut.

Veebilehitsejate ja seadmeteülene ühilduvus

Veeb on mitmekesine ja nii on ka seadmed, mis sellele ligi pääsevad. Nagu oleme näinud iOS-i lubade mudeli puhul, on rakendused erinevad. Koodige alati kaitsvalt:

• Tuvastage kõik funktsionaalsused: Kontrollige `DeviceMotionEvent` ja `DeviceMotionEvent.requestPermission` olemasolu.
• Kontrollige null-andmeid: Kõigil seadmetel ei ole güroskoopi. `rotationRate` objekt võib olla `null`. Teie kood peaks sellega sujuvalt toime tulema.
• Pakkuge varuvariante: Mis juhtub, kui kasutaja keeldub loast või tema seadmel puuduvad andurid? Pakkuge alternatiivset juhtimisskeemi, näiteks puutepõhist lohistamist 360° vaaturi jaoks. See tagab, et teie rakendus on kättesaadav ja kasutatav laiemale globaalsele publikule.

Andmete silumine ja müra vähendamine

Toorandurid võivad olla „närvilised“ või „mürarikkad“, mis toob kaasa ebastabiilse kasutajakogemuse. Sujuvate animatsioonide või juhtelementide jaoks peate sageli neid andmeid siluma. Lihtne tehnika on kasutada madalpääsfiltrit või liikuvat keskmist.

Siin on lihtne madalpääsfiltri rakendus:

            let smoothedX = 0, smoothedY = 0;
const filterFactor = 0.1; // Väärtus vahemikus 0 kuni 1. Madalam on sujuvam, kuid suurema viivitusega.

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

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

  // Kasutage silutudX ja silutudY oma rakenduse loogikas
}

            

              
                Copy
              
            
          

Turvalisus ja privaatsus: Kasutajakeskne lähenemine

Liikumisandmed on tundlikud. Neid saab potentsiaalselt kasutada kasutaja tegevuste, asukohakonteksti ja isegi lähedal asuva klaviatuuri klahvivajutuste järeldamiseks (vibratsioonianalüüsi kaudu). Arendajana on teil kohustus olla läbipaistev.

• Olge selge, miks te luba vajate: Ärge näidake lihtsalt üldist „Luba juurdepääs“ nuppu. Lisage tekst, mis selgitab kasutajale kasu, näiteks „Luba liikumisjuhtimine kaasahaaravama kogemuse saamiseks.“
• Küsige luba õigel ajal: Küsige luba ainult siis, kui kasutaja on valmis kasutama funktsiooni, mis seda nõuab, mitte lehe laadimisel. See kontekstipõhine küsimine suurendab nõustumise tõenäosust.

Tulevik: Andurite ühendamine ja Generic Sensor API

Device Motion API on hästi toetatud ja võimas, kuid see on osa arenevast loost. Anduritele juurdepääsu tulevik veebis liigub Generic Sensor API suunas. See on uuem spetsifikatsioon, mis on loodud pakkuma järjepidevamat, turvalisemat ja laiendatavamat viisi seadme anduritele juurdepääsuks.

Generic Sensor API pakub mitmeid eeliseid:

• Kaasaegne, lubadustepõhine (promise-based) API: See on lihtsam asünkroonsete toimingutega töötamiseks.
• Selgesõnaline, anduripõhine luba: Sellel on detailsem ja selgem turvamudel.
• Laiendatavus: See on loodud toetama laia valikut andureid peale liikumisandurite, sealhulgas ümbritseva valguse, läheduse ja palju muud.

Siin on kiire ülevaade selle süntaksist võrdluseks:

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

accelerometer.addEventListener('reading', () => {
  console.log(`Kiirendus piki X-telge: ${accelerometer.x}`);
  console.log(`Kiirendus piki Y-telge: ${accelerometer.y}`);
  console.log(`Kiirendus piki Z-telge: ${accelerometer.z}`);
});

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

accelerometer.start();
            

              
                Copy
              
            
          

Kuigi brauserite tugi Generic Sensor API-le alles kasvab, on see selge järeltulija. Praegu jääb `devicemotion` sündmus kõige usaldusväärsemaks ja laialdaselt toetatud meetodiks kiirendusmõõturi ja güroskoobi andmetele juurdepääsuks. Arendajad peaksid tulevaste projektide jaoks silma peal hoidma Generic Sensor API kasutuselevõtul.

Kokkuvõte

Device Motion API on värav veebikogemuste loomiseks, mis on intuitiivsemad, kaasahaaravamad ja ühendatud kasutaja füüsilise maailmaga. Kiirendusmõõturi ja güroskoobi kasutuselevõtuga saame kujundada interaktsioone, mis lähevad kaugemale traditsioonilisest osuta-ja-kliki meetodist, avades võimalusi mängudele, tööriistadele ja kaasahaaravale jutuvestmisele.

Nagu oleme näinud, nõuab selle API edukas rakendamine enamat kui lihtsalt sündmusekuulaja lisamist. See nõuab läbimõeldud, kasutajakeskset lähenemist, mis seab esikohale turvalisuse, jõudluse ja platvormideülese ühilduvuse. Austades kasutaja privaatsust selgete loataotlustega, tagades sujuva kogemuse andmete filtreerimise kaudu ja pakkudes varuvariante kõikidele kasutajatele, saate ehitada tõeliselt globaalseid veebirakendusi, mis tunduvad nii maagilised kui ka usaldusväärsed. Nüüd on aeg hakata katsetama ja vaatama, mida saate ehitada, et ületada lõhe digitaalse ja füüsilise maailma vahel.