티스토리 뷰

목표


이번 포스팅에서는 프로세싱을 이용해서 GUI 환경에서 AP 모드인 ESP8266을 컴퓨터에서 와이파이 모듈로 접속을 해서 프로세싱으로 스크롤바를 움직이면 그 움직인 값에 따라서 드론의 croess 모터들이 회전하도록 하는 포스팅을 해보도록 하겠습니다.

이전 아두이노 IDE에서 작성을 해야하는 소스코드는 밑에 링크로 들어가시면 됩니다.


*드론 모터속도 조절하기 아두이노 IDE편*









GUI 환경 작업을 하기위한 'controlP5' 라이브러리 설치










controlP5는 사용자 정의 인터페이스를 구성하기 위한 GUI 라이브러리라고 합니다.          






소스코드




import controlP5.*;
import processing.net.*; //network communication

ControlP5 cp5;  //controlP5
Client client;  //procesing.net

void setup(){
  size(700, 130); // 700px/130px
  noStroke();
  
  cp5 = new ControlP5(this); //object create
  
  cp5.addTextlabel("", "Throttle Test")
    .setPosition(200, 10)
    .setColorValue(0xffffff00)
    .setFont(createFont("Lucida Sans", 30))
    ;
    
   cp5.addSlider("throttle")
     .setRange(0, 255)
     .setScrollSensitivity(5.0*10/255) //0.19607.....
     .setPosition(20, 60)
     .setSize(600, 39)
     .setValue(0)
     ;
     
    client = new Client(this, "192.168.4.1", 23);
    
    client.write('T');
    client.write(0);
}

void draw(){
  background(0);
}

public void throttle(float speed){
  println("throttle : " + speed);
  client.write('T');
  client.write((int)speed);
}
    
   
    






코드설명





import controlP5.*; ->controlP5 관련 패키지들을 import 싴줘서  이 패키지들이 지원해주는 핸들들을 사용할 수 있도록 해줍니다.


import processing.net.*; -> 네트워크 통신을 하기 위해 processing.net 관련 패키지들을 임폴트 시켜주고 있습니다. 따라서 이 패키즐이 지원해주는 핸들들을 이용할 수 있게 되는 것 입니다.


ControlP5 cp5; -> 위에서 controlP5 패키지들을 임폴트 시켜줘서 ControlP5라는 핸들을 사용해 주는데 그 이름을 cp5라고 지정을 해주었습니다.




위 소스코드에서 보시면 큰 두가지 문맥으로 나뉩니다.


  • void setup()
  • void draw()


setup()


setup 함수는 프로세싱에서는 버튼이나 라벨과 같은 위젯들에 대한 초기화를 수행하는 역할을 합니다.

아두이노 IDE와 비교를 해보겠습니다. 아두이노 IDE 도 setup() 함수가 있습니다. setup()에서 초기 설정 값을 초기화 하는데 프로세싱에서도 비슷한 역할을 하지만 목적이 프로세싱에서는 GUI 형태의 프로그램을 구성할때 사용한다는 점만 다름니다.


draw()


반복적으로 수행되면서 위젯들에 대한 수정작업을 수행합니다.

아두이노 IDE와 비교를 해보면 loop() 함수와 동일합니다.




다시 소스코드 설명부분으로 넘어가서 setup 함수 부분을 보겠습니다.


size(700, 130); -> size() 라는 프로세싱 기본 함수인데 이 소스는 가로 700px 세로 130px로 윈도우 환경에서 윈도우 크기를 설정해주고 있습니다.


가로 700px 세로 130px




noStroke(); -> 이 함수는 도형을 그릴때 선을 그리는 기능을 비활성화 시킵니다.

(저도 왜 이 함수를 호출하는지 이해는 잘 안가는데 추후에 수정글을 올리도록 하겠습니다.)



cp5 = new ControlP5(this); -> 제 기억이 맞다면 예전에 JAVA를 배울적에 생성자 라는것을 배운적이 있는데 이 내용도 JAVA에 관련된 내용이라고 저는 생각이 됩니다. 해석을 하자면 위에서 controlP5 패키지를 import 시켜주고 ControlP5 핸들을 cp5라고 설정을 해주었습니다. 그래서 cp5 에다가 ControlP5라는 객체를 생성해주었습니다.






ControlP5 객체를 cp5에 생성을 해주었습니다.


그래서 addTestlabel() 함수를 호출해서 700, 130 픽셀 크기의 윈도우 창에다가 라벨을 박아놓는 문장입니다.


14번째줄은 setPosition 즉, 위치 설정을 해주는 것인데 윈도우 창에서 200, 10 픽셀 위치에 박고

serColorValue 는 0xffffff00 색으로 입혀주고

Setfont 는 Lucida sans 폰트의 30포인트로 설정을 해주겠다는 뜻 입니다.









addSlider 함수를 호출했습니다. 이 함수를 호출한 목적은 윈도우 창에다가 슬라이더를 추가하기 위한 것 입니다.

여기 나오는 문자열 throttle를 잘 기억해주시기 바랍니다.


setRange 함수를 이용해서 슬라이더 범위 값을 0~255값으로 지정을 해주었습니다.

setScrollSensitivity 함수를 이용해서 마우스 스크롤을 돌릴때 마다 움직이는 단위를 결정을 해줍니다.

계산기로 뚜들겨보니 0.19607....라고 아주 미세한 값들이 나오네요

setPosition 함수를 이용해서 슬라이더 위치를 가로 20px, 세로 60 px 위치에 위치를 시켜주고

setsize 함수를 이용해서 슬라이더 사이즈를 600px, 39px로 설정을 해주었습니다.


setValue(0) 을 입력한 이유는 초기 값(Value)를 0으로 설정해주기 위한 것 입니다.

그러면 드론과 통신을 해서 동작을 할때 Value가 0이니까 모터가 회전을 안하게 됩니다.

 






그리고 드디어 와이파이 통신에 대한 소스코드!





맨 위에서 processing.net 패키지를 제가 import 시켜주었습니다. 이로서 네트워크 통신이 가능하게끔 해주었습니다.


client 핸들에 Client라는 객체를 생성해주었습니다. 여기서 "192.168.4.1"은 ESP8266 펌웨어 업로드를 시켜줄때 설정을 해준 IP 이름이고 23은 포트(Port) 번호입니다.


여기서 왜 계속 'T' 문자와 0을 동시에 보내주냐면 이전 포스팅에서 아두이노 IDE에 소스코드를 보게 되면 문자 T가 TELNET 형태의 프로그램으로 전송이 되면 아두이노가 인식을 할때 "아 사용자의 입력이 지금 있는 상태구나"라고 인식을 해줍니다. 근데 동시에 0을 같이 보내주게 되면 "사용자의 입력이 있는 상태인데 속도는 0으로 해주라는 의미구나~" 라고 인식을 하게 됩니다.







background(배경)을 0 즉, 검정으로 해준다는 의미입니다.

draw가 반복적으로 무한적으로 실행이 되니 계속 검정색 배경화면이 보이겠지요?




위 내용도 JAVA 내용입니다. throttle 함수를 정의를 해주고 있는 문장입니다.

제가 위에서 "문자열 throttle를 잘 기억해주세요" 라고 말을 한것이 기억 나시나요??  지금 위에서 정의한 함수는 콜백함수인데 콜백함수는 제가 슬라이더를 움직이게 되면 throttle함수가 호출이 되는 함수입니다.


슬라이더를 움직이면 그 현재 위치 값이 매개변수 float형 speed에 현재 위치가 넘어오게 되어서 프로세싱 상에서 println 해준 내용들이 보여지게 되고

Client 객체가 생성이 된 client에 write 함수를 사용해서 'T'를 보내고 int 형으로 speed값이 보내지게 됩니다.


그러면 아두이노 IDE상에서는 T가 보내지니 "아 사용자 입력이 현재 있는 상태구나" 라고 인식을 하게 되는데 speed 라는 매개변수도 같이 보내지니까 "사용자 입력이 있는 상태인데 속도를 speed만큼 동작을 시켜주라는 거구나!"라고 인색을 해서 드론 프로펠러를 회전시켜줍니다.


아두이노는 라즈베리파이와 달리 컨트롤러입니다. 라즈베리파이는 작은 컴퓨터라고 보면 되고 아두이노는 그냥 조이스틱? 이라고 보면 이해하는데 도움이 될 것 입니다.







작동영상













Comments