Arduino PHPoC Web Communication 통신하기 - 간단한 LED 원격제어

이번엔 PHPoC에서 제공하는 built in web remote controller를 사용해보도록 하겠습니다.

웹 페이지에서 버튼을 누르면 원격으로 아두이노를 제어할 수 있는 것인데요!

따로 서버를 만들지 않아도 제공되기때문에 편하게 사용하실 수 있습니다 : )

1. 스케치프로그램에 라이브러리 설치

스케치 - 라이브러리 포함하기 - 라이브러리 관리에서 PHPoC 라이브러리를 설치해줍니다.

그 다음 아두이노 setup을 먼저 시켜준 뒤, 192.168.0.1로 접속해서 infrastructure로 접속해서 저는 제 방안에 있는 wifi를 연결시켜주었습니다

( 자세한 내용은 https://onepinetwopine.tistory.com/297?category=804237 링크 참고해주세요. )

저는 집에있는 WiFi를 사용하였지만 아두이노 자체를 Soft AP로 작동시킬 수도 있습니다.

그 다음 예제소스를 이용할것인데요, PHPoC 예제소스에 있는 WebReomtePush를 가져와 사용했습니다.

해당 코드를 아두이노에 업로드한다음,

돋보기 버튼을 눌러 시리얼모니터를 열어 할당된 IP주소를 확인해줍니다.

PHPoC 쉴드에서는 알아서 WebSocket를 만들어주는 서비스를 제공하고있습니다.

** Web Remote Push는 PHPoC [WiFi] Shield에저장된 웹 응용 프로그램입니다.

사용자가 웹 브라우저를 통해이 웹 응용 프로그램에 액세스하면 웹 응용 프로그램이 웹 브라우저에 표시됩니다.

사용자가이 웹 응용 프로그램에서 "연결"버튼을 클릭하면 웹 응용 프로그램과 Arduino 사이에 WebSocket 연결이 만들어집니다.

사용자가 버튼을 누르면 웹 응용 프로그램은 버튼의 대문자 이름을 Arduino로 보냅니다.
사용자가 버튼을 놓을 때, 웹 앱은 아두 이노에게 버튼의 소문자 이름을 보냅니다.

위에서 얻은 IP주소로 들어가보면,

위와 같은 창을 만나보실 수 있는데요, 3번째에 있는 Web Remote Control / Push로 들어가서 Connect 버튼을 눌러주면

이처럼 연결되었음을 확인하실 수 있고, 원격제어가 이루어지는 것을 보실 수 있습니다.

(이 웹앱은 미리 만들어져 sheld 내에 업로드되어있는 것을 사용한 것입니다. 응용하길 원하신다면 새로 만드셔야겠죠.. 간단하게 편집은 위의 페이지에서 환경설정으로 들어가 하실 수 있습니다.)

레퍼런스 : https://forum.phpoc.com/articles/tutorials/1249-arduino-web-server-remote-push

---

이제 LED 원격제어를 해볼까요?

결과물

 

아두이노에 파워만 공급되고있다면, 이렇게 LED제어가 가능해집니다.

코드는 아래와같이 살짝 수정해주었으며, A가 눌렸을 떄 켜지고 B가 눌렸을 때 꺼지도록 구성했습니다.

#include <Phpoc.h>

PhpocServer server(80);

void setup() {
  //LED 제어 테스트 
  pinMode(2,OUTPUT);

  //원격 제어 테스트중 
  Serial.begin(9600);
  while(!Serial)
    ;

  // initialize PHPoC [WiFi] Shield:
  Phpoc.begin(PF_LOG_SPI | PF_LOG_NET);
  //Phpoc.begin();

  // start WebSocket server
  server.beginWebSocket("remote_push");

  // print IP address of PHPoC [WiFi] Shield to serial monitor:
  Serial.print("WebSocket server address : ");
  Serial.println(Phpoc.localIP());
}

void loop() {
  // wait for a new client:
  PhpocClient client = server.available();

  if (client) {
    if (client.available() > 0) {
      // read a byte incoming from the client:
      char thisChar = client.read();

      // when an user presses a button on the web apps, the web app sends an
      // uppercase character corresponding with the name of button to Arduino.
      // When an user releases a button on the web apps, the web app sends a
      // lowercase character corresponding with the name of button to Arduino.
      if(thisChar == 'A'){
         Serial.println("button A press");
         digitalWrite(2,OUTPUT);
         delay(500);
         }
      if(thisChar == 'a')
         Serial.println("button A release");
      if(thisChar == 'B'){
         Serial.println("button B press");
          digitalWrite(2,LOW);
          delay(500);
         }
      if(thisChar == 'b')
         Serial.println("button B release");
      if(thisChar == 'C')
         Serial.println("button C press");
      if(thisChar == 'c')
         Serial.println("button C release");
    }
  }
}

아두이노 핀은 2번 핀을 사용했고, 사용하는 법은 다 아실테지만,,, 사진을 간단하게 첨부하겠습니다.