ionic react mobile app self balancing robot Download - ionic react mobile app self balancing robot Source Code

ionic react mobile app self balancing robot

Autre code source

1.0.0

Télécharger

ionic-react-mobile-app-self-balancing-robot

Il s'agit d'un projet dans lequel nous avons construit une application mobile pour contrôler un robot d'auto-équilibrage personnalisé via une interface Bluetooth HC-08. Le projet permet d'envoyer des commandes au micro contrôleur Arduino pour effectuer des tâches telles que:

Mouvement dans les 4 directions: en avant, en arrière, à droite et à gauche à travers une interface de joystick.
Amener toutes les mesures des capteurs du robot pour représenter l'état du robot dans les tables et les graphiques.
Changez les constantes de contrôleurs PID et les vitesses maximales des robots.
Dessinez la carte du robot dans une toile compte tenu des mesures.

Pile sélectionnée

Le framework sélectionné était Ionic Framework, il s'agit d'un très bel outil puissant pour créer des applications mobiles Android et iOS utilisant JavaScript, HTML et CSS. Mais pour ce particulier, j'ai sélectionné ReactJS en tant que bibliothèque JavaScript avec un modèle TypeScript. Pour la gestion de l'État, le redux avec le bouchage de React a été sélectionné.

Modèles d'État et architecture

 ////////////////////////// INTERFACES ////////////////////////
export interface IRobotState {
  linearVelocity : number ;
  angularVelocity : number ;
  incliAngle : number ;
  posX : number ;
  posY : number ;
  robotOrien : number ;
  battery ?: number ;
  startSampling ?: boolean ;
  sampleTime ?: number ;
  persistData ?: boolean ;
  records ?: Array < {
    linearVelocity : number ;
    angularVelocity : number ;
    incliAngle : number ;
    posX : number ;
    posY : number ;
    robotOrien : number ;
    battery : number ;
  } > ;
}
/////////////////////////////////////////////////////////////////

////////////////////////TYPES////////////////////////////////

export const SET_ROBOT_DYNAMIC_STATE = 'SET_ROBOT_DYNAMIC_STATE' ;
export const RESET_ROBOT_DYNAMIC_STATE = 'RESET_ROBOT_DYNAMIC_STATE' ;
export const PERSIST_ROBOT_DYNAMIC_STATE = 'PERSIST_ROBOT_DYNAMIC_STATE' ;

///////////////////////////////////////////////////////////

const initialState : IRobotState = {
  linearVelocity : 0.0 ,
  angularVelocity : 0.0 ,
  incliAngle : 0.0 ,
  posX : 0 ,
  posY : 0 ,
  robotOrien : 0.0 ,
  battery : 50 ,
  startSampling : false ,
  sampleTime : 150 ,
  persistData : false ,
  records : [ ] ,
} ;

Compositions des onglets d'interface utilisateur

L'application est composée par des onglets et plusieurs composants pour rendre les différentes UIS.

Conducteur
Automatique
Ajuster les contrôleurs
Métrique

Travailler avec ce projet

Pour collaborer ou simplement utiliser ce projet, vous devez avoir l'environnement Android prêt.

1. Télécharger et installer Android Studio et installer le SDK

[https://developer.android.com/studio]

2. Configurez la variable d'environnement Android_SDK_ROOT

Si vous êtes un utilisateur Linux, vous exécutez simplement ceci ou l'ajoutez au fichier de configuration spécifique à la cote. Exemple: bash_profile, bashrc etc.

 export ANDROID_SDK_ROOT= $HOME /Library/Android/sdk
export PATH= $PATH : $ANDROID_SDK_ROOT /emulator
export PATH= $PATH : $ANDROID_SDK_ROOT /platform-tools