Я пытаюсь создать приложение, которое будет отображать значения гироскопа с использованием JavaScript.Код, который я использую, прилагается ниже.Проблема с моим кодом в том, что вывод меняется так быстро.Есть ли какой-либо фильтр в javascript, чтобы фильтровать шум и делать эти значения гладкими и не менять так быстро.
import React from 'react';
import { Gyroscope } from 'expo-sensors';
import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
export default class GyroscopeSensor extends React.Component {
state = {
gyroscopeData: {},
};
componentDidMount() {
this.available();
this._toggle();
}
componentWillUnmount() {
this._unsubscribe();
}
_toggle = () => {
if (this._subscription) {
this._unsubscribe();
} else {
this._subscribe();
}
};
_slow = () => {
Gyroscope.setUpdateInterval(2000);
};
_fast = () => {
Gyroscope.setUpdateInterval(16);
};
_subscribe = () => {
this._subscription = Gyroscope.addListener(result => {
this.setState({ gyroscopeData: result });
});
};
_unsubscribe = () => {
this._subscription && this._subscription.remove();
this._subscription = null;
};
available=async()=>{
check=await Gyroscope.isAvailableAsync()
console.log(check)
}
render() {
let { x, y, z } = this.state.gyroscopeData;
return (
<View style={styles.sensor}>
<Text>Gyroscope:</Text>
<Text>
x: {round(x)} y: {round(y)} z: {round(z)}
</Text>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={this._toggle} style={styles.button}>
<Text>Toggle</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._slow} style={[styles.button, styles.middleButton]}>
<Text>Slow</Text>
</TouchableOpacity>
<TouchableOpacity onPress={this._fast} style={styles.button}>
<Text>Fast</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
function round(n) {
if (!n) {
return 0;
}
return Math.floor(n * 100) / 100;
}
const styles = StyleSheet.create({
container: {
flex: 1,
},
buttonContainer: {
flexDirection: 'row',
alignItems: 'stretch',
marginTop: 15,
},
button: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#eee',
padding: 10,
},
middleButton: {
borderLeftWidth: 1,
borderRightWidth: 1,
borderColor: '#ccc',
},
sensor: {
marginTop: 30,
paddingHorizontal: 10,
},
});