Chrome Extensions 를 이용한 IoT 기기 제어 - RGB LED Control

Chrome Extensions 를 이용한 IoT 기기 제어

제목처럼 아주 거창한 내용은 아니다.

일반적으로 아두이노나 mbed의 경우에 간단한 웹서버를 IoT 기기에 업로드 할 수 있다.

이때, PC 쪽에서는 그냥 웹 브라우저를 통해 주소를 입력하는 방식으로 많은 예제들이 구성되어 있다.

너무 지겹다. 간단하게 색다른 방식으로 해 볼 수는 없나?

살펴보다.......

....

아 크롬 확장프로그램에서 간단하게 클릭으로 색깔을 보내고 기기가 반응하는 형태가 재미 있어 뵌다.

일단 크롬 확장프로그램, Chrome Extensions 을 간단하게 내 것으로 만들어야 겠다.

구글에 들어가자. 

마침 쉽게 시작할 수 있는 정보가 있네.

Getting Started: Building a Chrome Extension

여기서 색깔을 클릭하면 배경색을 바꿔주는 아주 유용한 예제가 있다. 아래 그림을 참고해서 찾아보자.

그냥 파일 4개가 다운로드 된다.

이 다운로드 된 파일을 그대로 크롬에서 아래와 같이 로드해 보면

새로운 네모난 색깔 아이콘이 등장.

기능은 쉽다. 그냥 색깔을 누르면 보고 있는 웹페이지의 배경색이 짠 하고 바뀌어 버린다. 나름 신기하네.

이제 작업을 좀 하자. 

배경색을 바꾸는 것은 목적이 아니었으니, 이 색깔 코드를 웹서버가 실행되어 잇는 자신의 아두이노, mbed로 보내는 코드를 추가하면 끝날 듯.

일단 보드는 없지만, 윈도우 창을 띄워서 가능한지 확인만 해보자.

코드 수정은 어렵지 않다.

구글 검색으로 javascript 로 window 열기, url 넣기 정도 하면 끝.

다운 받은 popup.js 코드에 아래 노란색 박스 부분을 추가하면 될 것 같다.

색깔을 보고, 색깔 코드를 "IoT기기주소/setcolor?rgb=value" 이런형태의 주소를 호출 해 주는 것이다.

혹시 쓸 사람을 위해 js code도 올려둠.

popup.js

주소나 페이지 이름, 변수명 등은 알아서 바꿔 쓰자.

그럼 어떻게 바뀌었나? 떡하니 새 창이 하나 뜬 상황을 볼 수 있다. 주소를 확인해 보면 그럭저럭 동작하는 듯.

실제 웹서버 기기를 두고 동작시키면 위의 결과보다 나은 것이 나올지도.

프로그래머 취향으로 200 OK 만 떡 뜰수도 있지만..

이상 즐즐.