ionic react mobile app self balancing robot

イオン反応 - モバイル - アプリ - 自己バランス - ロボット

これは、Bluetooth HC-08インターフェイスを介してカスタム自己バランスロボットを制御するためのモバイルアプリケーションを構築するプロジェクトです。このプロジェクトでは、次のようなタスクを実行するために、Arduinoマイクロコントローラーにコマンドを送信できます。

1. 4つの方向の動き：ジョイスティックインターフェイスを通して前方、後方、右、左。
2. テーブルとグラフのロボットステータスを表すために、ロボットセンサーからすべての測定値を取得します。
3. PIDコントローラーの定数を変更し、最大ロボット速度を速度速度で変更します。
4. 測定値を考慮して、ロボットのマップをキャンバスに描画します。

選択したスタック

選択されたフレームワークはIonicフレームワークでした。これは、JavaScript、HTML、およびCSSを使用してAndroidおよびiOSモバイルアプリを構築するための非常に優れた強力なツールです。しかし、この特定のために、私はtypeScriptテンプレートを備えたJavaScriptライブラリとしてReactJを選択しました。国家管理のために、Reactのプラグを伴うReduxが選択されました。

状態モデルとアーキテクチャ

 ////////////////////////// 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 : [ ] ,
} ; 

UIタブの構成

このアプリは、異なるUIをレンダリングするためのタブといくつかのコンポーネントで構成されています。

1. ドライバ
2. 自動
3. コントローラーを調整します
4. メトリック

このプロジェクトで作業します

このプロジェクトを協力するか、単に使用するには、Android環境を準備する必要があります。

1.Android Studioをダウンロードしてインストールし、SDKをインストールします

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

2。Android_Sdk_Root環境変数を構成します

Linuxユーザーの場合は、これを実行するか、適切なシェル固有の構成ファイルに追加します。例：bash_profile、bashrcなど。

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

3. Android StudioのAVDマネージャーに行き、シミュレーターを作成します

4.ノードをインストールします

[https://nodejs.org/en/]

5.イオンCLIをインストールします

[https://ionicframework.com/docs/intro/cli]

リポジトリがダウンロードされたら、次のコマンドを実行します

npm install

ionic serve

これにより、Webブラウザでプロジェクトが実行されますが、ネイティブのプラグインは機能しません。

6. Androidプロジェクトを作成します

ionic cap add android

iOSプロジェクトを生成します

ionic cap add ios

Android AndroidのAndroid Studioを開き、シミュレータでアプリを実行します。

ライブ機能用およびシミュレーターに取り付けられたアプリケーションで直接作業することを実行します。

npm run dev

ロボットリポジトリを参照してください

[https://github.com/josealejandro2928/self-balancing-arduino-robot-controller]

アプリのデモ

プロジェクトのルートでは、アプリのデモ「.apk」があります

SB_Controller.apk

ビデオ