Arduino-ステップモーターコントローラーを使用したWeb経由の描画

このプロジェクトについて

デモンストレーション

Arduinoを初めて使用する場合は、次の手順から始めることができます：

• 初心者向けのArduinoチュートリアル。
• Arduinoのモーターに関するすべて

仕組み

ウェブページの描画領域に指が触れると、タッチポイントのXY座標がArduinoに送信されます。座標をスケーリングした後、Arduinoは2つのステップモーターを動かして、ペンをその座標に配置します。移動期間中、Arduinoはペンの軌跡をWebアプリに継続的に送信し、Webアプリはキャンバス上に軌跡を描画します。

ソースコード

ソースコードには、ArduinoコードとWebユーザーインターフェイスコードの2つの部分が含まれています。

Arduinoコード

これはarduinoコードであり、次のように無限ループで実行されます。

• Webページからコマンドを受信し、コマンドに従ってタスクを実行します。
• CMD_MOVE：2ステップモーターを制御してペンを所定の位置に移動します
• CMD_PEN_UP：サーボモーターの角度を変えてペンを上げます
• CMD_PEN_DOWN：サーボモーターの角度を変えてペンを下げます
• ペンの現在の位置を継続的に読み取り、Webページに送信します

Webユーザーインターフェース

コードセクションのコードを参照してください

• ユーザーインターフェースの提供
• ユーザーイベントを処理し、コマンドを調整してArduinoに送信します
• Arduinoから軌道を受け取り、それをWebページに描画します

remote_draw.phpは、Webユーザーインターフェイスを含むファイルです。 PHPoC [WiFi]シールドに保存する必要があります。ファイルをPHPoC [WiFi] Shieldにアップロードするには、次の手順を実行してください。

• 以下のコードをコピーして、remote_draw.phpファイルに保存します。
• PHPoCデバッガーのインストール
• この手順に従って、マイクロUSBケーブルを介してPHPoCをPHPoC [WiFi]シールドに接続します。Arduinoに電源を供給する必要があることに注意してください。
• この手順に従って、remote_draw.phpファイルをPHPoC [WiFi] Shieldにアップロードします

方法

• PHPoCシールドまたはPHPoCWiFiシールドの構成ネットワーク情報
• PHPoCライブラリをインストールする
• PHPoC拡張ライブラリをインストールする
• コードをコンパイルしてArduinoにアップロードする
• WebユーザーインターフェイスをPHPoC [WiFi]シールドにアップロードする
• シリアルモニターを開き、PHPoCシールドのIPアドレスをコピーします
• Webブラウザを介してWebユーザーインターフェイスにアクセスする：http：// ip_address_of_shield /remote_draw.php
• Web経由で描画

電子部品を購入するには、utsource.netから注文できます

初心者のための最高のArduinoスターターキット

初心者向けの最高のArduinoキットをご覧ください

関数リファレンス

• Serial.begin（）
• Serial.println（）
• delay（）
• millis（）
• forループ
• whileループ
• その他の場合
• loop（）
• setup（）
• String.toInt（）
• String.substring（）
• String.indexOf（）
• String.remove（）
• String.equals（）

コード

• Arduinoコード
• Webユーザーインターフェイス

Arduinoコード Arduino

 #include  #include  #include  #define MAX_X 55550 //ユニットはstep＃define MAX_Y 68780 //ユニットはstep＃define TOUCH_OFFSET 5000 //ユニットはstep＃define PEN_STATE_UP 0＃define PEN_STATE_DOWN 1＃define CMD_PEN_UP 0＃define CMD_PEN_DOWN 1＃define CMD_MOVE 2＃define STEP_MODE 32＃define SPEED_X_COEF（（long）40 * STEP_MODE）#define SPEED_Y_COEF（（long）40 （（long）1500 * STEP_MODE）#define SPEED_Y_MAX（（long）1500 * STEP_MODE）#define ACCEL_X_MAX（（long）6000 * STEP_MODE）#define ACCEL_Y_MAX（（long）6000 * STEP_MODE）#define STEP_STATE_STOP 0＃define STEP_STATE_LOCK 1＃ define RESOLUTION 500＃define MIN_UPDATE_INTERVAL 100 //ミリ秒単位PhpocServerserver（80）; ExpansionStepper stepX（14）; ExpansionStepper stepY（13）;サーボサーボ; longpreX =0; long preY =0; byte penState =PEN_STATE_UP; bool isUnlockedX =false; bool isUnlockedY =false; int forwardDirX =-1; / *インストールに応じて、モーターXが前方に移動するときのXYプロッターの方向。値を決定するためにテストする必要があります* / int forwardDirY =+1; / *インストールに応じて、モーターYが上に移動するときのXYプロッターの方向。値を決定するためにテストする必要があります* / unsigned long lastUpdateMillis; void penUp（）{servo.write（110）; penState =PEN_STATE_UP;} void penDown（）{servo.write（180）; penState =PEN_STATE_DOWN;} void xyWait（）{while（stepX.getState（）> 1 || stepY.getState（）> 1）;} void xyInit（）{penUp（）; stepX.setMode（STEP_MODE）; stepX.setVrefStop（4）; stepX.setVrefDrive（15）; stepX.setResonance（120、250）; stepX.setSpeed（20000）; stepX.setAccel（50000）; stepY.setMode（STEP_MODE）; stepY.setVrefStop（4）; stepY.setVrefDrive（15）; stepY.setResonance（120、250）; stepY.setSpeed（20000）; stepY.setAccel（50000）; //ペンを（0、0）に移動しますstepX.stepGotoSW（0、-forwardDirX）; stepY.stepGotoSW（0、-forwardDirY）; xyWait（）; stepX.setPosition（0）; stepY.setPosition（0）; //最初の実行でこのブロックのコメントを解除し、IDEコンソールの値に従ってこのファイルの6、7行目およびindex.phpの33行目の値を変更します/ * //最大ステップ数を確認しますstepX.stepGotoSW（1、forwardDirX）; stepY.stepGotoSW（1、forwardDirY）; xyWait（）; // index.phpの45行目でこれらの値を変更しますSerial.print（F（ "MAX_X："））; Serial.println（stepX.getPosition（）* forwardDirX）; Serial.print（F（ "MAX_Y："））; Serial.println（stepY.getPosition（）* forwardDirY）; * / xyGoto（TOUCH_OFFSET、TOUCH_OFFSET）; xyWait（）; stepX.setEioMode（0、EIO_MODE_LOCK）; stepX.setEioMode（1、EIO_MODE_LOCK）; stepY.setEioMode（0、EIO_MODE_LOCK）; stepY.setEioMode（1、EIO_MODE_LOCK）;} void xyGoto（long x、long y）{if（x （MAX_X-TOUCH_OFFSET））x =MAX_X-TOUCH_OFFSET; if（y （MAX_Y-TOUCH_OFFSET））y =MAX_Y-TOUCH_OFFSET; x * =forwardDirX; y * =forwardDirY; int32_t deltaX =x --stepX.getPosition（）; int32_t deltaY =y --stepY.getPosition（）; deltaX =abs（deltaX）; deltaY =abs（deltaY）; long speedX =SPEED_X_COEF * abs（deltaX）; long speedY =SPEED_Y_COEF * abs（deltaY）; if（speedX> speedY）{if（speedX> SPEED_X_MAX）speedX =SPEED_X_MAX;ダブルレシオ=deltaY /（double）deltaX; speedY =（long）（ratio * speedX）; } else {if（speedY> SPEED_Y_MAX）speedY =SPEED_Y_MAX;ダブルレシオ=deltaX /（double）deltaY; speedX =（long）（ratio * speedY）; } long accelX;長い加速; if（speedX  MIN_UPDATE_INTERVAL）isUpdate =true; long curX =stepX.getPosition（）; long curY =stepY.getPosition（）; long deltaX =curX-preX; long deltaY =curY-preY; long dist =sqrt（pow（deltaX、2）+ pow（deltaY、2））; if（dist> RESOLUTION）isUpdate =true; if（isUpdate ==false || dist ==0）falseを返します; lastUpdateMillis =curMillis; preX =curX; preY =curY; sendPositionToWeb（）; //現在の位置を送信してWebに表示します} void sendPositionToWeb（）{char wbuf [20]; long x =stepX.getPosition（）* forwardDirX; long y =stepY.getPosition（）* forwardDirY;文字列データ=String（F（ "["））+ x + String（F（ "、"））+ y + String（F（ "、"））+ penState + String（F（ "] \ n"））; data.toCharArray（wbuf、data.length（）+ 1）; server.write（wbuf、data.length（））;} void setup（）{Serial.begin（9600）; while（！Serial）; Phpoc.begin（PF_LOG_SPI | PF_LOG_NET）; server.beginWebSocket（ "xy_plotter"）; Serial.print（ "WebSocketサーバーアドレス："）; Serial.println（Phpoc.localIP（））; Expansion.begin（460800）; Servo.attach（8）; / **注：最初の実行の場合：* --xyInit（）の最後のブロックのコメントを解除します* --Arduinoコードを実行します* -IDEの値に従って、このファイルの6、7行目およびindex.phpの33行目の値を変更しますコンソール。 ** / xyInit（）; lastUpdateMillis =millis（）;} void loop（）{//新しいクライアントを待つ：PhpocClient client =server.available（）; if（client）{String data =client.readLine（）; if（data）{// Serial.println（data）;バイトseparatorPos1 =data.indexOf（ '：'）;バイトseparatorPos2 =data.lastIndexOf（ '：'）;バイトcmd =data.substring（0、separatorPos1）.toInt（）; long x =data.substring（separatorPos1 + 1、separatorPos2）.toInt（）; long y =data.substring（separatorPos2 + 1）.toInt（）; switch（cmd）{case CMD_PEN_DOWN：xyGoto（x、y）; // xyWait（）; while（stepX.getState（）> 1 || stepY.getState（）> 1）xyCheckUpdateToWeb（）; penDown（）;壊す;ケースCMD_PEN_UP：// xyWait（）; while（stepX.getState（）> 1 || stepY.getState（）> 1）xyCheckUpdateToWeb（）; penUp（）;壊す;ケースCMD_MOVE：xyGoto（x、y）;壊す; }}} xyCheckUpdateToWeb（）;} 

Webユーザーインターフェイス PHP

 <！DOCTYPE html>         
 
       
 

 WebSocket： null  
 接続 クリア