Inizia con l'Accelerometro

Questa guida ti guiderà attraverso l’integrazione del plugin Capacitor Accelerometer nella tua applicazione.

Installazione

Installa il plugin utilizzando npm:

npm install @capgo/capacitor-accelerometer
npx cap sync

Configurazione della Piattaforma

iOS

Nessuna configurazione aggiuntiva richiesta. L’accelerometro è sempre disponibile.

Android

Nessuna configurazione aggiuntiva richiesta. L’accelerometro è sempre disponibile.

Web

Il plugin utilizza l’API DeviceMotion. Richiede HTTPS in produzione.

Uso di Base

Importare il Plugin

import { Accelerometer } from '@capgo/capacitor-accelerometer';

Avviare il Monitoraggio

const startAccelerometer = async () => {
  await Accelerometer.start({
    interval: 100 // Intervallo di aggiornamento in millisecondi
  });

  console.log('Accelerometro avviato');
};

Ascoltare gli Eventi di Accelerazione

Accelerometer.addListener('accelerationChange', (data) => {
  console.log('X:', data.x);
  console.log('Y:', data.y);
  console.log('Z:', data.z);
  console.log('Timestamp:', data.timestamp);
});

Ottenere la Lettura Attuale

const getCurrentAcceleration = async () => {
  const reading = await Accelerometer.getCurrentAcceleration();
  console.log('Accelerazione attuale:', reading);
};

Interrompere il Monitoraggio

const stopAccelerometer = async () => {
  await Accelerometer.stop();
  console.log('Accelerometro interrotto');
};

Esempio Completo

Ecco un esempio completo con rilevamento delle scosse:

import { Accelerometer } from '@capgo/capacitor-accelerometer';

class AccelerometerService {
  private listener: any;
  private lastX = 0;
  private lastY = 0;
  private lastZ = 0;
  private shakeThreshold = 15;

  async initialize() {
    await Accelerometer.start({ interval: 100 });

    this.listener = Accelerometer.addListener('accelerationChange', (data) => {
      this.handleAcceleration(data);
    });
  }

  handleAcceleration(data: any) {
    // Calcola il delta
    const deltaX = Math.abs(data.x - this.lastX);
    const deltaY = Math.abs(data.y - this.lastY);
    const deltaZ = Math.abs(data.z - this.lastZ);

    // Controlla la scossa
    if (deltaX > this.shakeThreshold ||
        deltaY > this.shakeThreshold ||
        deltaZ > this.shakeThreshold) {
      this.onShake();
    }

    // Aggiorna gli ultimi valori
    this.lastX = data.x;
    this.lastY = data.y;
    this.lastZ = data.z;

    // Aggiorna l'interfaccia utente
    this.updateDisplay(data);
  }

  onShake() {
    console.log('Dispositivo scosso!');
    // Attiva l'azione di scossa
  }

  updateDisplay(data: any) {
    console.log(`X: ${data.x.toFixed(2)} m/s²`);
    console.log(`Y: ${data.y.toFixed(2)} m/s²`);
    console.log(`Z: ${data.z.toFixed(2)} m/s²`);

    // Calcola la magnitudine
    const magnitude = Math.sqrt(
      data.x * data.x +
      data.y * data.y +
      data.z * data.z
    );
    console.log(`Magnitudine: ${magnitude.toFixed(2)} m/s²`);
  }

  async cleanup() {
    if (this.listener) {
      this.listener.remove();
    }
    await Accelerometer.stop();
  }
}

// Utilizzo
const accelService = new AccelerometerService();
accelService.initialize();

// Pulizia al termine
// accelService.cleanup();

Comprensione delle Letture

Assi di Accelerazione

• Asse X: Sinistra (-) a Destra (+)
• Asse Y: Basso (-) ad Alto (+)
• Asse Z: Dietro (-) a Davanti (+)

Gravità

• Il dispositivo a riposo mostra ~9,8 m/s² su un asse (gravità)
• Il movimento del dispositivo mostra accelerazione oltre alla gravità

Unità

• Misurato in metri al secondo al quadrato (m/s²)
• Gravità = 9,8 m/s²

Casi d’Uso Comuni

Rilevamento delle Scosse

class ShakeDetector {
  private lastUpdate = 0;
  private lastX = 0;
  private lastY = 0;
  private lastZ = 0;

  detectShake(x: number, y: number, z: number): boolean {
    const currentTime = Date.now();

    if (currentTime - this.lastUpdate > 100) {
      const deltaX = Math.abs(x - this.lastX);
      const deltaY = Math.abs(y - this.lastY);
      const deltaZ = Math.abs(z - this.lastZ);

      this.lastUpdate = currentTime;
      this.lastX = x;
      this.lastY = y;
      this.lastZ = z;

      return deltaX + deltaY + deltaZ > 15;
    }

    return false;
  }
}

Rilevamento dell’Inclinazione

class TiltDetector {
  getTiltAngles(x: number, y: number, z: number) {
    const roll = Math.atan2(y, z) * (180 / Math.PI);
    const pitch = Math.atan2(-x, Math.sqrt(y * y + z * z)) * (180 / Math.PI);

    return { roll, pitch };
  }

  isDeviceFlat(z: number): boolean {
    return Math.abs(z - 9.8) < 1.0;
  }

  isDeviceUpright(y: number): boolean {
    return Math.abs(y - 9.8) < 2.0;
  }
}

Contapassi

class StepCounter {
  private steps = 0;
  private lastMagnitude = 0;
  private threshold = 11;

  processAcceleration(x: number, y: number, z: number) {
    const magnitude = Math.sqrt(x * x + y * y + z * z);

    if (magnitude > this.threshold &&
        this.lastMagnitude < this.threshold) {
      this.steps++;
      console.log('Passi:', this.steps);
    }

    this.lastMagnitude = magnitude;
  }
}

Migliori Pratiche

1. Scegli Intervalli Appropriati: Equilibra la reattività e la durata della batteria

   • Gaming: 16-50ms
   • Fitness: 100-200ms
   • Generale: 200-500ms

2. Rimuovi i Listener: Pulisci sempre quando hai finito

3. Filtra il Rumore: Usa medie mobili per dati più fluidi

4. Considera la Batteria: Il polling ad alta frequenza scarica la batteria

5. Testa su Dispositivi Reali: I simulatori non forniscono dati accurati

Suggerimenti per le Prestazioni

Debouncing

class AccelerometerDebouncer {
  private timeout: any;

  debounce(callback: Function, delay: number) {
    return (...args: any[]) => {
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => callback(...args), delay);
    };
  }
}

Smoothing dei Dati

class AccelerometerFilter {
  private alpha = 0.8;
  private filteredX = 0;
  private filteredY = 0;
  private filteredZ = 0;

  filter(x: number, y: number, z: number) {
    this.filteredX = this.alpha * x + (1 - this.alpha) * this.filteredX;
    this.filteredY = this.alpha * y + (1 - this.alpha) * this.filteredY;
    this.filteredZ = this.alpha * z + (1 - this.alpha) * this.filteredZ;

    return {
      x: this.filteredX,
      y: this.filteredY,
      z: this.filteredZ
    };
  }
}

Prossimi Passi

• Esplora il Riferimento API per la documentazione completa dei metodi
• Dai un’occhiata all’app di esempio per l’uso avanzato
• Vedi il tutorial per esempi di implementazione completa