Arduino - 스텝 모터 컨트롤러를 사용하여 웹을 통해 그리기

이 프로젝트 정보

데모

Arduino를 처음 사용하는 경우 다음으로 시작할 수 있습니다.

작동 원리

웹페이지의 그리기 영역에 손가락을 터치하면 터치한 지점의 XY 좌표가 아두이노로 전송됩니다. 좌표를 조정한 후 Arduino는 두 개의 스텝 모터를 이동하여 해당 좌표에 펜을 찾습니다. 이동하는 동안 Arduino는 지속적으로 펜의 궤적을 웹 앱으로 보내고 웹 앱은 캔버스에 궤적을 그립니다.

소스 코드

소스 코드는 Arduino 코드와 웹 사용자 인터페이스 코드의 두 부분으로 구성됩니다.

Arduino 코드

이것은 무한 루프에서 실행되는 arduino 코드입니다:

웹 사용자 인터페이스

코드 섹션에서 코드 참조

remote_draw.php는 웹 사용자 인터페이스가 포함된 파일입니다. PHPoC [WiFi] Shield에 저장해야 합니다. 파일을 PHPoC [WiFi] Shield에 업로드하려면 다음 단계를 따르세요.

방법

전자 부품을 구입하려면 utsource.net에서 주문할 수 있습니다.

초보자를 위한 최고의 Arduino 스타터 키트

초보자를 위한 최고의 Arduino 키트 보기

함수 참조

코드

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_YMODE_ ((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_STOP define RESOLUTION 500#define MIN_UPDATE_INTERVAL 100 // 밀리초로 PhpocServer server(80);ExpansionStepper stepX(14);ExpansionStepper stepY(13);서보 서보;long preX =0;long preY =0;byte penState =PEN_STATE_UP;bool isUn;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;} 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(긴 x, 긴 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); 긴 속도X =SPEED_X_COEF * abs(deltaX); 긴 속도Y =SPEED_Y_COEF * abs(deltaY); if(speedX> speedY) { if(speedX> SPEED_X_MAX) speedX =SPEED_X_MAX; 이중 비율 =deltaY / (이중)deltaX; speedY =(long) (비율 * speedX); } else { if(speedY> SPEED_Y_MAX) speedY =SPEED_Y_MAX; 이중 비율 =deltaX / (이중)deltaY; speedX =(long) (비율 * speedY); } 긴 accelX; 긴 가속; if(속도X <속도Y) { 가속 =ACCEL_Y_MAX; 이중 비율 =accelY / (더블)speedY; accelX =(long) (비율 * speedX); } 그렇지 않으면 { AccelX =ACCEL_X_MAX; 이중 비율 =accelX / (이중)speedX; accelY =(길게) (비율 * speedY); } if(deltaX !=0) stepX.command(F("%ld %lu %lu로 이동"), x, speedX, accelX); if(deltaY !=0) stepY.command(F("goto %ld %lu %lu"), y, speedY, accelY);}void xyCheckUpdateToWeb() { bool isUpdate =false; 부호 없는 긴 curMillis =millis(); if((curMillis - lastUpdateMillis)> MIN_UPDATE_INTERVAL) isUpdate =true; 긴 curX =stepX.getPosition(); 긴 curY =stepY.getPosition(); 긴 deltaX =curX - preX; 긴 deltaY =curY - preY; 긴 거리 =sqrt(pow(deltaX, 2) + pow(deltaY, 2)); if(dist> 해결책) isUpdate =true; if(isUpdate ==false || dist ==0) false를 반환합니다. lastUpdateMillis =curMillis; preX =curX; preY =현재; sendPositionToWeb(); // 웹에 표시할 현재 위치 보내기}void sendPositionToWeb() { char wbuf[20]; 긴 x =stepX.getPosition() * forwardDirX; 긴 y =stepY.getPosition() * forwardDirY; 문자열 데이터 =문자열(F("[")) + x + 문자열(F(",")) + y + 문자열(F(",")) + penState + 문자열(F("]\n")); data.toCharArray(wbuf, data.length() + 1); server.write(wbuf, data.length());} 무효 설정() { Serial.begin(9600); 동안(! 직렬); Phpoc.begin(PF_LOG_SPI | PF_LOG_NET); server.beginWebSocket("xy_plotter"); Serial.print("웹소켓 서버 주소 :"); Serial.println(Phpoc.localIP()); 확장.begin(460800); 서보.부착(8); /** 참고:첫 번째 실행의 경우:* - xyInit()에서 마지막 블록의 주석 처리를 제거합니다. * - Arduino 코드를 실행합니다. * - IDE의 값에 따라 이 파일의 6, 7행 및 index.php의 33행 값을 변경합니다. 콘솔. **/ xyInit(); lastUpdateMillis =millis();}void loop() { // 새 클라이언트를 기다립니다. PhpocClient client =server.available(); if(클라이언트) { 문자열 데이터 =client.readLine(); if(data) { //Serial.println(data); 바이트 구분자Pos1 =data.indexOf(':'); 바이트 구분자Pos2 =data.lastIndexOf(':'); 바이트 cmd =data.substring(0, separatorPos1).toInt(); 긴 x =data.substring(separatorPos1 + 1, separatorPos2).toInt(); 긴 y =data.substring(separatorPos2 + 1).toInt(); switch(cmd) { 경우 CMD_PEN_DOWN:xyGoto(x, y); //xyWait(); while(stepX.getState()> 1 || stepY.getState()> 1) xyCheckUpdateToWeb(); 펜다운(); 부서지다; 경우 CMD_PEN_UP://xyWait(); while(stepX.getState()> 1 || stepY.getState()> 1) xyCheckUpdateToWeb(); 펜업(); 부서지다; 경우 CMD_MOVE:xyGoto(x, y); 부서지다; } } } xyCheckUpdateToWeb();}

웹 사용자 인터페이스PHP

<스타일>본문 { 텍스트 정렬:가운데; 배경색:#33C7F2; }#canvas { 오른쪽 여백:자동; 여백-왼쪽:자동; 위치:상대; 배경색:#FFFFFF; }캔버스 { 위치:절대; 왼쪽:0px; 상단:0px; 오버플로 y:자동; overflow-x:숨김; -webkit-overflow-scrolling:터치; /* 멋진 웹킷 네이티브 스크롤 */}#layer1 { z-index:2; }#layer2 { Z-색인:1; }#layer3 { Z-색인:0; }
    

웹소켓:널 
연결지우기